ios无限轮播图

一个非常简单但很实用的无限轮播图（swift版本）
UICollectionView无限轮播效果已经有很多前辈定制过，demo内只是对其思路进行简单实现
效果视频和源码已经上传到github上

我的demo源码

就不给效果图了毕竟是动态的，源码里面有效果录屏（效果.mov）

原理

假设轮播4张图 UICollectionView的dataSource = [img0,img1,img2,img3]
现在考虑几个问题

1. UICollectionView滚动到img3的时候，想要下一张能滚动到img0就只能回滚，要解决这个问题，最简单的方法就是扩展数组，后面多接几遍原图片数组，同理img0想上一张滚到img3，数组前多接几遍原图片数组
   现在datasource=[ (img0,img1,img2,img3) * N,img0,img1,img2,img3, (img0,img1,img2,img3) * N ]
   只要一开始滚动到N*4的下标位置，用户在边界前左右滑动都是无限滚动的效果

2. 为了让用户没那么容易滚动到边界，我们当然是尽可能的使用大一些的N，但是即使N=10，4张图也要扩展到40+4+40=84大小的数组，有时候我们不一定传的图，可能传含有图片信息的object，没必要去拷贝84个出来，所以我们需要用一个数组将图片的下标顺序记录，然后通过下标访问原图片数组来获得图片
   现在datasource=[ (0,1,2,3) * N, 0,1,2,3, (0,1,2,3) * N ]
   对应的源码

   @IBOutlet weak var collectionView: UICollectionView!
   @IBOutlet weak var pageControl: UIPageControl!
    
    /// 左边重复的次数
    private let leftRepeatNum = 10
    /// 右边重复的次数
    private let rightRepeatNum = 10
    
    /**
     * 里面存的是pageViews的下标,重复n次
     *
     * 具体内容
     * (0~pageViews.count-1) * leftRepeatNum,
     * (0~pageViews.count-1),
     * (0~pageViews.count-1) * rightRepeatNum
     */
    private var data = [Int]()
    
    private var _pageViews:Array<UIView>?
    
    var pageViews:Array<UIView> {
        get {
            return _pageViews!
        }
        set {
            _pageViews = newValue
            self.pageControl.numberOfPages = _pageViews!.count
            for _ in 0..<(self.leftRepeatNum+1+self.rightRepeatNum) {
                for j in 0..<_pageViews!.count {
                    self.data.append(j)
                }
            }
            self.collectionView.reloadData()
            
            let start = self.startPageIdx()
            self.currentPage = start
            self.collectionView.scrollToItem(at: IndexPath(row: start, section: 0), at: .centeredHorizontally, animated: false)
        }
    }

    /// 位于data的下标 0 ~ (left+1+right)*pageViews.count - 1
    private var currentPage:Int = 0
    
    /// 位于点的下标，0 ~ pageViews.count-1
    var pageIdx:Int {
        get {
            return self.currentPage % self.pageViews.count
        }
    }

    private func startPageIdx() -> Int {
        return self.leftRepeatNum * self.pageViews.count
    }
    
    private func endPageIdx() -> Int {
        return (self.leftRepeatNum + 1) * self.pageViews.count - 1
    }

3. 即使我们N设的非常大，用户一直滚动下去，也终会触碰到边界，所以我们可以在每次用户滚动完的时候将collectionView重新滚动到中间对应的相同位置，如N=10的时候，中间的下标40-43，当用户停止滚动的时候位于44，需要纠正到44%4+40=40的位置上
   对应的源码，其中page的定位需要改为自己的cell宽，demo内cell宽设为了375所以给了375

    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        /// 超出startPageIdx~endPageIdx的 纠正回区间内对应的item
        let page = lroundf(Float(scrollView.contentOffset.x / 375))
        if page < self.startPageIdx() || page > self.endPageIdx() {
            self.correctPage(page: page)
        }
    }

    private func correctPage(page:Int) -> Void {
        let rest = page % self.pageViews.count
        let idx = self.startPageIdx() + rest
        let indexPath = IndexPath(row: idx, section: 0)
        self.collectionView.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: false)
        
        self.currentPage = idx
    }

4. 结合上面的3点，一个无线轮播图效果就出来了，剩下都是边角问题

手动滑动的时候需要同步页数到pageControl中
在方法scrollViewDidScroll里面更新即可

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        /// 手动滑动的时候，纠正底部pageControl的page
        let page = lroundf(Float(scrollView.contentOffset.x / SCREEN_WIDTH))
        if scrollView.isDragging || scrollView.isTracking {
            if page == self.currentPage {
                return
            } else {
                self.updatePageControl(page: page)
            }
        }
        self.currentPage = page
    }
    private func updatePageControl(page:Int) -> Void {
        let rest = page % self.pageViews.count
        self.pageControl.currentPage = rest
    }

需要提供滚动到指定位置的方法
方法实现原理：先将原位置纠正到中间对应位置，再滚动到参数page 中间对应位置上

    func scrollToPage(_ page:Int) -> Void {
        if self.collectionView.isDragging || self.collectionView.isTracking {
            return
        }
        self.correctPage(page: self.currentPage)
        let rest = page % self.pageViews.count
        self.currentPage = self.startPageIdx() + rest
        self.collectionView.scrollToItem(at: IndexPath(item: self.currentPage, section: 0), at: .centeredHorizontally, animated: true)
        self.updatePageControl(page: self.currentPage)
    }

注意

1. demo内考虑到轮播图不一定传的就是图片，可能是定制的view啊啥的，所以demo里使用的[UIView]
2. 滚动的过程会因为iosUICollectionView的优化，导致某页黑掉了，需要关掉self.collectionView.isPrefetchingEnabled = false
3. 推荐自己写pageControl，系统提供的定制效果差，还不好点击=。=

好了，告辞