小碼哥-玩轉【鬥魚直播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!
5. // MARK: 系統回調
6. override func awakeFromNib() {
7. super.awakeFromNib()
9. autoresizingMask = .None
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. }
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. }
25. // MARK:- 遵守UICollectionView的數據源&代理
26. extension RecommendGameView : UICollectionViewDataSource, UICollectionViewDelegate {
27. func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
28. return 10
29. }
31. func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
32. let cell = collectionView.dequeueReusableCellWithReuseIdentifier(kGameCellID, forIndexPath: indexPath) as! CollectionGameCell
34. cell.backgroundColor = indexPath.item % 2 == 0 ? UIColor.redColor() : UIColor.blueColor()
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!
5. var group : 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. }
13. override func awakeFromNib() {
14. super.awakeFromNib()
16. iconImageView.layer.cornerRadius = iconImageView.bounds.width * 0.5
17. iconImageView.layer.masksToBounds = true
18. }
19. }