ICycleView
ICycleView是一个基于UICollectionView实现的轻量级无限轮播图
Content
FeaturesRequirementsCocoaPodsUsage
默认滚动视图自定义图片宽度和指示器的位置和颜色自定义Cell-纯代码和Xib创建都支持Implementation
实现原理主要代码
UICollectionView代理方法循环轮播实现ContactGithub
Features
支持单张图片支持滚动图片宽度设置支持本地图片显示，网路图显示，本地图片和网路图混合显示支持自定义图片展示Cell（纯代码和Xib创建都支持）支持UIPageControl具体位置设置支持UIPageControl显示颜色设置支持图片点击回调支持图片滚动回调
Requirements
iOS 8.0+Swift 4.0+
CocoaPods
pod
'ICycleView',
'~> 1.0.0'
在终端 pod search 'ICycleView' 时若出现 Unable to find a pod with name, author, summary, or description matching 'ICycleView' 错误 请在终端运行 1：pod setup 2：$rm ~/Library/Caches/CocoaPods/search_index.json
Usage
默认滚动视图
lazy
var defaultCycleView: ICycleView = {
let cycleView = ICycleView(frame: CGRect(x:
0, y:
50, width: UIScreen.main.bounds.width, height:
130*scaleForPlus))
view.addSubview(cycleView)
return cycleView
}()
defaultCycleView.pictures = pictures
自定义图片宽度和指示器的位置和颜色
// 惰性初始化滚动视图
lazy var customPagetrolPositionnCycleView: ICycleView = {
let cycleView = ICycleView(frame: CGRect(
x:
0,
y:
190, width: UIScreen
.main.bounds.width, height:
130*scaleForPlus))
cycleView
.imgViewWidth =
374*scaleForPlus
cycleView
.pageIndicatorTintColor =
.green
view
.addSubview(cycleView)
return cycleView
}()
// 图片赋值
customPagetrolPositionnCycleView
.pictures = pictures
// pageControlStyle属性必须在设置 pictures 后赋值，因为指示器是根据 numberOfPages 计算Size的
customPagetrolPositionnCycleView
.pageControlStyle =
.bottom(bottom: -
20)
customPagetrolPositionnCycleView
.pageControlStyle =
.right(trailing:
30*scaleForPlus)
自定义Cell-纯代码和Xib创建都支持
lazy var customPictureCellCycleView: ICycleView = {
let cycleView = ICycleView(frame: CGRect(x:
0, y:
345, width: UIScreen.main.bounds.width, height:
130*scaleForPlus))
cycleView.register([UINib.init(nibName:
"CustomCycleViewCell", bundle: nil)], identifiers: [
"CustomCell"])
cycleView.delegate = self
view.addSubview(cycleView)
return cycleView
}()
customPictureCellCycleView.pictures = pictures
/**
- 协议方法都是可选方法，根据需要实现即可
*/
extension ViewController: ICycleViewDelegate {
func iCycleView(cycleView: ICycleView, didSelectItemAt index: Int) {
print(
"你点击了第 \(index) 张图片")
}
func iCycleView(cycleView: ICycleView, autoScrollingItemAt index: Int) {
print(
"当前滚动的图片是第 \(index) 张")
}
func iCycleView(cycleView: ICycleView, collectionView: UICollectionView, cellForItemAt indexPath: IndexPath, picture: String) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier:
"CustomCell",
for: indexPath) as! CustomCycleViewCell
cell.imgView.kf.setImage(
with: URL(string: picture))
cell.titleLab.text =
"自定义Cell\n第 \(indexPath.item) 张图片"
return cell
}
}
Implementation
实现原理
collectionView的cell显示两倍数量的图片，展示图片分为两组，默认显示第二组的第一张左滑collectionView到第二组最后一张，即最后一个cell时，设置scrollView的contentOffset显示第一组的最后一张，继续左滑，实现了无限左滑右滑collectionView到第一组第一张，即第一cell时，设置scrollView的contentOffset显示第二组的第一张，继续右滑，实现了无限右滑由2，3实现无限循环
主要代码
UICollectionView代理方法
extension ICycleView: UICollectionViewDataSource, UICollectionViewDelegate {
public func
collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return pictures.count *
2
}
public func
collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if isCustomCell {
return delegate?.iCycleView?(cycleView: self, collectionView: collectionView, cellForItemAt: IndexPath(item: indexPath.item % pictures.count, section:
0), picture: pictures[indexPath.item % pictures.count]) ?? UICollectionViewCell()
}
else {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ICycleViewConst.cellIdentifier,
for: indexPath)
as! ICycleViewCell
cell.configureCell(picture: pictures[indexPath.item % pictures.count], placeholderImage: placeholderImage, imgViewWidth: imgViewWidth)
return cell
}
}
public func
collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
delegate?.iCycleView?(cycleView: self, didSelectItemAt: indexPath.item % pictures.count)
}
}
循环轮播实现
extension ICycleView {
@objc private func
updateCollectionViewAutoScrolling() {
if let indexPath = collectionView.indexPathsForVisibleItems.last {
let nextPath = IndexPath(item: indexPath.item +
1, section: indexPath.section)
collectionView.scrollToItem(at: nextPath, at: .centeredHorizontally, animated:
true)
}
}
public func
scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
timer.fireDate = Date.distantFuture
}
public func
scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
timer.fireDate = Date(timeIntervalSinceNow: autoScrollDelay)
}
/**
- 监听手动减速完成(停止滚动)
- 1.collectionView的cell显示两倍数量的图片，展示图片分为两组，默认显示第二组的第一张
- 2.左滑collectionView到第二组最后一张，即最后一个cell时，设置scrollView的contentOffset显示第一组的最后一张，继续左滑，实现了无限左滑
- 3.右滑collectionView到第一组第一张，即第一cell时，设置scrollView的contentOffset显示第二组的第一张，继续右滑，实现了无限右滑
- 4.由2，3实现无限循环
*/
public func
scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let offsetX = scrollView.contentOffset.x
let page = Int(offsetX / bounds.size.width)
let itemsCount = collectionView.numberOfItems(inSection:
0)
if page ==
0 {
collectionView.contentOffset = CGPoint(x: offsetX + CGFloat(pictures.count) * bounds.size.width, y:
0)
}
else if page == itemsCount -
1 {
collectionView.contentOffset = CGPoint(x: offsetX - CGFloat(pictures.count) * bounds.size.width, y:
0)
}
}
public func
scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {
scrollViewDidEndDecelerating(collectionView)
}
/**
- 正在滚动
- 设置分页，算出滚动位置,更新指示器
*/
public func
scrollViewDidScroll(_ scrollView: UIScrollView) {
let offsetX = scrollView.contentOffset.x
var page = Int(offsetX / bounds.size.width+
0.5)
page = page % pictures.count
if pageControl.currentPage != page {
pageControl.currentPage = page
delegate?.iCycleView?(cycleView: self, autoScrollingItemAt: page)
}
}
}
QQ: 2256472253 Email: ixialuo@126.com
Github
下载Demo
