第十八篇玩转【斗鱼直播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

fileprivate lazy var menuView : AmuseMenuView = {

let menuView = AmuseMenuView.amuseMenuView()

menuView.frame = CGRect(x: 0, y: -kMenuViewH, width: kScreenW, height: kMenuViewH)

return menuView

}()

添加到UICollectionView中，并且设置UICollectionView的内边距

override func setupUI() {

super.setupUI()

collectionView.addSubview(menuView)

collectionView.contentInset = UIEdgeInsets(top: kMenuViewH, left: 0, bottom: 0, right: 0)

}

实现UICollectionView的数据源&代理
实现数据源方法，展示数据
注册Cell（在awakeFromNib中注册）
设置布局（在layoutSubviews中设置，该位置可以拿到正确的尺寸）

import UIKit

private let kMenuCellID = "kMenuCellID"

class AmuseMenuView: UIView {

// MARK: 控件属性

@IBOutlet weak var collectionView: UICollectionView!

@IBOutlet weak var pageControl: UIPageControl!

// MARK: 从Xib中加载出来

override func awakeFromNib() {

super.awakeFromNib()

collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: kMenuCellID)

}

override func layoutSubviews() {

super.layoutSubviews()

let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout

layout.itemSize = collectionView.bounds.size

}

}

// MARK:- 提供快速创建的类方法

extension AmuseMenuView {

class func amuseMenuView() -> AmuseMenuView {

return Bundle.main.loadNibNamed("AmuseMenuView", owner: nil, options: nil)?.first as! AmuseMenuView

}

}

// MARK:- 遵守UICollectionView的数据源&代理协议

extension AmuseMenuView : UICollectionViewDataSource, UICollectionViewDelegate {

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

return 2

}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

// 1.取出Cell

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kMenuCellID, for: indexPath)

cell.backgroundColor = UIColor.randomColor()

return cell

}

}

自定义Cell，用于展示每一个Item
在Cell中添加UICollectionView
设置UICollectionView的数据源&代理
注册Cell（在awakeFromNib中注册）
设置布局（在layoutSubviews中设置，该位置可以拿到正确的尺寸

import UIKit

private let kGameCellID = "kGameCellID"

class AmuseMenuViewCell: UICollectionViewCell {

@IBOutlet weak var collectionView: UICollectionView!

override func awakeFromNib() {

super.awakeFromNib()

collectionView.register(UINib(nibName: "CollectionGameCell", bundle: nil), forCellWithReuseIdentifier: kGameCellID)

}

override func layoutSubviews() {

super.layoutSubviews()

let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout

let itemW = collectionView.bounds.width / 4

let itemH = collectionView.bounds.height / 2

layout.itemSize = CGSize(width: itemW, height: itemH)

}

}

extension AmuseMenuViewCell : UICollectionViewDataSource, UICollectionViewDelegate {

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

return 8

}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kGameCellID, for: indexPath)

cell.backgroundColor = UIColor.randomColor()

return cell

}

}

展示数据
AmuseMenuView定义[GameBaseModel]属性
监听属性的改变，将数据每8个传递给Cell一次
Cell拿到数据，将数据展示到GameCell中即可
代码叫简单（此处不再粘贴）