当前位置: > > > Swift - 图片循环轮播组件的实现(附样例)

Swift - 图片循环轮播组件的实现(附样例)

(本文代码已升级至Swift4)

图片的无限循环轮播功能常常用在广告或者新闻展示上面,本文演示如何实现一个 iOS 系统下的图片轮播组件。

1,组件功能介绍
(1)每隔一段时间,轮播器就会自动滚动到下一张图片。如果当前是最后一张图片的话,则又滚动回第一张图片。这样无限循环下去。
(2)在组件下方位置有页控制器(小圆点),显示图片数量和当前的位置。
(3)除了自动轮播,我们还可以通过手动滑动组件来显示上一张,下一张图片。手动控制滚动的时候自动轮播功能停止,手动滚动结束后自动轮播功能又自动启用。
(4)点击图片我们可以获取到当前图片的位置索引,便于我们后续操作。这里直接将索引值显示出来。
(5)点击“刷新数据”按钮后,组件会自动重新加载数据源数据,并刷新显示。

2,组件效果图
          

3,组件实现原理
(1)我们在一个 scrollerView 中横向放置三个并排的 imageView。管多少张图片都是交替使用这三个 imageView 来显示。
(2)每次图片滚动结束的时候,计算当前显示的图片索引值。并重置三个 imageView 里的图片和位置。
(3)由于图片可以通过网络加载,这里我用了一个第三方的图片库:ImageHelper。可以自动帮我们实现图片缓存,避免重复加载。(关于 ImageHelper,可以参考我之前写过的这篇文章:Swift - 图片处理库ImageHelper详解
(4)在图片未加载出来的时候,其位置上会先显示一张加载提示图片。这里我同样借助 ImageHelper,将一段提示文字转成 Image,用来作为加载完毕前的提示。

4,组件代码
整个组件只有一个 swift 文件(SliderGalleryController.swift),里面包含一个组件实现类:SliderGalleryController。以及相关协议:SliderGalleryControllerDelegate
import UIKit

//图片轮播组件代理协议
protocol SliderGalleryControllerDelegate{
    //获取数据源
    func galleryDataSource()->[String]
    //获取内部scrollerView的宽高尺寸
    func galleryScrollerViewSize()->CGSize
}

//图片轮播组件控制器
class SliderGalleryController: UIViewController,UIScrollViewDelegate{
    //代理对象
    var delegate : SliderGalleryControllerDelegate!
    
    //屏幕宽度
    let kScreenWidth = UIScreen.main.bounds.size.width
    
    //当前展示的图片索引
    var currentIndex : Int = 0
    
    //数据源
    var dataSource : [String]?
    
    //用于轮播的左中右三个image(不管几张图片都是这三个imageView交替使用)
    var leftImageView , middleImageView , rightImageView : UIImageView?
    
    //放置imageView的滚动视图
    var scrollerView : UIScrollView?
    
    //scrollView的宽和高
    var scrollerViewWidth : CGFloat?
    var scrollerViewHeight : CGFloat?
    
    //页控制器(小圆点)
    var pageControl : UIPageControl?
    
    //加载指示符(用来当iamgeView还没将图片显示出来时,显示的图片)
    var placeholderImage:UIImage!
    
    //自动滚动计时器
    var autoScrollTimer:Timer?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //获取并设置scrollerView尺寸
        let size : CGSize = self.delegate.galleryScrollerViewSize()
        self.scrollerViewWidth = size.width
        self.scrollerViewHeight = size.height
        
        //获取数据
        self.dataSource =  self.delegate.galleryDataSource()
        //设置scrollerView
        self.configureScrollerView()
        //设置加载指示图片
        self.configurePlaceholder()
        //设置imageView
        self.configureImageView()
        //设置页控制器
        self.configurePageController()
        //设置自动滚动计时器
        self.configureAutoScrollTimer()
        
        self.view.backgroundColor = UIColor.black
    }
    
    //设置scrollerView
    func configureScrollerView(){
        self.scrollerView = UIScrollView(frame: CGRect(x: 0,y: 0,
                                    width: self.scrollerViewWidth!,
                                    height: self.scrollerViewHeight!))
        self.scrollerView?.backgroundColor = UIColor.red
        self.scrollerView?.delegate = self
        self.scrollerView?.contentSize = CGSize(width: self.scrollerViewWidth! * 3,
                                                height: self.scrollerViewHeight!)
        //滚动视图内容区域向左偏移一个view的宽度
        self.scrollerView?.contentOffset = CGPoint(x: self.scrollerViewWidth!, y: 0)
        self.scrollerView?.isPagingEnabled = true
        self.scrollerView?.bounces = false
        self.view.addSubview(self.scrollerView!)
        
    }
    
    //设置加载指示图片
    func configurePlaceholder(){
        //这里我使用ImageHelper将文字转换成图片,作为加载指示符
        let font = UIFont.systemFont(ofSize: 17.0, weight: UIFont.Weight.medium)
        let size = CGSize(width: self.scrollerViewWidth!, height: self.scrollerViewHeight!)
        placeholderImage = UIImage(text: "图片加载中...", font:font,
                                   color:UIColor.white, size:size)!
    }
    
    //设置imageView
    func configureImageView(){
        self.leftImageView = UIImageView(frame: CGRect(x: 0, y: 0,
                                                       width: self.scrollerViewWidth!,
                                                       height: self.scrollerViewHeight!))
        self.middleImageView = UIImageView(frame: CGRect(x: self.scrollerViewWidth!, y: 0,
                                                         width: self.scrollerViewWidth!,
                                                         height: self.scrollerViewHeight! ))
        self.rightImageView = UIImageView(frame: CGRect(x: 2*self.scrollerViewWidth!, y: 0,
                                                        width: self.scrollerViewWidth!,
                                                        height: self.scrollerViewHeight!))
        self.scrollerView?.showsHorizontalScrollIndicator = false
        
        //设置初始时左中右三个imageView的图片(分别时数据源中最后一张,第一张,第二张图片)
        if(self.dataSource?.count != 0){
            resetImageViewSource()
        }
        
        self.scrollerView?.addSubview(self.leftImageView!)
        self.scrollerView?.addSubview(self.middleImageView!)
        self.scrollerView?.addSubview(self.rightImageView!)
    }
    
    //设置页控制器
    func configurePageController() {
        self.pageControl = UIPageControl(frame: CGRect(x: kScreenWidth/2-60,
                        y: self.scrollerViewHeight! - 20, width: 120, height: 20))
        self.pageControl?.numberOfPages = (self.dataSource?.count)!
        self.pageControl?.isUserInteractionEnabled = false
        self.view.addSubview(self.pageControl!)
    }
    
    //设置自动滚动计时器
    func configureAutoScrollTimer() {
        //设置一个定时器,每三秒钟滚动一次
        autoScrollTimer = Timer.scheduledTimer(timeInterval: 3, target: self,
                selector: #selector(SliderGalleryController.letItScroll),
                userInfo: nil, repeats: true)
    }
    
    //计时器时间一到,滚动一张图片
    @objc func letItScroll(){
        let offset = CGPoint(x: 2*scrollerViewWidth!, y: 0)
        self.scrollerView?.setContentOffset(offset, animated: true)
    }
    
    //每当滚动后重新设置各个imageView的图片
    func resetImageViewSource() {
        //当前显示的是第一张图片
        if self.currentIndex == 0 {
            self.leftImageView?.imageFromURL(self.dataSource!.last!,
                                             placeholder: placeholderImage)
            self.middleImageView?.imageFromURL(self.dataSource!.first!,
                                               placeholder: placeholderImage)
            let rightImageIndex = (self.dataSource?.count)!>1 ? 1 : 0 //保护
            self.rightImageView?.imageFromURL(self.dataSource![rightImageIndex],
                                              placeholder: placeholderImage)
        }
            //当前显示的是最好一张图片
        else if self.currentIndex == (self.dataSource?.count)! - 1 {
            self.leftImageView?.imageFromURL(self.dataSource![self.currentIndex-1],
                                             placeholder: placeholderImage)
            self.middleImageView?.imageFromURL(self.dataSource!.last!,
                                               placeholder: placeholderImage)
            self.rightImageView?.imageFromURL(self.dataSource!.first!,
                                              placeholder: placeholderImage)
        }
            //其他情况
        else{
            self.leftImageView?.imageFromURL(self.dataSource![self.currentIndex-1],
                                             placeholder: placeholderImage)
            self.middleImageView?.imageFromURL(self.dataSource![self.currentIndex],
                                               placeholder: placeholderImage)
            self.rightImageView?.imageFromURL(self.dataSource![self.currentIndex+1],
                                              placeholder: placeholderImage)
        }
    }
    
    //scrollView滚动完毕后触发
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        //获取当前偏移量
        let offset = scrollView.contentOffset.x
        
        if(self.dataSource?.count != 0){
            
            //如果向左滑动(显示下一张)
            if(offset >= self.scrollerViewWidth!*2){
                //还原偏移量
                scrollView.contentOffset = CGPoint(x: self.scrollerViewWidth!, y: 0)
                //视图索引+1
                self.currentIndex = self.currentIndex + 1
                
                if self.currentIndex == self.dataSource?.count {
                    self.currentIndex = 0
                }
            }
            
            //如果向右滑动(显示上一张)
            if(offset <= 0){
                //还原偏移量
                scrollView.contentOffset = CGPoint(x: self.scrollerViewWidth!, y: 0)
                //视图索引-1
                self.currentIndex = self.currentIndex - 1
                
                if self.currentIndex == -1 {
                    self.currentIndex = (self.dataSource?.count)! - 1
                }
            }
            
            //重新设置各个imageView的图片
            resetImageViewSource()
            //设置页控制器当前页码
            self.pageControl?.currentPage = self.currentIndex
        }
    }
    
    //手动拖拽滚动开始
    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        //使自动滚动计时器失效(防止用户手动移动图片的时候这边也在自动滚动)
        autoScrollTimer?.invalidate()
    }
    
    //手动拖拽滚动结束
    func scrollViewDidEndDragging(_ scrollView: UIScrollView,
                                  willDecelerate decelerate: Bool) {
        //重新启动自动滚动计时器
        configureAutoScrollTimer()
    }
    
    //重新加载数据
    func reloadData() {
        //索引重置
        self.currentIndex = 0
        //重新获取数据
        self.dataSource =  self.delegate.galleryDataSource()
        //页控制器更新
        self.pageControl?.numberOfPages = (self.dataSource?.count)!
        self.pageControl?.currentPage = 0
        //重新设置各个imageView的图片
        resetImageViewSource()
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

5,使用样例
import UIKit

class ViewController: UIViewController, SliderGalleryControllerDelegate {
    
    //获取屏幕宽度
    let screenWidth =  UIScreen.main.bounds.size.width
    
    //图片轮播组件
    var sliderGallery : SliderGalleryController!
    
    //图片集合
    var images = ["http://img4q.duitang.com/uploads/item/201503/18/20150318230437_Pxnk3.jpeg",
                  "http://img4.duitang.com/uploads/item/201501/31/20150131234424_WRJGa.jpeg",
                  "http://img5.duitang.com/uploads/item/201502/11/20150211095858_nmRV8.jpeg",
                  "http://cdnq.duitang.com/uploads/item/201506/11/20150611213132_HPecm.jpeg"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //初始化图片轮播组件
        sliderGallery = SliderGalleryController()
        sliderGallery.delegate = self
        sliderGallery.view.frame = CGRect(x: 10, y: 40, width: screenWidth-20,
                                          height: (screenWidth-20)/4*3);
        
        //将图片轮播组件添加到当前视图
        self.addChildViewController(sliderGallery)
        self.view.addSubview(sliderGallery.view)
        
        //添加组件的点击事件
        let tap = UITapGestureRecognizer(target: self,
                                         action: #selector(ViewController.handleTapAction(_:)))
        sliderGallery.view.addGestureRecognizer(tap)
    }
    
    //图片轮播组件协议方法:获取内部scrollView尺寸
    func galleryScrollerViewSize() -> CGSize {
        return CGSize(width: screenWidth-20, height: (screenWidth-20)/4*3)
    }
    
    //图片轮播组件协议方法:获取数据集合
    func galleryDataSource() -> [String] {
        return images
    }
    
    //点击事件响应
    @objc func handleTapAction(_ tap:UITapGestureRecognizer)->Void{
        //获取图片索引值
        let index = sliderGallery.currentIndex
        //弹出索引信息
        let alertController = UIAlertController(title: "您点击的图片索引是:",
                                                message: "\(index)", preferredStyle: .alert)
        let cancelAction = UIAlertAction(title: "确定", style: .cancel, handler: nil)
        alertController.addAction(cancelAction)
        self.present(alertController, animated: true, completion: nil)
    }
    
    //“刷新数据”按钮点击
    @IBAction func reloadBtnTap(_ sender: AnyObject) {
        images = ["http://img3.duitang.com/uploads/item/201607/15/20160715160527_rSBfF.jpeg",
                  "http://d1.17xgame.com/d/wallpaper/2013/01/17/52549.jpg",
                  "http://p4.image.hiapk.com/uploads/allimg/140805/7730-140P5115S4.jpg"]
        sliderGallery.reloadData()
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}
源码下载hangge_1314.zip
评论10
  • 10楼
    2018-01-09 16:07

    航歌你好,我有两个问题想请教一下
    1、不懂为什么在132、176行等处这个宽度要*2, self.scrollerViewWidth!*2
    2、为何我把scrollViewDidScroll中的内容放在scrollViewDidEndDecelerating中不可以呢

    ps:航哥的支付宝说“商户未签约或合约过期”

    站长回复

    问题1:你仔细研究下我的代码可以发现,这个组件不是有多少图片就创建多少个imageView。而是固定3个imageView重复使用。初始化的时候我会将中间那个imageView移动到视图中央,即偏移量是scrollerViewWidth(代码77行)。这样的话如果需要再移动imageView,偏移量自然变成了2*scrollerViewWidth


    问题2:scrollViewDidScroll是任何方式触发contentOffset变化的时候都会调用。而scrollViewDidEndDecelerating只有用户拖动的情况才会调用。

    (支付宝二维码过期了,我又更新了下。谢谢你的提醒)

  • 9楼
    2017-10-26 11:02
    幸福的小木子

    请问一下那个reloadData没有哪个函数调用它,但是少了他又会出错呢,能给我详细解释一下嘛,就这块看不懂,谢谢

    站长回复

    外面那个“刷新数据”按钮点击后就会调用的。

  • 8楼
    2017-09-22 08:47
    eric

    赞,谢谢分享

    站长回复

    不客气 :)

  • 7楼
    2017-06-17 13:45
    小菜鸟

    航哥非常感谢你

    站长回复

    不可气,我也很高兴能帮助到你。

  • 6楼
    2017-03-20 16:40
    欧阳叶梦

    站长你好 轮播运行的起始时候 占位和第一张图片初次显示都是不完整的 第一张图上会有一条红色的背景 图片未占全 第二张图片就自动放大填充满了 请问这是为什么啊?谢谢

    站长回复

    我又测试了下我上传的那个工程项目是没问题的啊?不清楚你那边是什么情况。

  • 5楼
    2017-01-04 16:00
    John

    谢谢航哥,以后会常来的

    站长回复

    不客气。

  • 4楼
    2017-01-01 19:37
    John

    非常感谢航哥,真的是国内开发网站的良心,希望越来越好,并且以后多发点实用的航哥,对涉及点真实app的功能,非常感谢

    站长回复

    谢谢你的支持和鼓励。我会持续更新下去,所以涉及各方面的文章都会有的,欢迎常来看看看。

  • 3楼
    2016-12-31 19:53
    Y

    嗯,没有问题,我自己有句代码写错了,谢谢站长了

    站长回复

    不客气,没问题就好。

  • 2楼
    2016-12-29 16:00
    John

    航哥 可不可以在这个基础上做一个刷新的方法呢

    站长回复

    可以的。代码已更新,你可以再看下。

  • 1楼
    2016-12-19 21:25
    Y

    发现个BUG,我照着你这段代码写好,发现只能往右翻正常,往左就只能翻一页,而且小点不跟着动

    站长回复

    我测试了下,左右翻动都是没问题的啊?