用collectionView自定义实现一个无限滚动的轮播图

这里主要说一下无限轮播的核心思路和解决方案

我先以scrollview为例子：

假设一个数组里面有 3 张图片 分别为 ： 图0，图1，图2

那么我们就把scrollview的contentOffset 设置为 5（数组数 + 2） 张图片的大小。

在 0 位置 放入数组里的最后一张图片， 在 4 位置（最后一个位置） 放入数组的 第一 张图片其它的按顺序放，完成后的contentoffset里的顺序应该是 ： 图2， 图0， 图1， 图2， 图0

关键步骤：

1，让scrollview的初始状态的contentOffset.x 的值为左边 图0 的位置，那么程序运行时我们首先看到的就是图0

2，当左边的 图0 向左 滚动到了左边的 图2 如果我们不进行任何操作的话我们就不能继续向左滚动了，因为已经到了边界处 ，所以我们要想办法打破这种限制，即：当左边的 图0 完全滚动到左边的 图2 时我们把scrollview的 contentoffset.x 设置到右边 图2 的位置（虽然改变了contentoffset.x由于是一样的图片所以不会有变化） 这个时候就能继续向左滑动了，因为这个时候换成了右边的 图2它的左边是 图1。

3， 如果第2 步里面contentoffset.x 设置为 右边 图2时我们没有向左边滑动而是向右边滑动了呢？当然这时候是可以滑动的，因为 这个 图2 的右边还有一个右边的 图0 同第2步，如果不做任何操作，那么当我们向右滑动到右边的 图0 时 就不能再继续向右边滑动了，所以这个时候为了打破这种限制我们也需要做一些操作：即 当右边的 图2 向右边完全滑动到右边的 图0 时 我们把contentoffset.x 设置为 左边 图0 的位置

4，虽然有点绕，但是至此已经完成了一个无限循环 的过程，虽然描述起来很复杂，但是所需代码是非常少的

下面即是实现上面描述的所有代码

//循环处理

//当处于最左边界时继续往左拉动时

if(_loopView.contentOffset.x <= 0) {

_loopView.contentOffset =CGPointMake(KWIDTH*self.sourcesArray.count, 0);

//当处于最右边界时继续往右拉动

} else if(_loopView.contentOffset.x >= (self.sourcesArray.count +1)*KWIDTH) {

_loopView.contentOffset = CGPointMake(KWIDTH, 0);

}

说明：如果图片特别多的话（一般不会太多，只是出于极端考虑而已），scrollview需要开辟的空间个数为 数组item个数 +2，会占用大量内存（也可以自己实现复用），所以需要用collectionView来优化，collectionView的思路与这个是一样的，但是由于collectionView是可以复用的，所以不论数组里有多少的图片collectionView中只需要 开辟三个 图片的空间即可，其他的复用

需要的话可以去我的github下载demo把里面的XDLoopView文件夹整个放入项目里即可（需要依赖SDWebImage）

github地址：https://github.com/Xiexingda/XDLoopView.git

喜欢的话记得github给颗星星哦！转载请注明出处，谢谢支持！

效果：