登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

利用uicollectionview实现无限循环轮播图

[复制链接]
来自: rasping 分类: iOS精品源码 上传时间: 2016-9-29 17:36:41

项目介绍:

之前写的项目,几乎每一个都会用到循环轮播图,于是很早之前就自己写了一个,并一直在使用。在使用过程中也会将出现的BUG进行修复,还会根据需求添加一些新的功能,这个功能就一直修修改改的用着。今天抽出点时间,对这份代码进行了整理和完善,现在分享出来供大家一起学习。

思路与实现

其实在明白设计思路之后,实现起来就非常简单,所以为这里会先介绍实现的思路。

思路

我们都知道UICollectionView是系统提供的一个用于展示各种图片之类的展示的控件,用UICollectionView展示一组图片使其可以左右滑动,包括让其自动滚动,这些都非常简单。但如何让其实现无限循环滚动呢?
其实原理非常简单,就是让UICollectionView的数据源数组里面多放几组将要展示的图片,然后让UICollectionView滚动到中间位置就OK了。这里我们需要清楚:数组中多了那么多图片,会不会导致内存增加呢?其实,这个完全不用担心,因为数组中存放的是图片的内存地址,所以图片的增加不会对内存有多大的影响。明白了思路之后,就直接上代码。

实现

加载本地图片

在设置好轮播图的位置等一些基本属性之后,还需要给轮播图传一个图片数组addLocalImages:,具体实现如下:

- (void)addLocalImages:(NSArray<NSString *> *)images
{
    [ImagesPlayer checkElementOfImages:images];
    [self.dataArray removeAllObjects];
    [self.dataArray addObjectsFromArray:images];
    _images = [NSArray arrayWithArray:self.dataArray];
    
    //刷新pageControl
    self.indicatorView.numberOfPages = images.count;
    [self.indicatorView updateCurrentPageDisplay];
    
    //在Updates里执行完更新操作后再执行completion回调
    [self.collectionView performBatchUpdates:^{
        [self.collectionView reloadData];
    } completion:^(BOOL finished) {
        //刷新完成让collectionView滚动到中间位置
        NSInteger center = ceilf([self.collectionView numberOfItemsInSection:0] * 0.5);
        NSIndexPath *indexPath = [NSIndexPath indexPathForRow:center inSection:0];
        [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
        self.previousOffsetX = self.collectionView.contentOffset.x;
        
        //开启定时器
        [self removeTimer];
        [self addTimer];
    }];
}

这里需要注意的是:每次有新的图片数组添加进来时,都需要对UICollectionView进行reloadData才能展示新的图片,然后再让UICollectionView滚动到中间位置,但必须要等到reloadData完成才能滚动。所以这里需要用到performBatchUpdates:completion:这个方法,在updates代码块中执行对UICollectionView的更新操作,等更新操作完成再调用completion代码块中的代码。

加载网络图片

因为在项目中轮播图片是从后台获取的,所以还需要加载网络图片addNetWorkImages:placeholder:。这个方法与上面加载本地图片方法相比,就是多了一个占位图,然后利用图片地址请求网络图片,请求到图片后还需做本地缓存,具体实现如下:

- (void)setImageWithURL:(NSString *)url placeholderImage:(UIImage *)placeholder
{
    NSString *fileDir  = [[NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) firstObject] stringByAppendingPathComponent:@"imagesCache"];
    NSFileManager *fm  = [NSFileManager defaultManager];
    [fm createDirectoryAtPath:fileDir withIntermediateDirectories:YES attributes:nil error:nil];
    NSString *fileName = [fileDir stringByAppendingPathComponent:[self md5:url]];//MD5加密图片名全路径
    UIImage *image     = [UIImage imageWithContentsOfFile:fileName];
    if (image) {
        self.image = image;
    }else {
        self.image = placeholder;
        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
            NSURL *path = [NSURL URLWithString:url];
            NSData *data = [NSData dataWithContentsOfURL:path];
            dispatch_async(dispatch_get_main_queue(), ^{
                self.image = [UIImage imageWithData:data];
            });
            [data writeToFile:fileName atomically:YES];
        });
    }
}

缓存思路:先从本地取,如果取不到就从网络请求,请求到后存在本地。
因为涉及到本地缓存,就有清理缓存的需求,calculateCacheImagesMemory计算本地缓存的图片大小,removeCacheMemory清空本地缓存,代码实现比较简单,具体可以在Demo中查看。

分页指示器

在项目中因为项目UI的要求,经常会遇到各种不同的分页指示器。功能中默认的是系统自带的UIPageControl,也提供了自定义分类指示器的接口,使用也很简单,只需要先遵守ImagesPlayerIndictorPattern协议,并实现该协议的方法就行了,具体代码如下:

- (UIView *)indicatorViewInImagesPlayer:(ImagesPlayer *)imagesPlayer
{
    CGFloat margin          = 5.0;
    UIView *view            = [[UIView alloc] init];
    CGFloat w               = 50;
    CGFloat h               = 20;
    CGFloat x               = CGRectGetWidth(imagesPlayer.frame) - w - margin;
    CGFloat y               = CGRectGetHeight(imagesPlayer.frame) - h - margin;
    view.frame              = CGRectMake(x, y, w, h);
    view.backgroundColor    = [UIColor blackColor];
    view.alpha              = 0.5;
    view.clipsToBounds      = YES;
    view.layer.cornerRadius = 5.0;
    UILabel *lable          = [[UILabel alloc] initWithFrame:view.bounds];
    lable.textAlignment     = NSTextAlignmentCenter;
    lable.textColor         = [UIColor whiteColor];
    self.lable              = lable;
    [view addSubview:lable];
    return view;
}

返回自定义的分页指示器的样式

- (void)imagesPlayer:(ImagesPlayer *)imagesPlayer didChangedIndex:(NSInteger)index count:(NSInteger)count
{
    self.lable.text = [NSString stringWithFormat:@"%ld/%ld", index, count];
}

更新分页指示器的显示

事件处理

这里就对轮播图的点击事件进行处理,这里可以通过代理监听或是设置代码回调。
代码监听:遵守ImagesPlayerDelegae代理,实现imagesPlayer:didSelectImageAtIndex:方法。
代码回调:通过imageTapAction:接口设置回调代码块。
最后需要说明的是,在当前控制器的viewDidDisappear中要移除定时器removeTimer,防止没必要的CPU消耗。
至此,整个轮播图的基本功能都已实现,大家可以下载Demo,同时也欢迎大家提出你的想法或意见,我们一起相互学习,共同进步!!!

MADE BY CODE4APP

相关源码推荐:

我来说两句
*滑动验证:
所有评论(130)
hellokenken 2016-9-30 18:15:09
不错不错,楼主辛苦了。。。
回复
AlonMessi 2016-9-30 18:15:43
感谢大神分享,必须顶!
回复
littleRed 2016-9-30 18:16:20
感谢大神分享,必须顶!
回复
kengsir 2016-9-30 18:16:26
感谢分享,楼主V5~
回复
phoiu 2016-9-30 18:16:59
不错不错,楼主辛苦了。。。
回复
BlueManlove 2016-9-30 18:17:46
学习...学习...
回复
code4app热心网友 2016-10-2 10:46:48
精华内容,楼主V5!
回复
code4app热心网友 2016-10-3 21:07:26
楼主威武啊,Code4App有你更给力!
回复
code4app热心网友 2016-10-4 11:34:29
淡定,淡定,淡定……
回复
提取码:  下载次数:251 状态:已购或VIP 售价:0(原价:10)金钱 下载权限:初级码农 
4654 0 251
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表