一个非常简单但很实用的无限轮播图（swift版本）
UICollectionView无限轮播效果已经有很多前辈定制过，demo内只是对其思路进行简单实现
效果视频和源码已经上传到github上
我的demo源码
就不给效果图了毕竟是动态的，源码里面有效果录屏（效果.mov）
原理
假设轮播4张图 UICollectionView的dataSource = [img0,img1,img2,img3]
现在考虑几个问题
UICollectionView滚动到img3的时候，想要下一张能滚动到img0就只能回滚，要解决这个问题，最简单的方法就是扩展数组，后面多接几遍原图片数组，同理img0想上一张滚到img3，数组前多接几遍原图片数组
现在datasource=[ (img0,img1,img2,img3) * N,img0,img1,img2,img3, (img0,img1,img2,img3) * N ]
只要一开始滚动到N*4的下标位置，用户在边界前左右滑动都是无限滚动的效果为了让用户没那么容易滚动到边界，我们当然是尽可能的使用大一些的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
}
- 即使我们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
}
- 结合上面的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)
}
注意
- demo内考虑到轮播图不一定传的就是图片，可能是定制的view啊啥的，所以demo里使用的[UIView]
- 滚动的过程会因为iosUICollectionView的优化，导致某页黑掉了，需要关掉self.collectionView.isPrefetchingEnabled = false
- 推荐自己写pageControl，系统提供的定制效果差，还不好点击=。=
