iOS培训~斗鱼直播APP之游戏界面实现.docx

玩转【斗鱼直播APP】系列之游戏界面实现作者：小码哥教育游戏界面实现界面效果展示界面效果界面分析分析图如何实现这个界面实现的方案很多可以直接使用UITableView，之后添加一个HeaderView可以直接使用UICollectionView，之后添加内边距（类似推荐界面实现）这里采取UICollectionView的方案下面每一个游戏就是一个Cell，如果使用UITableView则需要对数据进行进一步处理另外上面部分，直接添加内边距，并且添加内容即可界面实现添加UICollectionView懒加载UICollectionView，并且设置相关属性 fileprivate lazy var collectionView : UICollectionView = { // 1.创建布局 let layout = UICollectionViewFlowLayout() layout.itemSize = CGSize(width: kItemW, height: kItemH) layout.minimumLineSpacing = 0 layout.minimumInteritemSpacing = 0 layout.headerReferenceSize = CGSize(width: kScreenW, height: kHeaderViewH) layout.sectionInset = UIEdgeInsets(top: 0, left: kEdgeMargin, bottom: 0, right: kEdgeMargin) // 2.创建UICollectionView let collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout) collectionView.dataSource = self collectionView.delegate = self collectionView.register(UINib(nibName: CollectionGameCell, bundle: nil), forCellWithReuseIdentifier: kGameCellID) collectionView.register(UINib(nibName: CollectionHeaderView, bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: kHeaderViewID) collectionView.backgroundColor = UIColor.white collectionView.autoresizingMask = [.flexibleHeight, .flexibleWidth] return collectionView }()设置数据源，注册Cell，实现数据源方法// MARK:- 遵守UICollectionView的数据源代理extension GameViewController : UICollectionViewDataSource { func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) - Int { return 60 } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) - UICollectionViewCell { // 1.取出Cell let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kGameCellID, for: indexPath) as! CollectionGameCell return cell }}接口描述接口名称：全部游戏接口地址：/api/v1/getColumnDetail请求参数：/br参数名称参数说明shortNamegame请求数据创建对应的ViewModel，用于GameVc数据的请求extension GameViewModel { func loadAllGamesData(finishedCallback : @escaping () - Void) { NetworkTools.requestData(.