玩转【斗鱼直播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

}

}