[iOS]UICollectionView循环滚动功能的实现思路

很多 APP 首页的广告都有图片循环滚动功能, 我做的项目中正好也需要这个功能

我说主要思路, 并提供我写的代码例子

广告要滚动, 首先想想具有滚动功能的原生控件有哪些, scrollView, tableView, collectionVIew, webView......

广告要水平滚动, 所以只剩 scrollView, collectionVIew 可以试试

方法一: scrollView

假设有5张图片, 分别叫 A,B,C,D,E, 每张图片放到 imageView 上, 然后 imageView 放到 scrollView 上

用户有两种操作, 向左滚, 向右滚

当向左滚, 滚到第1张时, 就是最左边那张时, 我把第5张图片给挪过来(设置 frame 值), 如下图

[A],B,C,D,E,    // 现在显示 A 图片, 我设置5张图片的 frame 值使得图片顺序变成这样

E,[A],B,C,D     // E 被挪到 A 的前面了, 实现了循环滚动, [ ]括号表示正在显示的图片

向右滚也同理, 

A,B,C,D,[E],    // 现在显示 E 图片, 在 E 显示完之后

B,C,D,[E],A     // 马上把 A 挪到 E 的右边

具体在哪里挪, 请看一下 scrollView 的所有代理方法, 想想在哪个方法里比较合适

可以优化的地方, 假设图片有很多张, 没必要创建那么多 imageView, 只要3个 imageView 就够了, 想想2个够吗?

3个 imageView, 分别叫 A,B,C, 我只显示中间那个 imageView, 用 [ ] 括住的那个

A,[B],C

C,[A],B// 向左滚, 把 C 移到了 A 的左边

B,[C],A // 再向左滚, B 移到 C 的左边

可是 N 张图片怎么放到 3 个imageView 里? 还记得<数据结构>里的循环队列吗? 

我每次去循环队列里取一张图片X作为当前显示的图, 结构如下

X前一张 ,[图片X], X后一张

C语言中数组和链表都可以实现循环队列, 想想 OC 中用什么实现循环队列?

我用 NSArray + NSInteger 索引实现, 所有图片放进 NSArray *array 里, 再来个 NSInteger index; 循环的索引

加1操作: index = (index + 1) % array.count;

减1操作: index = (index - 1 + array.count) % array.count;

加1操作取前一张, 减1取后一张

scrollView 的方法就到这里了

方法二: collectionView

由于方法一自己写的 imageView 重用太过复杂, 而且scrollView 代理方法有局限性(我想在手指离开屏幕时, 获得最终结果是左滚还是右滚,scrollView 没有这个代理方法), 导致连续滚动时会出现不连贯的问题

collectionView 自带了 cell 重用, 还可以设置为水平滚动, 所以我想到在 cell 上放 imageView, 借用collectionView的重用机制, 那怎么实现循环功能呢? 

还是有5张图片, 分别是 ABCDE, 放在数组里, A 在 0 位置, B 在 1 位置,,,,如此类推

我把这组图片复制100份, 存进数组里, 那么数组里面的东西就像这样

ABCDEABCDEABCDE....// 看出规律没, ABCDE 循环放, 这个数组就有 100*5 个元素

然后我把 collectionView 定位到中间的第 50 组的, 第0张图片来显示, 如下图, 前面还有49组, 后面还有50组图片

......ABCDE,[A]BCDE,ABCDE......  

这样就实现了循环滚动了吧, 但是有问题

问题1. 图片很多, 很耗内存

问题2. 用户一直往前滚动, 迟早会滚到边界

问题1解决方法

还记得<数据结构>里的地址排序吗, 不记得我来说说

假如数组里的元素很大(1MB 以上), 移动很不方便的时候, 要对他排序, 那么我可以对他的地址进行排序, 而不移动元素内容, 我来一张表, (地址, 元素的地址), 保存排序结果即可, 排序不是重点不展开了

所以那 5 图片我没必要复制 100 份了, 我把5张图片的地址, 复制100份, 存在数组里, 数组地址是 long int 型的吧

假设 long int 占 8个字节, 那么这个数组大小是 100*5*8 = 4000 个字节, 差不多 4KB 而已, 项目中一张图片是 200多k

那么我就用, 下面的数组表示图片了, 拿到数组内容, 再去图片数组里拿具体图片即可, 解决内存占用问题

......012340123401234......

问题2解决方法

用户一直往前滚动, 迟早会滚到边界, 这个很好解决, 当 collectionView 停止滚动时, (想想停止滚动是哪个代理方法), 我去把 collectionView 重新定位到第50组的图片那里去, 并且不用动画的滚动, 即可

除非有人手指不离开屏幕, 一直朝一个方向滚 collectionView, 导致 collectionView 动画停止不了, 无法重定位到中间

那么可以把100份的数组, 开到1000份, 那么就有 5000个图片地址了, 他手指不松开的滚动, 还是会到边界, 遇到这么无聊的人, 我也是给他跪了.... 

代码下载地址:

collectionView循环滚动   http://pan.baidu.com/s/1skeLQLf

scrollView循环滚动   http://pan.baidu.com/s/1KrIuM