Swift-图片轮播器（无限循环）

图片轮播器算是一个比较常见的控件，之前用UIScrollView写过一个，但是并不能无限循环滚动，从最后一张图片滑到第一张的动画效果十分难看。昨天测试人员说我这个滑动方向不对，趁这个机会重新写一个吧。

实现思路

• 依然是用到UIScrollView，不同的是这次运用重用的思想，因为不管我们有多少张图片要轮播，在UIScrollView上我们可以同时看到的始终只有两个UIImageView。换言之，只需要两个UIImageView即可实现。
• 在UIScrollView上的中心位置添加一个UIImageView，UIScrollView的contentOffset也设置成看到中间的UIImageView的位置，每次滚动时判断滚动的方向，在相应的位置展示另一个UIImageView。
• 在滚动结束时重新将UIScrollView的contentOffset设置为中心位置。

画图帮助理解一下：

蓝色代表UIScrollView，灰色框内是我们在UIScrollView上所看见的一切。首先我们按图中的Frame初始化控件。

当前UIImageView向左移动，将另外一个UIImageView的位置设置到当前UIImageView的右边。

当前UIImageView向右移动，将另外一个UIImageView的位置设置到当前UIImageView的左边。

代码

• 先看看需要用到哪些属性：

//自定义JHCarouseView类，继承自UIView，遵守UIScrollViewDelegate协议
class JHCarouseView: UIView,UIScrollViewDelegate {
   
   override init(frame: CGRect) {
        super.init(frame: frame)
        addSubview(scrollView)
        scrollView.addSubview(currentImageView)
        scrollView.addSubview(otherImageView)
        addSubview(pageControl)
        startTimer()
    }
    private var timer:NSTimer? //定时器-定时滚动图片

    private lazy var scrollView:UIScrollView = { 
         let scrollView = UIScrollView.init(frame: CGRectMake(0, 0, self.bounds.width, self.bounds.height))
        //可滑动宽度为自身的3倍
        scrollView.contentSize = CGSizeMake(self.bounds.width*3, 0)
        //可视位置为中心位置
        scrollView.contentOffset = CGPointMake(self.bounds.width, 0)
        scrollView.pagingEnabled = true
        scrollView.showsHorizontalScrollIndicator = false
        scrollView.delegate = self
        return scrollView
    }()
    //当前可见的ImageView
    private lazy var currentImageView:UIImageView = {
        let currentImageView = UIImageView.init(frame: CGRectMake(self.bounds.width, 0, self.bounds.width, self.bounds.height))
        currentImageView.image = self.imageArray[0]
        return currentImageView
    }()
    //另一个ImageView的位置暂时不确定
    private lazy var otherImageView = UIImageView()
    //pageControl
    private lazy var pageControl:UIPageControl = {
        let pageControl = UIPageControl.init(frame: CGRectMake(self.bounds.width/2-30, CGRectGetMaxY(self.scrollView.frame), 60, 15))
        pageControl.numberOfPages = self.imageArray.count
        pageControl.pageIndicatorTintColor = UIColor.grayColor()
        pageControl.currentPageIndicatorTintColor = UIColor.whiteColor()
        return pageControl
    }()
     //轮播图片
    private let imageArray = [UIImage.init(named: "helper_1"),UIImage.init(named: "helper_2")]

    //定义一个方向枚举，用来判别ScrollView滑动方向
    enum Direction {
        case None
        case Left
        case Right
    }
    
    private var currentIndex = 0 //当前图片下标
    private var nextIndex = 0 //滚动时应该显示的图片的下标
    private var direction:Direction? {
        didSet {//监听方向属性，在scrollViewDidScroll方法中赋值，请留意。
            if direction == .Right {
                otherImageView.frame = CGRectMake(0, 0, self.scrollView.bounds.size.width, self.scrollView.bounds.size.height)
                self.nextIndex = self.currentIndex - 1
                if self.nextIndex < 0 {
                    //循环显示，第一张到最后一张
                    self.nextIndex = imageArray.count - 1
                }
            } else if direction == .Left {
                self.otherImageView.frame = CGRectMake(currentImageView.frame.maxX, 0, self.scrollView.bounds.size.width, self.scrollView.bounds.size.height)
                self.nextIndex = (self.currentIndex + 1)%imageArray.count
            }
            //计算完index，记得给另外一个imageView.image赋值
            self.otherImageView.image = self.imageArray[self.nextIndex]
            pageControl.currentPage = currentIndex
        }
    }
}

• delegate方法部分：

    //计算imageView移动的方向，给direction变量赋值，会自动调用didSet包含的代码
    func scrollViewDidScroll(scrollView: UIScrollView) {
        direction = scrollView.contentOffset.x > SCREEN_WIDTH-30 ? .Left : .Right //imageView移动的方向
    }
    //滑动快停止的时候，作一些处理
    func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
        scrollDidStop()
    }
    
    private func scrollDidStop() {
        self.direction = .None //清空方向
        let index = scrollView.contentOffset.x/scrollView.bounds.size.width
        if index == 1 { //说明滑动前与滑动后contentOffset并无变化，return
            return
        }
        //将otherImageView设置成currentImageView，回到一开始的状态：位于UIScrollView中间的是currentImageView
        currentImageView.frame = CGRectMake(scrollView.bounds.size.width, 0, scrollView.bounds.size.width, scrollView.bounds.size.height)
        self.currentIndex = self.nextIndex
        currentImageView.image = self.otherImageView.image
        scrollView.contentOffset = CGPointMake(scrollView.bounds.size.width, 0)
    }

• 定时滚动部分：

    //启动定时器
    func startTimer() {
        if imageArray.count == 1 {
            return
        }
        if timer != nil {//重置定时器
            timer!.invalidate()
            timer = nil
        }
        timer = NSTimer.init(timeInterval: 2, target: self, selector: #selector(self.nextPage), userInfo: nil, repeats: true)
        NSRunLoop.currentRunLoop().addTimer(timer!, forMode: NSRunLoopCommonModes)
    }
    
    func nextPage () {
        scrollView.setContentOffset(CGPointMake(scrollView.bounds.width*2, 0), animated: true)
        //调用完setContentOffset方法系统自动调用 scrollViewDidEndScrollingAnimation方法
    }
    
    func scrollViewDidEndScrollingAnimation(scrollView: UIScrollView) {
        scrollDidStop() //滑动结束后作处理
    }
    
    func scrollViewWillBeginDragging(scrollView: UIScrollView) {
        timer?.invalidate() //用户拖动时停止定时器
    }
    
    func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        startTimer()//松开后再次启动定时器
    }

以上。