Swift图片轮播

前言

现在网上优秀的图片轮播三方已经不少，之所以想起来自己写一个，原因有两个：一是网上很多三方控制不支持横竖屏适配；二是因为优秀的三方之所以优秀是因为其功能强大、性能好，但是体量也会大，而实际开发中有时我们只需要简单的轮播展示就可以。所以就想着捣鼓着写一个简单的支持横竖屏适配的轮播器。

图片轮播示例图.gif

基本思路：很简单，基于UICollectionView实现，整个轮播器只有一个自定义UIView和自定义UICollectionViewCell组成。这里说说为什么利用UICollectionViewCell来实现轮播，首先UICollectionViewCell是继承自UIScrollView，本身支持水平、垂直方向滑动、分页等功能，创建多少个滑动视图可以直接通过其数据源设置，以及点击轮播视图触发事件可以通过其代理方法直接处理等，方便的地方还是挺多的；最后是因为UICollectionView和UITableView一样它会对单元格重用，充分利用苹果自身的重用机制，这样在内存上当然是友好的。

体量就这么点，代码加起来不到300行

JYCarouselView.png

基本用法

提供实例化对象类方法

     pictureDataSource: 图片数据源，如果是网络图片传入图片url数组，如果是本地图片则传入图片名称数组
     clickCellClosure: 点击单元格回调
     */
    class func carouselView(pictureDataSource: [String], clickCellClosure: ((_ index: Int) -> ())?) -> (JYCarouselView?)

基本使用

class localCarouselViewController: UIViewController {
    
    fileprivate var carousalView: JYCarouselView?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = UIColor.gray
        
        // 如果当前控制器有导航，应该设置automaticallyAdjustsScrollViewInsets为false否则UICollectonView的layout会有问题
        automaticallyAdjustsScrollViewInsets = false
        
        /******************** 基本用法 ********************/
        carousalView = JYCarouselView.carouselView(pictureDataSource: pictureDataSource, clickCellClosure: { (index) in
            print("点击了第\(index)张图片")
        })
        // 可以自定义设置，不设置即显示默认样式
        carousalView?.myPageView.currentPageIndicatorTintColor = UIColor.red
        carousalView?.myPageView.pageIndicatorTintColor = UIColor.black
        view.addSubview(carousalView!)
        /******************** 基本用法 ********************/
    }
    
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        
      // 设置frame，当然可以使用AutoLayout布局，这里懒省事直接设置frame了
        carousalView?.frame = CGRect(x: 20, y: 100, width: view.bounds.width - 40, height: view.bounds.height - 200)
    }
}

实现原理

自定义xib.png

所有属性

class JYCarouselView: UIView {
    @IBOutlet fileprivate weak var myCollectionView: UICollectionView!
    @IBOutlet fileprivate weak var myCollectionViewFlowLayout: UICollectionViewFlowLayout!
    
    /// myPageView(对外开放，以方便根据需求修改myPageView样式)
    @IBOutlet weak var myPageView: UIPageControl!
    
    /// 点击单元格回调
    fileprivate var clickCellClosure: ((_ index: Int) -> ())?
    /// 图片数据源
    fileprivate var pictureDataSource: [String] = []
    /// 记录myCollectionView当前cell的indexPathRow
    fileprivate var indexPathRow: Int = 0
    
    /// 计时器
    fileprivate weak var myTimer: Timer?

实例化方法

    /**
     实例化对象类方法
     pictureDataSource: 图片数据源，如果是网络图片传入图片url数组，如果是本地图片则传入图片名称数组
     clickCellClosure: 点击单元格回调
     */
    class func carouselView(pictureDataSource: [String], clickCellClosure: ((_ index: Int) -> ())?) -> (JYCarouselView?) {
        let view = Bundle.main.loadNibNamed("JYCarouselView", owner: nil, options: nil)?.first as! JYCarouselView
        
        view.pictureDataSource = pictureDataSource
        if pictureDataSource.count > 1 {
            // 开始滚动
            view.startTimer()
        }
        
        view.clickCellClosure = clickCellClosure
        
        view.myPageView.numberOfPages = pictureDataSource.count
        
        return view
    }

设置数据源

// MARK: - UICollectionViewDataSource
extension JYCarouselView: UICollectionViewDataSource {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return pictureDataSource.count * 2
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell: JYCarouselViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: JYCarouselViewCellId, for: indexPath) as! JYCarouselViewCell
        // 注意：由于numberOfItems 是 pictureDataSource.count * 2，所以获取单元格对应的数据源时应该用 indexPath.row % pictureDataSource.count
        let pictureIndex = indexPath.row % pictureDataSource.count
        cell.imageString = pictureDataSource[pictureIndex]
        return cell
    }
}

数据源这里需要说明：

说明一：
numberOfItemsInSection这个函数中return的是图片源数组count的两倍。例：我们需要轮播的图片有3张，这里就要返回6，也就是说我们需要6个单元格，至于问什么，后面解释

例1.png

说明二：cellForItemAt这个函数中，给cell赋值时获取单元格对应的数据源时不能直接用 indexPath.row做索引去图片源数组(pictureDataSource)中取图片。还是以上面例子说明，三张图片、6个cell，如果滑到第四个cell，此时 indexPath.row 等于 3，去图片源数组(pictureDataSource)去找索引3的元素势必造成数组越界导致崩溃，这把indexPath.row模上图片源数组(pictureDataSource)的count(3)，便能匹配上对应的图片索引了（自己琢磨下是不是呢^v）。

重点在这里，注意看啊

// MARK: - UIScrollViewDelegate
extension JYCarouselView: UIScrollViewDelegate {
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        // 当前cell索引(第几个单元格)
        indexPathRow = Int(myCollectionView.contentOffset.x / myCollectionView.bounds.width)
        
        if indexPathRow == 0 {// 滚到第一个单元格
            indexPathRow = pictureDataSource.count
            myCollectionView.scrollToItem(at: IndexPath(item: indexPathRow, section: 0), at: .centeredHorizontally, animated: false)
            
        }else if indexPathRow == (pictureDataSource.count * 2 - 1) {// 滚到最后一个单元格
            indexPathRow = pictureDataSource.count - 1
            myCollectionView.scrollToItem(at: IndexPath(item: indexPathRow, section: 0), at: .centeredHorizontally, animated: false)
        }
        
        // 开启计时器
        startTimer()
    }
}

直接上图解释

例1.3.png

例1.2.png

刚好也解释了前面说的为什么3张图片，却要返回两倍图片数的单元格数。
基本思路是这样，当然有不足的欢迎各位指正。
Demo地址