Latest 1.0.3
Homepage https://github.com/CoulsonWang/CWCarouselView
License Apache License, Version 2.0
Platforms ios 7.0, requires ARC
Dependencies SDWebImage
Authors

Pod Version
Pod Platform
Pod License

功能简介

CWCarouselView是一个无限轮播器控件。一行代码即可集成,可双向无缝无限滚动,可自定义点击事件。

第三方库依赖

本控件依赖于SDWebImage,实现网络图片的加载和缓存。

安装

1.CocoaPods

如果你的项目使用CocoaPods管理三方库,那么仅需在你的Podfile文件中,加上pod 'CWCarouselView'即可。

2.手动导入

下载项目文件夹后,将CWCarouselView文件夹拖拽到你的项目中,即可集成。

导入头文件

在需要用到CWCarouselView的文件中,导入#import "CWCarouselView.h"即可

演示Demo

本工程文件中附带了一个演示Demo:CWCarouselTestDemo,在Xcode中直接运行即可查看。

使用方法

创建轮播器

只需一行代码即可创建一个图片轮播器。提供了通过本地图片创建和通过网络图片创建两种方式:

// 通过本地图片创建
    CGRect frame = CGRectMake(50, 100, 300, 150);

    UIImage *image1 = [UIImage imageNamed:@"img_01"];
    UIImage *image2 = [UIImage imageNamed:@"img_02"];
    UIImage *image3 = [UIImage imageNamed:@"img_03"];

    NSArray *imageArray = @[image1,image2,image3];

    CWCarouselView *carouselView1 = [CWCarouselView carouselViewWithFrame:frame imageGroup:imageArray];
// 通过网络图片创建
    NSURL *url1 = [NSURL URLWithString:@"http://img2.niutuku.com/desk/1207/1005/ntk122731.jpg"];
    NSURL *url2 = [NSURL URLWithString:@"http://img2.niutuku.com/1312/0800/0800-niutuku.com-14339.jpg"];
    NSURL *url3 = [NSURL URLWithString:@"http://img2.niutuku.com/desk/anime/0529/0529-17277.jpg"];

    NSArray *urlArray = @[url1,url2,url3];

    CWCarouselView *carouselView2 = [CWCarouselView carouselViewWithFrame:frame imageUrls:urlArray placeholder:nil];

轮播器控件创建完毕后,将其添加到需要显示的View上,就可以自动实现图片的展示和自动轮播了。

处理图片点击事件

CWCarouselView支持了block和代理两种方式来监听图片的点击,实现其中任意一种即可(两者不共存,若设置了代理,则block失效)

利用block处理图片点击的代码:
// 给控件的operations属性传入等同于图片数量个数的block,即可在被点击时调用
carouselView1.operations = @[ ^{
                                    NSLog(@"第1张图片被点击");
                                },
                                   ^{
                                       NSLog(@"第2张图片被点击");
                                   },
                                   ^{
                                       NSLog(@"第3张图片被点击");
                                   }
                               ];
// 如果传入的block数组只有1个元素,则点击任意图片均会调用者一个block
// 如果传入的block数组长度既不是1也不等于图片数量,则不会处理事件
利用代理处理图片点击的代码:
// 设置代理(需要遵守CWCarouselViewDelegate协议)
carouselView2.delegate = self;
// 实现代理方法
- (void)carouselView:(CWCarouselView *)carouselView didClickImageOnIndex:(NSUInteger)index {
  // 分别设置每张图片的响应事件即可
    switch (index) {
        case 0:
            NSLog(@"点击了第1张图片");
            break;
        case 1:
            NSLog(@"点击了第2张图片");
            break;
        case 2:
            NSLog(@"点击了第3张图片");
            break;
        default:
            break;
    }
}

自定义属性

CWCarouselView提供了一系列API用于自定义控件属性

自定义轮播间隔:
// 设置轮播时间间隔(默认为2秒)
carouselView2.interval = 5.0;
// 如果希望禁止掉自动轮播,可将间隔设置为 -1
carouselView1.interval = -1;
自定义占位图片:
// 通过网络的方式加载的图片,可以设置一张占位图片,如果图片未正常下载,则会显示占位图片
carouselView2.placeholderImage = [UIImage imageNamed:@"img_01"];
// 如果设为nil,则显示一张空白图片
carouselView1.placeholderImage = nil;
自定义分页标签的属性:
// 设置分页标签是否可见。默认为YES
    carouselView1.pageControlVisible = NO;

// 设置分页标签的位置。默认为Left
    carouselView2.pageControlPostion = CWPageControlPostionMiddel;  
// 有三个取值可以选择,分别为左中右
typedef enum : NSUInteger {
    CWPageControlPostionLeft,
    CWPageControlPostionRight,
    CWPageControlPostionMiddel,
} CWPageControlPostion;

// 设置分页标签的主题色
    carouselView2.pageIndicatorTintColor = [UIColor redColor];
    carouselView2.currentPageIndicatorTintColor = [UIColor whiteColor];
自定义图片的ContentMode:
// 设置图片填充模式(默认为ScaleToFill)
    carouselView2.imageContentMode = UIViewContentModeScaleAspectFit;
自定义是否允许用户手动滚动
// 设置是否允许用户手动滚动(默认值为YES)
    carouselView2.allowDragging = NO;
自定义自动滚动方向
// 本控件支持了自定义向四个方向滚动,默认为向右滚动

// 设置自动滚动时的滚动方向
    carouselView2.scrollDirection = CWScrollDirectionDown;

// 有四个取值可以选择,分别为上下左右
typedef enum : NSUInteger {
    CWScrollDirectionRight,
    CWScrollDirectionDown,
    CWScrollDirectionLeft,
    CWScrollDirectionUp
} CWScrollDirection;

关于内存

定时器

虽然控件内部用到了定时器来进行图片的自动轮播,但是内部实现中重写了removeFromSuperView方法。当控件从视图上移除时,会自动销毁定时器(该方法在控制器离开屏幕时也会被调用)。从而避免了定时器循环引用导致的内存泄露问题。因此使用时无需担心定时器导致的内存问题。

block

如果是采用block的方式处理图片点击事件,且block中用到了当前的控制器,需要注意使用__weak修饰符,避免产生循环引用,示例代码:

// 使用__weak修饰符避免循环引用
    __weak __typeof(self) weakSelf = self;
    carouselView2.operations = @[^{
        NSLog(@"%@",weakSelf.title);
    }];

实现思路

  • 将3个imageView添加到scrollview上,左右2个imageview用于过渡,借助scrollview的didEndDecelerating代理方法监听滚动事件,并修改scrollView的contentOffset、修改三个imageView的image来实现无限轮播。
  • 相比于N+2个imageView的实现方式,内存占用更低。
  • 不仅实现了无限滚动,也解决了滚动到最后一张图片时,下一次滚动效果丑陋的问题。

Latest podspec

{
    "name": "CWCarouselView",
    "version": "1.0.3",
    "summary": "u529fu80fdu5f3au5927u7684u65e0u9650u8f6eu64adu5668u63a7u4ef6uff0cu53efu65e0u9650u6edau52a8uff0cu53efu81eau5b9au4e49u70b9u51fbu4e8bu4ef6u548cu6edau52a8u65b9u5411",
    "description": "u8fd9u662fu4e00u4e2au5229u75283u4e2aImageViewu5b9eu73b0u7684u56feu7247u8f6eu64adu5668uff0cu53efu4ee5u5b9eu73b0u56feu7247u7684u65e0u9650u6edau52a8u8f6eu64adu3002u540cu65f6u652fu6301u672cu5730u56feu7247u548cu7f51u7edcu56feu7247uff0cu53efu81eau5b9au4e49u70b9u51fbu4e8bu4ef6u3001u6edau52a8u65b9u5411u7b49uff0cu4ec5u9700u4e00u884cu4ee3u7801u5373u53efu96c6u6210u4f7fu7528",
    "homepage": "https://github.com/CoulsonWang/CWCarouselView",
    "license": "Apache License, Version 2.0",
    "authors": {
        "Coulson_Wang": "[email protected]"
    },
    "platforms": {
        "ios": "7.0"
    },
    "source": {
        "git": "https://github.com/CoulsonWang/CWCarouselView.git",
        "tag": "1.0.3"
    },
    "source_files": "CWCarouselView/CWCarouselView/CWCarouselView/*",
    "requires_arc": true,
    "dependencies": {
        "SDWebImage": [
            "~> 4.0.0"
        ]
    }
}

Pin It on Pinterest

Share This