玩转【斗鱼直播APP】系列之游戏界面实现作者：小码哥教育游戏界面实现界面效果展示界面效果界面分析分析图如何实现这个界面实现的方案很多可以直接使用UITableView，之后添加一个HeaderView可以直接使用UICollectionView，之后添加内边距（类似推荐界面实现）这里采取UICollectionView的方案下面每一个游戏就是一个Cell，如果使用UITableView则需要对数据进行进一步处理另外上面部分，直接添加内边距，并且添加内容即可界面实现添加UICollectionView懒加载UICollectionView，并且设置相关属性1.fileprivatelazyvarcollectionView:UICollectionView={2.//1.创建布局3.letlayout=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.letcollectionView=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,.flexibleWidth]18.19.returncollectionView20.}()设置数据源，注册Cell，实现数据源方法1.//MARK:-遵守UICollectionView的数据源&代理2.extensionGameViewController:UICollectionViewDataSource{3.funccollectionView(_collectionView:UICollectionView,numberOfItemsInSectionsection:Int)->Int{4.return605.}6.7.funccollectionView(_collectionView:UICollectionView,cellForItemAtindexPath:IndexPath)->UICollectionViewCell{8.//1.取出Cell9.letcell=collectionView.dequeueReusableCell(withReuseIdentifier:kGameCellID,for:indexPath)as!CollectionGameCell10.11.returncell12.}13.14.}接口描述接口名称：全部游戏接口地址：http://capi.douyucdn.cn/api/v1/getColumnDetail请求参数：</br>参数名称参数说明shortNamegame请求数据创建对应的ViewModel，用于GameVc数据的请求1.extensionGameViewModel{2.funcloadAllGamesData(finishedCallback:@escaping()->Void){3.NetworkTools.requestData(.get,URLString:"http://capi.douyucdn.cn/api/v1/getColumnDetail?shortName=game"){(result)in4.//1.获取数据5.guardletresultDict=resultas?[String:Any]else{return}6.guardletdataArray=resultDict["data"]as?[[String:Any]]else{return}7.8.//2.字典转模型9.fordictindataArray{10.self.games.append(GameModel(dict:dict))11.}12.13.//3.通知外界数据请求完成14.finishedCallback()15.}16.}17.}发送网络请求1.//MARK:-加载数据2.extensionGameViewController{3.fileprivatefuncloadData(){4.gameVM.loadAllGamesData{5.self.collectionView.reloadData()6.}7.}8.}对之前的CollectionGameCell进行改进添加底部的线段展示数据即可1.//MARK:定义模型属性2.vargameModel:GameBaseModel?{3.didSet{4.titleLabel.text=gameModel?.tag_name5.ifleticonURL=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.funccollectionView(_collectionView:UICollectionView,viewForSupplementaryElementOfKindkind:String,atindexPath:IndexPath)->UICollectionReusableVi...
