使用一个UIImageView实现轮播控件

在做iOS开发中，图片轮播是一个比较频繁的需求了。网上也有很多比较好的实现，有使用2个、3个UIImageView的，也有使用UICollectionView的。这里我要讲的是如何用一个UIImageView实现一个图片轮播控件，当然加载网络图片是必须的。闲话少说，直接进入正题：

构建UI

在轮播控件中只需要一个UIImageView和一个UIPageControl即可：

  lazy var imageView: UIImageView = {
      let imageV = UIImageView()
      imageV.userInteractionEnabled = true
      imageV.translatesAutoresizingMaskIntoConstraints = false
      return imageV
  }()
  
  lazy var pageControl: UIPageControl = {
      let pageC = UIPageControl()
      pageC.currentPage = 0
      pageC.translatesAutoresizingMaskIntoConstraints = false
      return pageC
   }()

添加好约束即可。然后需要给图片添加一个左划和右划手势，以及一个点击的手势

    private func addGesture() {
        let left = UISwipeGestureRecognizer(target: self, action: #selector(self.swipGesterHandelr(_:)))
        left.direction = .Left
        self.imageView.addGestureRecognizer(left)
        
        let right = UISwipeGestureRecognizer(target: self, action: #selector(self.swipGesterHandelr(_:)))
        right.direction = .Right
        self.imageView.addGestureRecognizer(right)
        
        let tap = UITapGestureRecognizer(target: self, action: #selector(self.tapGesterHandelr(_:)))
        self.imageView.addGestureRecognizer(tap)
    }

创建并启动定时器

既然是轮播，那么就必须得有一个定时器吧，当你使用定时器的时候，就一定要注意定时器的销毁。当进入界面时就要启动定时器，当离开界面时就要销毁定时器。我以前使用过别人写的轮播控件，当我已经离开界面进入下一个界面时，定时器竟然还在运行，这样是不对的。其实实现起来很简单：

    public override func willMoveToWindow(newWindow: UIWindow?) {
        super.willMoveToWindow(newWindow)
        
        guard let _ = newWindow else {
            stopTimer()
            return
        }
        refreshTimer()
    }

    private func stopTimer() {
        timer?.invalidate()
        timer = nil
    }

    private func refreshTimer() {
        if timer == nil && autoScrollEnable {
            timer = NSTimer.scheduledTimerWithTimeInterval(timeInterval, target: self, selector: #selector(self.timeAction), userInfo: nil, repeats: true)
        }
    }

自动轮播的实现

其实这里才是重点的好吧，一个UIImageView要实现轮播效果是很简单的，只需要使用系统的CATransition就可以了，来，上代码：

    @objc private func timeAction() {
        scrollWithDirection(.Left)
    }
    
    private func scrollWithDirection(direction: ScrollDirection) {
        switch direction {
        case .Left:
            index += 1
            if index > imageCounts - 1 {
                index = 0
            }
        case .Right:
            index -= 1
            if index < 0 {
                index = imageCounts - 1
            }
        }
        
        if images.count > 0 {
            self.imageView.image = images[index]
        }
        else {
            if let url = NSURL(string: imageURLStringGroup[index]) {
                self.imageView.hu_setImageWithURL(url, placeholderImage: placeholderImage)
            }
        }
        
        addScrollAnimationWithDirection(direction)
    }
    
    private func addScrollAnimationWithDirection(direction: ScrollDirection) {
        let animation = CATransition()
        animation.duration = 0.4
        animation.type = kCATransitionPush
        switch direction {
        case .Left:
            animation.subtype = kCATransitionFromRight
        case .Right:
            animation.subtype = kCATransitionFromLeft
        }
        
        self.imageView.layer.addAnimation(animation, forKey:"scroll")
        self.pageControl.currentPage = index
    }

代码非常简单，所以就不一一解释了。现在我们已经构建好了UI，创建并启动了定时器（而且能成功销毁），并成功添加了手势，这样这个图片轮播控件就可以正常工作了。但是在我们成功给轮播图设置图片后，我们得做些其他的工作：

   public var images: [UIImage] = [] {
        willSet {
            imageCounts = newValue.count
            imageView.image = newValue.first
            pageControl.numberOfPages = newValue.count
        }
    }
    
    public var imageURLStringGroup: [String] = [] {
        willSet {
            imageCounts = newValue.count
            
            guard let url = NSURL(string: newValue.first!) else {
                return
            }
            imageView .hu_setImageWithURL(url, placeholderImage: placeholderImage)
            pageControl.numberOfPages = newValue.count
        }
    }

现在就可以使用了：

  override func viewDidLoad() {
        super.viewDidLoad()
        
        let images = ["a.jpg", "b.jpg","c.jpg","d.jpg",].flatMap {
            return UIImage(named: $0)
        }
        
        let cycleView = HUScrollCycleView(frame: CGRectMake(0, 64, self.view.frame.size.width, 200))
        self.view.addSubview(cycleView)
        cycleView.delegate = self
        cycleView.images = images
        cycleView.currentPageIndicatorTintColor = UIColor.redColor()
//        cycleView.placeholderImage = UIImage(named:"a.jpg")
//        cycleView.imageURLStringGroup = ["http://1.7feel.cc/yungou/statics/uploads/banner/20160715/85964915563838.jpg",
//                                         "http://1.7feel.cc/yungou/statics/uploads/banner/20160715/20274054563730.jpg",
//                                         "http://1.7feel.cc/yungou/statics/uploads/banner/20160715/40912708563719.jpg",
//                                         "http://1.7feel.cc/yungou/statics/uploads/touimg/20160718/img193.jpg"];
    }

最后附上GitHub地址。HUScrollCycle中的网络图片下载并没有使用其他第三方库，这里我使用的是以前用Objective-C写的HUWebImageDownloader，它在我维护的一个图片浏览器第三方库HUPhotoBrowser中使用的，它支持网络图片和本地相册图片的浏览和多选，有兴趣的童鞋可以点这里。
所以你完全可以放心使用HUScrollCycle而不用担心对你项目产生影响。你只要按照上面的链接中的方法正确的导入HUScrollCycle-Bridging-Header.h就可以正常使用了。