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

玩转【斗鱼直播APP】系列之游戏界面实现作者：小码哥教育游戏界面实现界面效果展示界面效果界面分析分析图如何实现这个界面实现的方案很多可以直接使用UITableView，之后添加一个HeaderView可以直接使用UICollectionView，之后添加内边距（类似推荐界面实现）这里采取UICollectionView的方案下面每一个游戏就是一个Cell，如果使用UITableView则需要对数据进行进一步处理另外上面部分，直接添加内边距，并且添加内容即可界面实现添加UICollectionView懒加载UICollectionView，并且设置相关属性1. fileprivate lazy var collectionView : UICollectionView = 2. / 1.创建布局3. let layout = UICollectionViewFlowLayout()4. layout.itemSize = CGSize(width: kItemW, height: kItemH)5. layout.minimumLineSpacing = 06. layout.minimumInteritemSpacing = 07. layout.headerReferenceSize = CGSize(width: kScreenW, height: kHeaderViewH)8. layout.sectionInset = UIEdgeInsets(top: 0, left: kEdgeMargin, bottom: 0, right: kEdgeMargin)9.10. / 2.创建UICollectionView11. let collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout)12. collectionView.dataSource = self13. collectionView.delegate = self14. collectionView.register(UINib(nibName: CollectionGameCell, bundle: nil), forCellWithReuseIdentifier: kGameCellID)15. collectionView.register(UINib(nibName: CollectionHeaderView, bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: kHeaderViewID)16. collectionView.backgroundColor = UIColor.white17. collectionView.autoresizingMask = .flexibleHeight, .flexibleWidth18.19. return collectionView20. () 设置数据源，注册Cell，实现数据源方法1. / MARK:- 遵守UICollectionView的数据源&代理2. extension GameViewController : UICollectionViewDataSource 3. func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) - Int 4. return 605. 6.7. func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) - UICollectionViewCell 8. / 1.取出Cell9. let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kGameCellID, for: indexPath) as! CollectionGameCell10.11. return cell12. 13.14. 接口描述接口名称：全部游戏接口地址：/api/v1/getColumnDetail请求参数：参数名称参数说明shortNamegame请求数据创建对应的ViewModel，用于GameVc数据的请求1. extension GameViewModel 2. func loadAllGamesData(finishedCallback : escaping () - Void) 3. NetworkTools.requestData(.get, URLString: /api/v1/getColumnDetail?shortName=game) (result) in4. / 1.获取数据5. guard let resultDict = result as? String : Any else return 6. guard let dataArray = resultDictdata as? String : Any else return 7.8. / 2.字典转模型9. for dict in dataArray 10. self.games.append(GameModel(dict: dict)11. 12.13. / 3.通知外界数据请求完成14. finishedCallback()15. 16. 17. 发送网络请求1. / MARK:- 加载数据2. extension GameViewController 3. fileprivate func loadData() 4. gameVM.loadAllGamesData 5. self.collectionView.reloadData()6. 7. 8. 对之前的CollectionGameCell进行改进添加底部的线段 展示数据即可1. / MARK: 定义模型属性2. var gameModel : GameBaseModel? 3. didSet 4. titleLabel.text = gameModel?.tag_name5. if let iconURL = URL(string: gameModel?.icon_url ? ) 6. iconImageView.kf.setImage(with: iconURL, placeholder: UIImage(named: home_more_btn)7. else 8. iconImageView.image = UIImage(named: home_more_btn)9. 10. 11. 添加组的HeaderView实现对应的数据源方法即可1. func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) - UICollectionReusableView 2. / 1.取出HeaderView3. let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: kHeaderViewID, for: indexPath) as! CollectionHeaderView4.5. headerView.titleLabel.text = 全部6. headerView.iconImageView.image = UIImage(named: Img_orange)7. headerView.moreBtn.isHidden = true8.9. return headerView10. 添加内边距，并且添加顶部的View添加内边距1. collectionView.contentInset = UIEdgeInsets(top: kHeaderViewH + kGameViewH, left: 0, bottom: 0, right: 0)懒加载两个ViewgameView：用于展示推荐游戏headerView：顶部View的header1. fileprivate lazy var gameView : RecommendGameView = 2. let gameView = RecommendGameView.recommendGameView()3. gameView.frame = CGRect(x: 0, y: -kGameViewH, width: kScreenW, height: kGameViewH)4. return gameView5. ()6. fileprivate lazy var headerView : CollectionHeaderView = 7. let headerView = CollectionHeaderView.collectionHeaderView()8. headerView.frame = CGRect(x: 0, y: -(kHeaderViewH + kGameViewH), width: kScreenW, height: kHeaderViewH)9. headerView.iconImageView.image = UIImage(named: Img_orange)10. headerView.titleLabel.text = 常用11. headerView.moreBtn.isHidden = true12.13. return headerView14. () 在设置UI处添加两个View1. fileprivate func setupUI() 2. / 1.添加collectionView3. view.addSubview(collectionView)4. collectionView.contentInset = UIEdgeInsets(top