小碼哥-鬥魚直播APP之娛樂菜單展示

娛樂菜單展示

效果展示

• 如圖
  

思路分析

• 該界面其實非常常見，像微信聊天中就有類似的界面
  
• 該界面如何佈局呢？

思路一：UIScrollView

• 整體是一個UIScrollView
  • 在UIScrollView中多頁View
  • 在每頁View中添加8個按鈕
• 缺點：
  • 如果數據較多，則無法做到循環利用
  • 需要計算每一個按鈕的位置

思路二：UICollectionView

• 整體是一個UICollectionView
  • 每一個按鈕是一個Cell
  • 滾動方向爲水平滾動（水平滾動時，則會從左到右依次排布）
• 缺點：
  • 如果某業數據較少，排布方式會是上下排布
  • 而不是先排布第一排，後排布第二排
  • 如圖
    

思路三：UICollectionView的Cell中嵌套UICollectionView

• 整體是一個UICollectionView
  • 一個Cell爲一頁
  • 一頁中防止一個UICollectionView
  • 該UICollectionView中放8個數據（如果達到8個，不足8個則水平依次排列）

界面實現

• 自定義AmuseMenuView，用於描述整個頂部菜單
  • 該View中主要有一個UICollectionView，一個UIPageControl
  • 可以直接通過一個Xib來描述
    
• 在控制器中加載該View，並且添加到UICollectionView中
• 懶加載AmuseMenuView

1. fileprivate lazy var menuView : AmuseMenuView = {
2. let menuView = AmuseMenuView.amuseMenuView()
3. menuView.frame = CGRect(x: 0, y: -kMenuViewH, width: kScreenW, height: kMenuViewH)
4. return menuView
5. }()

• 添加到UICollectionView中，並且設置UICollectionView的內邊距

1. override func setupUI() {
2. super.setupUI()
4. collectionView.addSubview(menuView)
5. collectionView.contentInset = UIEdgeInsets(top: kMenuViewH, left: 0, bottom: 0, right: 0)
6. }

• 實現UICollectionView的數據源&代理
  • 實現數據源方法，展示數據
  • 註冊Cell（在awakeFromNib中註冊）
  • 設置佈局（在layoutSubviews中設置，該位置可以拿到正確的尺寸）
    

1. import UIKit
3. private let kMenuCellID = "kMenuCellID"
5. class AmuseMenuView: UIView {
6. // MARK: 控件屬性
7. @IBOutlet weak var collectionView: UICollectionView!
8. @IBOutlet weak var pageControl: UIPageControl!
10. // MARK: 從Xib中加載出來
11. override func awakeFromNib() {
12. super.awakeFromNib()
14. collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: kMenuCellID)
15. }
17. override func layoutSubviews() {
18. super.layoutSubviews()
20. let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
21. layout.itemSize = collectionView.bounds.size
22. }
23. }
26. // MARK:- 提供快速創建的類方法
27. extension AmuseMenuView {
28. class func amuseMenuView() -> AmuseMenuView {
29. return Bundle.main.loadNibNamed("AmuseMenuView", owner: nil, options: nil)?.first as! AmuseMenuView
30. }
31. }
34. // MARK:- 遵守UICollectionView的數據源&代理協議
35. extension AmuseMenuView : UICollectionViewDataSource, UICollectionViewDelegate {
36. func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
37. return 2
38. }
40. func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
41. // 1.取出Cell
42. let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kMenuCellID, for: indexPath)
44. cell.backgroundColor = UIColor.randomColor()
46. return cell
47. }
48. }

• 自定義Cell，用於展示每一個Item
  • 在Cell中添加UICollectionView
  • 設置UICollectionView的數據源&代理
  • 註冊Cell（在awakeFromNib中註冊）
  • 設置佈局（在layoutSubviews中設置，該位置可以拿到正確的尺寸
    

1. import UIKit
3. private let kGameCellID = "kGameCellID"
5. class AmuseMenuViewCell: UICollectionViewCell {
7. @IBOutlet weak var collectionView: UICollectionView!
10. override func awakeFromNib() {
11. super.awakeFromNib()
13. collectionView.register(UINib(nibName: "CollectionGameCell", bundle: nil), forCellWithReuseIdentifier: kGameCellID)
14. }
16. override func layoutSubviews() {
17. super.layoutSubviews()
19. let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
20. let itemW = collectionView.bounds.width / 4
21. let itemH = collectionView.bounds.height / 2
22. layout.itemSize = CGSize(width: itemW, height: itemH)
23. }
24. }
27. extension AmuseMenuViewCell : UICollectionViewDataSource, UICollectionViewDelegate {
28. func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
29. return 8
30. }
32. func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
33. let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kGameCellID, for: indexPath)
35. cell.backgroundColor = UIColor.randomColor()
37. return cell
38. }
39. }

• 展示數據
  • AmuseMenuView定義[GameBaseModel]屬性
  • 監聽屬性的改變，將數據每8個傳遞給Cell一次
  • Cell拿到數據，將數據展示到GameCell中即可
  • 代碼叫簡單（此處不再粘貼）
    
  來源：http://bbs.520it.com/forum.php?mod=viewthread&tid=2499