iOS 最新Swift+UICollectionView实现图片无限轮播器

Bg:
图片轮播器数不胜数，但大多是UIScrollView + OC实现的，心血来潮，决定用Swift+UICollectionView造个轮子玩玩HHScrollView:https://github.com/wanghhh/HHScrollView#hhscrollview。
先看下效果图：

Untitled.gif

功能实现：

1、Swift+UICollectionView实现自动无限轮播，可手动拖动
2、页码显示，可以自定义页码指示器位置、颜色
3、轮播间隔时间等属性设置

轮播器调用方法：
下载demo,直接将HHScrollView.swift文件拖进自己项目即可。
然后在控制器的viewDidLoad() 中实例化：

    //准备图片数据，就是图片url字符串
    imageDataSource = loadImages()
    
    //提供两种实例化方法：
    //1.通过frame和imageUrls
    //let scrollView = HHScrollView.init(frame: CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 200), imageUrls: imageDataSource)
    
    //2.通过frame，后根据网络数据设置imgUrls
    let scrollView = HHScrollView.init(frame: CGRect.init(x: 0, y: 64, width: UIScreen.main.bounds.width, height: 200))
    //设置数据源（图片urlStr）******
    //加载本地图片
    //scrollView.isFromNet = false
    //scrollView.imgUrls = ["ic_banner01","ic_banner02","ic_banner03"]
    //默认加载网络图片
    scrollView.imgUrls = imageDataSource
    //设置代理，根据需要要不要监听图片点击
    scrollView.hhScrollViewDelegae = self

HHScrollView提供的属性：

    //代理
    weak var hhScrollViewDelegae:HHScrollViewDelegate?
    //分页指示器页码颜色
    var pageControlColor:UIColor?
    //分页指示器当前页颜色
    var currentPageControlColor:UIColor?
    //分页指示器位置
    var pageControlPoint:CGPoint?
    //分页指示器
    fileprivate var pageControl:UIPageControl?
   //自动滚动时间默认为3.0
   var autoScrollDelay:TimeInterval = 3 {
    didSet{
        removeTimer()
        setUpTimer()
    }
   } 
   //图片是否来自网络,默认是
   var isFromNet:Bool = true
   //占位图
   var placeholderImage:String = "ic_place"
   //设置图片资源url字符串。
   var imgUrls = NSArray(){
      didSet{
          pageControl?.numberOfPages = imgUrls.count
          itemCount = imgUrls.count
          self.reloadData()
      }  
   }
   fileprivate var itemCount:NSInteger = 0//cellNum
   fileprivate var timer:Timer?//定时器

可以通过以上属性和自身项目需要自定义轮播器的样式、滚动时间间隔等，这些基本属性都有默认值。

HHScrollView提供的便利构造器：

//便利构造方法
convenience init(frame:CGRect) {
    self.init(frame: frame, collectionViewLayout: HHCollectionViewFlowLayout.init())
}

convenience init(frame:CGRect,imageUrls:NSArray) {
    self.init(frame: frame, collectionViewLayout: HHCollectionViewFlowLayout.init())
     imgUrls = imageUrls
}

基本原理：

充分利用UICollectionView的cell的复用机制，不用自己再去考虑imageView的复用问题，节省内存，有利于性能提升。

先说下大致思路：

我们知道UICollectionView继承自UIScrollView，也就是说UIScrollView的基本属性方法UICollectionView都有，那么UICollectionView也可以分页显示。将item（UITableView对应的cell）的宽和高分别设置成UICollectionView自身的宽和高，数据源返回的item个数就是参与图片的图片个数，那么问题就在于当滚动到最后一张或第一张图片的时候，怎么继续滚动呢？

为了解决这个问题，我们可以通过扩大item的个数的方法解决它，无限轮播的关键就在于此：

1.将数据源方法返回的item个数设置未imgUrls.count（imgUrls是网络图片url或本地图片的数组）的2倍，在collectionView加载完成后默认滚动到索引为imgUrls.count的位置，这样cell就可以向左或右滚动了。

例如：我们想加载3张图片，那么collectionView：初始位置应该在"图片1-2"的位置，如下图：

iOS 最新Swift+UICollectionView实现图片无限轮播器_第1张图片

[email protected]

2.当collectionView滚动到最后一张的时候，即滚到"图片3-2"的位置时，让collectionView回到"图片3-1"的位置，这样就可以继续向右滚动了。同理，当collectionView滚动到第一张的时候，即滚到"图片1-1"的位置时，让collectionView回到"图片1-2"的位置，这样就可以继续向左滚动了。如下图：

iOS 最新Swift+UICollectionView实现图片无限轮播器_第2张图片

[email protected]

以上就是无限轮播的基本实现原理了。
关键代码：

1.collectionView初始位置设置：

    //在collectionView加载完成后默认滚动到索引为imgUrls.count的位置，这样cell就可以向左或右滚动
    DispatchQueue.main.async {
        //注意：在轮播器视图添加到控制器的view上以后，这样是为了将分页指示器添加到self.superview上(如果将分页指示器直接添加到collectionView上的话，指示器将不能正常显示)
        self.setUpPageControl()
        let indexpath = NSIndexPath.init(row: self.imgUrls.count, section: 0)
        //滚动位置
        self.scrollToItem(at: indexpath as IndexPath, at: .left, animated: false)
    }

此段代码写在collectionView的init(frame: CGRect, collectionViewLayout layout: UICollectionViewLayout)方法中，关键在于要等到在collectionView加载完成以后，再去改变滚动的位置，这里利用DispatchQueue.main.async异步实现。本质就是利用主队列调度任务的阻塞特性实现，因为主队列只会在主线程"闲暇"的时候才去执行别的任务，这里"闲暇"就是指collectionView加载完成以后。
2.UIPageControl的加载时机和方式

要想将页码显示器封装到轮播器中，而不是在使用轮播器的控制器中创建和加载，做到更好的封装，也将setUpPageControl的创建页码器的代码放在init()方法的主队列异步方法中去，在上面代码中可以看到self.setUpPageControl()。创建代码如下：

@objc private func setUpPageControl(){
    pageControl = UIPageControl.init()
    pageControl?.frame = (pageControlPoint != nil) ? CGRect.init(x: (pageControlPoint?.x)!, y: (pageControlPoint?.y)!, width: self.bounds.size.width - (pageControlPoint?.x)!, height: 8) : CGRect.init(x: 0, y: self.frame.maxY - 16, width: self.bounds.size.width, height: 8)
    pageControl?.pageIndicatorTintColor = pageControlColor ?? UIColor.lightGray
    pageControl?.currentPageIndicatorTintColor = currentPageControlColor ?? UIColor.orange
    pageControl?.numberOfPages = imgUrls.count
    pageControl?.currentPage = 0

    //一定要将指示器添加到superview上
    self.superview?.addSubview(pageControl!)
}

另外发现将UIPageControl直接add到collectionView上时不能正常显示，这个问题还没有研究，有知道的大神可以告诉我哈O(∩_∩)O~~，这里解决方法是，add到collectionView的superview上，在init的方法中要想获取到collectionView的superview，只能等到collectionView加载完成也就是添加到控制器的view上以后。这也是将创建方法放在DispatchQueue.main.async{}方法中的原因。也就做到了等collectionView被添加到控制器的view上以后才去创建pageControl。

3.手动无限滚动实现：在于拖动时，collectionView滚动位置的控制，在scrollView滚动减速的代理方法中：

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    //当前的索引
    var offset:NSInteger = NSInteger(scrollView.contentOffset.x / scrollView.bounds.size.width)
    
    //第0页时，跳到索引imgUrls.count位置；最后一页时，跳到索引imgUrls.count-1位置
    if offset == 0 || offset == (self.numberOfItems(inSection: 0) - 1) {
        if offset == 0 {
            offset = imgUrls.count
        }else {
            offset = imgUrls.count - 1
        }
    }
    scrollView.contentOffset = CGPoint.init(x: CGFloat(offset) * scrollView.bounds.size.width, y: 0)
}

关键点就是上面原理中说的改变contentOffset或者滚动位置：第0页时，跳到索引imgUrls.count位置；最后一页时，跳到索引imgUrls.count-1位置

4.自动轮播实现：

首先，在init()调用创建定时器，去触发自动滚动方法：

@objc private func setUpTimer(){
    timer = Timer.init(timeInterval: autoScrollDelay, target: self, selector: #selector(autoScroll), userInfo: nil, repeats: true)
    RunLoop.current.add(timer!, forMode: .commonModes)
}

自动滚动方法autoScroll的实现：

    //当前的索引
    var offset:NSInteger = NSInteger(self.contentOffset.x / self.bounds.size.width)
    
    //第0页时，跳到索引imgUrls.count位置；最后一页时，跳到索引imgUrls.count-1位置
    if offset == 0 || offset == (itemCount - 1) {
        if offset == 0 {
            offset = imgUrls.count
        }else {
            offset = imgUrls.count - 1
        }
        
        self.contentOffset = CGPoint.init(x: CGFloat(offset) * self.bounds.size.width, y: 0)
        //再滚到下一页
        self.setContentOffset(CGPoint.init(x: CGFloat(offset + 1) * self.bounds.size.width, y: 0), animated: true)
    }else{
        //直接滚到下一页
        self.setContentOffset(CGPoint.init(x: CGFloat(offset + 1) * self.bounds.size.width, y: 0), animated: true)
    }

此方法关键点在于：当滚动到第0页和最后一页时要做特殊处理，比如当滚到最后一页时，要先把contentOffset设置为imgUrls.count-1位置，然后再动画改变contentOffset到imgUrls.count位置，这样就实现了视觉上的平滑滚动效果了。

5.定时器的添加与移除控制：
//拖动停止时添加定时器

func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    setUpTimer()
}

//将要拖动时移除

  func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
    removeTimer()
}

//添加定时器

@objc private func setUpTimer(){
    timer = Timer.init(timeInterval: autoScrollDelay, target: self, selector: #selector(autoScroll), userInfo: nil, repeats: true)
    RunLoop.current.add(timer!, forMode: .commonModes)
}

//移除定时器

@objc private func removeTimer(){
    if (timer != nil) {
        timer?.invalidate()
        timer = nil
    }
}

//轮播器销毁时也要移除

deinit {
    removeTimer()
}

6.自定义CollectionViewFlowLayout

class HHCollectionViewFlowLayout:UICollectionViewFlowLayout{
//prepare方法在collectionView第一次布局的时候被调用
override func prepare() {
    super.prepare()//必须写
    collectionView?.backgroundColor = UIColor.white
    // 通过collectionView 的属性布局cell
    self.itemSize = (self.collectionView?.bounds.size)!
    self.minimumInteritemSpacing = 0 //cell之间最小间距
    self.minimumLineSpacing = 0 //最小行间距
    self.scrollDirection = .horizontal;
    
    self.collectionView?.bounces = false //禁用弹簧效果
    self.collectionView?.isPagingEnabled = true //分页
    self.collectionView?.showsHorizontalScrollIndicator = false
    self.collectionView?.showsVerticalScrollIndicator = false
}}

7.自定义HHCollectionViewCell：

  class HHCollectionViewCell:UICollectionViewCell {

var imageView:UIImageView?
override init(frame: CGRect) {
    super.init(frame: frame)
    self.clipsToBounds = true
    imageView = UIImageView.init(frame: self.bounds)
    imageView?.contentMode = .scaleAspectFill
    contentView.addSubview(imageView!)
}
required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}}

8.HHScrollView的代理方法：
@objc protocol HHScrollViewDelegate:NSObjectProtocol {
//点击代理方法
@objc optional func hhScrollView(_ scrollView: HHScrollView, didSelectRowAt index: NSInteger)
}
通过代理可以监听被点击的图片的索引。

好了，到此Swift+UICollectionView实现图片无限轮播器主要过程介绍完了，详细代码请查看demo：下载地址:https://github.com/wanghhh/HHScrollView#hhscrollview。demo中下载图片用了SDWebImage,运行前请cocoaPods install一下。
文辞粗浅，对于代码中可能存在的问题，欢迎大家指出，共同学习进步。

iOS 最新Swift+UICollectionView实现图片无限轮播器

你可能感兴趣的:(iOS 最新Swift+UICollectionView实现图片无限轮播器)