《iOS培训斗鱼直播APP之娱乐基本展示.docx》由会员分享，可在线阅读，更多相关《iOS培训斗鱼直播APP之娱乐基本展示.docx（12页珍藏版）》请在三一办公上搜索。
1、iOS培训斗鱼直播APP之娱乐基本展示玩转系列之娱乐基本展示 作者：小码哥教育 娱乐基本展示 效果展示 如图 内容的展示 界面布局 内容的展示依然是一个UICollectionView 懒加载UICollectionView 将UICollectionView添加到控制器的View中 实现数据源&代理 懒加载UICollectionView 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. privatelet kItemMargin :CGFloat=10 privatelet kIt
2、emW =(kScreenW -3* kItemMargin)/2 privatelet kNormalItemH = kItemW *3/4 privatelet kPrettyItemH = kItemW *4/3 privatelet kHeaderViewH :CGFloat=50 privatelet kNormalCellID =kNormalCellID privatelet kPrettyCellID =kPrettyCellID privatelet kHeaderViewID =kHeaderViewID classAmuseViewController:UIViewCon
3、troller / MARK: 懒加载属性 fileprivate lazy var collectionView :UICollectionView=unowned selfin / 1.创建布局 let layout =UICollectionViewFlowLayout layout.itemSize =CGSize(width: kItemW, height: kNormalItemH) layout.minimumLineSpacing =0 layout.minimumInteritemSpacing = kItemMargin layout.headerReferenceSize
4、 =CGSize(width: kScreenW, height: kHeaderViewH) layout.sectionInset =UIEdgeInsets(top:0, left: kItemMargin, bottom:0, right: kItemMargin) 23. 24. 25. 26. 27. 28. 29. 30. / 2.创建UICollectionView let collectionView =UICollectionView(frame:self.view.bounds, collectionViewLayout: layout) collectionView.b
5、ackgroundColor =UIColor.white collectionView.dataSource =self collectionView.delegate=self collectionView.autoresizingMask =.flexibleHeight,.flexibleWidth collectionView.register(UINib(nibName:CollectionNormalCell, bundle:nil), forCellWithReuseIdentifier: kNormalCellID) collectionView.register(UINib
6、(nibName:CollectionPrettyCell, bundle:nil), forCellWithReuseIdentifier: kPrettyCellID) collectionView.register(UINib(nibName:CollectionHeaderView, bundle:nil), forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: kHeaderViewID) return collectionView / MARK: 系统回调 over
7、ride func viewDidLoad super.viewDidLoad setupUI 实现数据源&代理方法 / MARK:- 遵守UICollectionView的数据源&代理协议 extension AmuseViewController:UICollectionViewDataSource,UICollectionViewDelegate func numberOfSections(in collectionView:UICollectionView)-Int return8 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43.
8、44. 1. 2. 3. 4. 5. 6. 7. func collectionView(_ collectionView:UICollectionView, numberOfItemsInSection section:Int)-Int return4 func collectionView(_ collectionView:UICollectionView, cellForItemAt indexPath:IndexPath)-UICollectionViewCell / 1.获取Cell let cell = collectionView.dequeueReusableCell(with
9、ReuseIdentifier: kNormalCellID,for: indexPath) cell.backgroundColor =UIColor.randomColor return cell 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 请求数据&展示数据 接口描述 请求地址： 请求参数：无参数 ViewModel封装 1. 2. 3. 4. 5. 6. 7. 8. 9. classAmuseViewModel fileprivate lazy var anchorGroups :AnchorGroup=AnchorGroup exten
10、sion AmuseViewModel func loadAmuseData(finishedCallback :escaping-) NetworkTools.requestData(.get,URLString:api/v1/getHotRoom/2)(result)in / 1.获取数据 guard let resultDict = result as?String:Anyelsereturn guard let dataArray = resultDictdataas?String:Anyelsereturn / 2.字典转模型 for dict in dataArray 10. 11
11、. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. self.anchorGroups.append(AnchorGroup(dict: dict) / 3.回调数据 finishedCallback 控制器中展示数据 修改之前的数据源&代理 1. 2. 3. 4. 5. fileprivate func loadData amuseVM.loadAmuseData self.collectionView.reloadData 父类抽取 展示内容，我们会发现，该界面和推荐界面相似度非常非常高 相似：添加UICollectionView，并且每组有对应的Heade
12、rView 不同：推荐界面第1组使用的是PrettyCell 思考： 既然相似度很高，那么我们可以抽取父类 将相同代码抽取到父类中，不同代码子类自己来实现 请求数据的ViewModel的抽取 1. 2. 3. 4. 5. 6. 7. 8. classBaseViewModel lazy var anchorGroups :AnchorGroup=AnchorGroup extension BaseViewModel func loadAnchorData(URLString:String, parameters :String:Any?=nil, finishedCallback :escap
13、ing-) NetworkTools.requestData(.get,URLString:URLString, parameters: parameters)(result)in / 1.获取数据 9. guard let resultDict = result as?String:Anyelsereturn guard let dataArray = resultDictdataas?String:Anyelsereturn / 2.字典转模型 for dict in dataArray self.anchorGroups.append(AnchorGroup(dict: dict) /
14、3.回调数据 finishedCallback 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 抽取懒加载UICollectionView 两个控制器都需要懒加载一个UICollectionView 并且UICollectionView需要设置的内容和尺寸也是一致的 实现数据源&代理 无论是推荐还是娱乐都需要成为UICollectionView的数据源&代理 如果子类有不同的实现，可以让子类自己实现 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. privatelet kIte
15、mMargin :CGFloat=10 privatelet kHeaderViewH :CGFloat=50 let kItemW =(kScreenW -3* kItemMargin)/2 let kNormalItemH = kItemW *3/4 let kPrettyItemH = kItemW *4/3 privatelet kNormalCellID =kNormalCellID privatelet kHeaderViewID =kHeaderViewID let kPrettyCellID =kPrettyCellID classBaseAnchorViewControlle
16、r:UIViewController / MARK: 懒加载属性 var baseVM :BaseViewModel! lazy var collectionView :UICollectionView=unowned selfin / 1.创建布局 let layout =UICollectionViewFlowLayout 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. layout.itemSize =CGSize(width: kItemW, height: kNormalItemH) layout.minimumLine
17、Spacing =0 layout.minimumInteritemSpacing = kItemMargin layout.headerReferenceSize =CGSize(width: kScreenW, height: kHeaderViewH) layout.sectionInset =UIEdgeInsets(top:0, left: kItemMargin, bottom:0, right: kItemMargin) / 2.创建UICollectionView let collectionView =UICollectionView(frame:self.view.boun
18、ds, collectionViewLayout: layout) collectionView.backgroundColor =UIColor.white collectionView.dataSource =self collectionView.delegate=self collectionView.autoresizingMask =.flexibleHeight,.flexibleWidth collectionView.register(UINib(nibName:CollectionNormalCell, bundle:nil), forCellWithReuseIdenti
19、fier: kNormalCellID) collectionView.register(UINib(nibName:CollectionPrettyCell, bundle:nil), forCellWithReuseIdentifier: kPrettyCellID) collectionView.register(UINib(nibName:CollectionHeaderView, bundle:nil), forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: kHea
20、derViewID) return collectionView / MARK: 系统回调 override func viewDidLoad super.viewDidLoad setupUI loadData / MARK:- 设置UI界面内容 extension BaseAnchorViewController 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. func setupUI view.addSub
21、view(collectionView) func loadData / MARK:- 遵守UICollectionView的数据源&代理协议 extension BaseAnchorViewController:UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout func numberOfSections(in collectionView:UICollectionView)-Int return baseVM.anchorGroups.count func collec
22、tionView(_ collectionView:UICollectionView, numberOfItemsInSection section:Int)-Int return baseVM.anchorGroupssection.anchors.count func collectionView(_ collectionView:UICollectionView, cellForItemAt indexPath:IndexPath)-UICollectionViewCell / 1.获取Cell let cell = collectionView.dequeueReusableCell(
23、withReuseIdentifier: kNormalCellID,for: indexPath)as!CollectionNormalCell cell.anchor = baseVM.anchorGroupsindexPath.section.anchorsindexPath.item return cell func collectionView(_ collectionView:UICollectionView, viewForSupplementaryElementOfKind kind:String, at indexPath:IndexPath)-UICollectionReu
24、sableView / 1.取出headerView let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: kHeaderViewID,for: indexPath)as!CollectionHeaderView 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. headerView.g
25、roup= baseVM.anchorGroupsindexPath.section return headerView func collectionView(_ collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, sizeForItemAt indexPath:IndexPath)-CGSize returnCGSize(width: kItemW, height: kNormalItemH) 88. 89. 90. 让RecommendViewController&AmuseViewController集成子BaseAnchorViewController 修改对应的代码即可
