ICycleView

ICycleView是一个基于UICollectionView实现的轻量级无限轮播图

Content

• [Features]()
• [Requirements]()
• [CocoaPods]()

• [Usage]()

  • [默认滚动视图]()
  • [自定义图片宽度和指示器的位置和颜色]()
  • [自定义Cell-纯代码和Xib创建都支持]()

• [Implementation]()

  • [实现原理]()

  • [主要代码]()

    • [UICollectionView代理方法]()
    • [循环轮播实现]()
• [Contact]()
• [Github]()

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 // 代理方法 /** - 协议方法都是可选方法，根据需要实现即可 */ // MARK: ICycleViewDelegate extension ViewController: ICycleViewDelegate { // 图片点击 func iCycleView(cycleView: ICycleView, didSelectItemAt index: Int) { print("你点击了第 \(index) 张图片") } // 图片自动滚动 func iCycleView(cycleView: ICycleView, autoScrollingItemAt index: Int) { print("当前滚动的图片是第 \(index) 张") } // 自定义Cell 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

实现原理

1. collectionView的cell显示两倍数量的图片，展示图片分为两组，默认显示第二组的第一张
2. 左滑collectionView到第二组最后一张，即最后一个cell时，设置scrollView的contentOffset显示第一组的最后一张，继续左滑，实现了无限左滑
3. 右滑collectionView到第一组第一张，即第一cell时，设置scrollView的contentOffset显示第二组的第一张，继续右滑，实现了无限右滑
4. 由2，3实现无限循环

主要代码

UICollectionView代理方法

// MARK: - UICollectionViewDataSource, UICollectionViewDelegate 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 { // 自定义Cell return delegate?.iCycleView?(cycleView: self, collectionView: collectionView, cellForItemAt: IndexPath(item: indexPath.item % pictures.count, section: 0), picture: pictures[indexPath.item % pictures.count]) ?? UICollectionViewCell() } else { // 默认Cell 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) } }

循环轮播实现

// MARK: - 循环轮播实现 extension ICycleView { // 定时器方法，更新Cell位置 @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) } } }

Contact

QQ: 2256472253
Email: ixialuo@126.com

Github

下载Demo