玩转【斗鱼直播APP】系列之游戏推荐展示

游戏推荐展示

展示效果

• 展示效果
  

思路分析

• 其实这个实现比较简单，也是有两种方案
  • UIScrollView：直接在上面放上UIButton即可
  • UICollectionView：每一个游戏用一个Cell来展示
• 方案选择
  • 方案二：UICollectionView来实现
  • 一方面可以循环利用，另一方面UICollectionView真的非常好用喔

界面搭建

• 自定义RecommendGameView
  • 由于内容比较固定，直接通过xib描述
  • 添加UICollectionView即可
    
  • 设置UICollectionView的布局，设置数据源以及实现数据源方法(见代码)
  • 切记：设置自定义View的autoresizingMask = .None，否则控件将不能显示

class RecommendGameView: UIView {
    // MARK: 控件属性
    @IBOutlet weak var collectionView: UICollectionView!

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

        autoresizingMask = .None

        let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
        layout.itemSize = CGSize(width: kGameCellW, height: kGameViewH)
        collectionView.contentInset = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10)
    }
}

// MARK:- 提供快速创建的类方法
extension RecommendGameView {
    class func recommendGameView() -> RecommendGameView {
        return NSBundle.mainBundle().loadNibNamed("RecommendGameView", owner: nil, options: nil).first as! RecommendGameView
    }
}


// MARK:- 遵守UICollectionView的数据源&代理
extension RecommendGameView : UICollectionViewDataSource, UICollectionViewDelegate {
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

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

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

        return cell
    }
}

• 将自定义View添加到UICollectionView中

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

• 懒加载RecommendCycleView

    private lazy var gameView : RecommendGameView = {
        let gameView = RecommendGameView.recommendGameView()
        gameView.frame = CGRect(x: 0, y: -kGameViewH, width: kScreenW, height: kGameViewH)
        return gameView
    }()

• 添加UIContentView中

    collectionView.addSubview(gameView)
    collectionView.contentInset = UIEdgeInsets(top: kCycleViewH + kGameViewH, left: 0, bottom: 0, right: 0)

展示数据

• 因为该位置展示的数据，其实是请求热门游戏中10组数据，因此直接展示即可
• 将之前请求到的groups数组，传递给gameView
  • 对数据进行进一步处理
    • 将前两组数组删除（热门、颜值）
    • 在最后添加更多分组（最后有一组更多）
• 自定义Cell，用于展示数据
  • 通过Xib直接描述
    
• 根据模型展示数据
  • 代码如下

class CollectionGameCell: UICollectionViewCell {
    @IBOutlet weak var iconImageView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel!

    var group : AnchorGroup? {
        didSet {
            let iconURL = NSURL(string: group?.icon_url ?? "")!
            iconImageView.kf_setImageWithURL(iconURL, placeholderImage: UIImage(named: "home_more_btn"))
            titleLabel.text = group?.tag_name
        }
    }

    override func awakeFromNib() {
        super.awakeFromNib()

        iconImageView.layer.cornerRadius = iconImageView.bounds.width * 0.5
        iconImageView.layer.masksToBounds = true
    }
}