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

作者：小码哥教育

游戏推荐展示

展示效果

∙ 展示效果

思路分析

∙

其实这个实现比较简单，也是有两种方案 ∙

UIScrollView ：直接在上面放上UIButton 即可 ∙

UICollectionView ：每一个游戏用一个Cell 来展示 ∙

方案选择 ∙

方案二：UICollectionView 来实现 ∙ 一方面可以循环利用，另一方面UICollectionView 真的非常好用喔 界面搭建

∙

自定义RecommendGameView ∙ 由于内容比较固定，直接通过xib 描述

∙ 添加UICollectionView 即可

∙ 设置UICollectionView 的布局，设置数据源以及实现数据源方法(见代码) ∙ 切记：设置自定义View 的autoresizingMask = .None，否则控件将不能

显示 1. class RecommendGameView :UIView { 2.

// MARK: 控件属性 3. @IBOutlet weak var collectionView:UICollectionView ! 4. 5. // MARK: 系统回调 6. override func awakeFromNib(){ 7. super . awakeFromNib () 8. 9. autoresizingMask =.None 10. 11. let layout = collectionView. collectionViewLayout as ! UICollectionViewFlowLayout 12. layout. itemSize =CGSize (width : kGameCellW, height: kGameViewH ) 13. collectionView. contentInset =UIEdgeInsets (top :0, left:10, bottom :0, right:10) 14. } 15. } 16. 17. // MARK:- 提供快速创建的类方法 18. extension RecommendGameView { 19. class func recommendGameView()->RecommendGameView { 20. return NSBundle . mainBundle ().loadNibNamed ("RecommendGameView" , owner :nil , options:nil ). first as ! RecommendGameView 21. } 22. } 23. 24.

25.

// MARK:- 遵守UICollectionView 的数据源&代理 26.

extension RecommendGameView :UICollectionViewDataSource , UICollectionViewDelegate { 27.

func collectionView(collectionView :UICollectionView , numberOfItemsInSection section:Int )->Int { 28.

return 10 29.

} 30. 31.

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

collectionView . dequeueReusableCellWithReuseIdentifier (kGameCellID , forIndexPath : indexPath) as ! CollectionGameCell

33.

34. cell. backgroundColor =

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

35.

36. return cell

37. }

38. }

∙

将自定义View 添加到UICollectionView 中 ∙

∙

懒加载RecommendGameView 对象 ∙

将gameView 添加到UICollectionView 中 ∙

设置UICollectionView 的内边距 ∙

代码如下： ∙

懒加载RecommendCycleView

∙

1. private lazy var gameView :RecommendGameView ={

2. let gameView =RecommendGameView . recommendGameView () 3. gameView. frame =CGRect (x :0, y :-kGameViewH , width : kScreenW , height : kGameViewH) 4. return gameView

5.

}() ∙ 添加UIContentView 中 1. collectionView. addSubview (gameView )

2.

collectionView. contentInset =UIEdgeInsets (top : kCycleViewH + kGameViewH , left:0, bottom:0, right:0) 展示数据

∙

因为该位置展示的数据，其实是请求热门游戏中10组数据，因此直接展示即可 ∙

将之前请求到的groups 数组，传递给gameView ∙

对数据进行进一步处理 ∙

将前两组数组删除（热门、颜值） ∙

在最后添加更多分组（最后有一组更多） ∙

自定义Cell ，用于展示数据 ∙ 通过Xib 直接描述

∙

根据模型展示数据 ∙ 代码如下 1. class CollectionGameCell :UICollectionViewCell {

2.

@IBOutlet weak var iconImageView:UIImageView !

3. @IBOutlet weak var titleLabel:UILabel !

4.

5. vargroup :AnchorGroup ?{

6. didSet {

7. let iconURL = NSURL(string :group ?. icon_url ?? "" )!

8. iconImageView. kf_setImageWithURL(iconURL ,

placeholderImage :UIImage (named :"home_more_btn"))

9. titleLabel. text =group ?. tag_name

10.

} 11.

} 12.

13.

override func awakeFromNib(){ 14.

super . awakeFromNib () 15.

16. iconImageView. layer . cornerRadius = iconImageView . bounds . width *0.5

17. iconImageView. layer . masksToBounds =true 18. }

19.

}