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"的位置,如下图:

QQ20170820-2@2x.png

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

QQ20170820-1@2x.png

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

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一下。
文辞粗浅,对于代码中可能存在的问题,欢迎大家指出,共同学习进步。

推荐阅读更多精彩内容