iOS培训-斗鱼直播APP之游戏推荐展示

玩转【斗鱼直播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.return10
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
∙添加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
11.}
12.
13.override func awakeFromNib(){
14.super.awakeFromNib()
15.
16. yer.cornerRadius =
iconImageView.bounds.width *0.5
17. yer.masksToBounds =true
18.}
19.}。