小码哥-斗鱼直播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