玩转【斗鱼直播APP】系列之实现无限轮播

实现无限轮播

生活杂谈

• 最近很多童鞋私信我，Swift项目有些语法跟不上。希望我出OC版的（OC版我会在后续推出），但是以我的考虑来说，Swift在语言排行版上面其实已经超过OC，另外国内现在新项目一般都会用Swift开发了。所有其实不能总是对于Swift是一种拒绝的态度，待在舒适区是会被淘汰的噢
• 但是对于刚从OC转Swift的人来说，确实Swift语法和OC差异太大，又没有比较好的教程。后续我会看看能不能出一个OC快速转向Swift的教程，不需要的童鞋可以先研究我们的项目，需要的童鞋可以抓紧时间学习一下

实现效果

• 轮播效果
  

思路分析

• 实现无限轮播常用的方案有三个：
  • 第三方框架：（不推荐，该功能并不难，而且三方框架中会有很多冗余代码）
  • UIScrollView：上面放三个View，自己实现三个View的循环利用
  • UICollectionView：利用系统会对UICollectionViewCell的循环利用机制实现
• 方案选择：
  • 方案三：简单好用，循环利用的问题交给系统自己处理即可

界面搭建

• 自定义一个UIView
  • 由于该View上面内容比较固定，因此可以直接通过Xib进行描述
  • 添加UICollectionView，占据整个View，右下角添加UIPageControl
    
  • 设置UICollectionView的布局，设置数据源以及实现数据源方法(见代码)
  • 切记：设置自定义View的autoresizingMask = .None，否则控件将不能显示
  • 部分代码解释
    

 
 
// MARK:- 定义RecommendCycleView类
class RecommendCycleView: UIView {
    // MARK: 控件属性
    @IBOutlet weak var collectionView: UICollectionView!
    @IBOutlet weak var pageControl: UIPageControl!

    // MARK: 系统回调
    override func awakeFromNib() {
        super.awakeFromNib()

        // 设置不自动拉伸
        autoresizingMask = .None

        // 注册cell
        collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: kCycleCellID)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        // 设置collectionView的布局
        let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
        layout.itemSize = collectionView.bounds.size
    }

}


// MARK:- 通过Xib快速创建的类方法
extension RecommendCycleView {
    class func recommendCycleView() -> RecommendCycleView {
        return NSBundle.mainBundle().loadNibNamed("RecommendCycleView", owner: nil, options: nil).first as! RecommendCycleView
    }
}


// MARK:- 实现UICollectionView的数据源&代理
extension RecommendCycleView : UICollectionViewDataSource {
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 6
    }

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(kCycleCellID, forIndexPath: indexPath)

        cell.backgroundColor = indexPath.item % 2 == 0 ? UIColor.redColor() : UIColor.blueColor()

        return cell
    }
}

extension RecommendCycleView : UICollectionViewDelegate {

}

• 将自定义View添加到UICollectionView中

  • 懒加载RecommendCycleView对象
  • 将cycleView添加到UICollectionView中
  • 设置UICollectionView的内边距
  • 代码如下：

• 懒加载RecommendCycleView

 
 
    private lazy var cycleView : RecommendCycleView = {
        let cycleView = RecommendCycleView.recommendCycleView()
        cycleView.frame = CGRect(x: 0, y: -kCycleViewH, width: kScreenW, height: kCycleViewH)
        return cycleView
    }()

• 添加到collectionView中

 
 
    // 添加cycleView
    collectionView.addSubview(cycleView)
    collectionView.contentInset = UIEdgeInsets(top: kCycleViewH, left: 0, bottom: 0, right: 0)

请求数据&展示数据

请求数据

• 接口描述
  • 接口名称：顶部轮播数据
  • 接口地址：http://www.douyutv.com/api/v1/slide/6
  • 请求参数：</br>

参数名称	参数说明
version	当前版本号：2.300

• 在RecommendViewMode中发送网络请求
  • 根据接口发送请求
  • 定义CycleModel模型
  • 将请求到的数据转成模型对象
• 模型定义

 
 
class CycleModel: NSObject {
    /// 轮播标题
    var title : String = ""
    /// 轮播图片
    var pic_url : String = ""
    /// 轮播对应主播信息
    var anchor : AnchorModel?
    /// 主播信息
    var room : [String : NSObject]? {
        didSet {
            guard let room = room else { return }
            anchor = AnchorModel(dict: room)
        }
    }

    // MARK: 构造函数
    init(dict : [String : NSObject]) {
        super.init()

        setValuesForKeysWithDictionary(dict)
    }
    override func setValue(value: AnyObject?, forUndefinedKey key: String) {}
}

• 数据请求

 
 
    func requestCycleData(finishedCallback : () -> ()) {
        NetworkTools.requestData(.GET, URLString: "http://www.douyutv.com/api/v1/slide/6?version=2.300") { (result) in
            // 1.将结果转成字典
            guard let resultDict = result as? [String : NSObject] else { return }
            guard let dataArray = resultDict["data"] as? [[String : NSObject]] else { return }

            // 2.将字典转成模型对象
            for dict in dataArray {
                self.cycleModels.append(CycleModel(dict: dict))
            }

            finishedCallback()
        }
    }

展示数据

• 将数据传递给RecommendCycleView对象
  • 刷新UICollectionView
  • 设置UIPageControl的个数
• 自定义Cell，用于展示数据
  • 通过xib直接描述Cell
    
• 根据模型展示数据
  • 代码如下：

 
 
class CollectionCycleCell: UICollectionViewCell {
    // MARK: 控件属性
    @IBOutlet weak var iconImageView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!

    // MARK: 定义模型属性
    var cycleModel : CycleModel? {
        didSet {
            titleLabel.text = cycleModel?.title
            let iconURL = NSURL(string: cycleModel?.pic_url ?? "")!
            iconImageView.kf_setImageWithURL(iconURL)
        }
    }
}

实现无限轮播功能

• 在返回Cell个数地方，返回无限个数
  • 例如：(cycleModels?.count ?? 0) * 10000
  • 原因：无论用户怎么滚动，滚动几天可能才能滚完
  • 另外：因为Cell有循环利用，是不会常见那么多Cell的。不会造成内存很大

 
 
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return (cycleModels?.count ?? 0) * 10000
    }

• 随着用户的滚动，改变pageControl的显示
  • 监听UICollectionView的滚动即可

 
 
    func scrollViewDidScroll(scrollView: UIScrollView) {
        let offset = scrollView.contentOffset.x + scrollView.bounds.width * 0.5

        pageControl.currentPage = Int(offset / scrollView.bounds.width) % (cycleModels?.count ?? 1)
    }

• 让用户向前滚动也可以

  • 默认滚动到60处，那么用户向前滚动也有内容
  • 注意：不需要太多，因为用户习惯来讲是很少向前滚动的

         
         
    let indexPath = NSIndexPath(forItem: (cycleModels?.count ?? 0) * 10, inSection: 0)
    collectionView.scrollToItemAtIndexPath(indexPath, atScrollPosition: .Left, animated: false)

• 自动滚动功能

  • 添加定时器
  • 每隔3秒钟自动滚动到下一个

 
 
// MARK:- 对定时器操作方法
extension RecommendCycleView {
    private func addCycleTimer() {
        cycleTimer = NSTimer(timeInterval: 3, target: self, selector: #selector(self.scrollToNext), userInfo: nil, repeats: true)
        NSRunLoop.mainRunLoop().addTimer(cycleTimer!, forMode: NSRunLoopCommonModes)
    }

    private func removeCycleTimer() {
        cycleTimer?.invalidate()
        cycleTimer = nil
    }

    @objc private func scrollToNext() {
        // 滚动collectionView
        let currentOffSet = collectionView.contentOffset.x + collectionView.bounds.width
        collectionView.setContentOffset(CGPoint(x: currentOffSet, y: 0), animated: true)
    }
}

• 监听用户拖拽
  • 用户拖拽过程中，定时器不更新
  • 监听用户拖拽&结束拖拽即可

 
 
    func scrollViewWillBeginDragging(scrollView: UIScrollView) {
        removeCycleTimer()
    }

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