iOS培训-斗鱼直播APP之娱乐基本展示
五年级 记叙文 8283字 493人浏览 vip佐侒

玩转【斗鱼直播APP 】系列之娱乐基本展示

作者:小码哥教育

娱乐基本展示

效果展示

如图

内容的展示

界面布局

内容的展示依然是一个UICollectionView 懒加载UICollectionView

将UICollectionView 添加到控制器的View 中 实现数据源&代理

懒加载UICollectionView 1.

privatelet kItemMargin :CGFloat =10 2.

privatelet kItemW =(kScreenW -3* kItemMargin)/2 3.

privatelet kNormalItemH = kItemW *3/4 4.

privatelet kPrettyItemH = kItemW *4/3 5.

privatelet kHeaderViewH :CGFloat =50 6.

7.

privatelet kNormalCellID ="kNormalCellID" 8.

privatelet kPrettyCellID ="kPrettyCellID" 9.

privatelet kHeaderViewID ="kHeaderViewID" 10.

11.

class AmuseViewController :UIViewController { 12.

13.

// MARK: 懒加载属性 14.

fileprivate lazy var collectionView :UICollectionView ={[unowned self ]in 15.

// 1.创建布局 16.

let layout =UICollectionViewFlowLayout () 17.

layout. itemSize =CGSize (width : kItemW, height: kNormalItemH ) 18.

layout. minimumLineSpacing =0 19.

layout. minimumInteritemSpacing = kItemMargin 20.

layout. headerReferenceSize =CGSize (width : kScreenW , height : kHeaderViewH ) 21.

layout. sectionInset =UIEdgeInsets (top :0, left : kItemMargin , bottom :0, right: kItemMargin) 22.

23.

// 2.创建UICollectionView 24.

let collectionView =UICollectionView (frame :self . view . bounds , collectionViewLayout : layout) 25.

collectionView. backgroundColor =UIColor . white 26.

collectionView. dataSource =self 27.

collectionView. delegate =self 28.

collectionView. autoresizingMask =[.flexibleHeight ,. flexibleWidth ] 29.

30.

collectionView . register (UINib (nibName :"CollectionNormalCell" , bundle :nil ), forCellWithReuseIdentifier: kNormalCellID)

31.

collectionView . register (UINib (nibName :"CollectionPrettyCell" , bundle :nil ), forCellWithReuseIdentifier: kPrettyCellID)

32.

collectionView . register (UINib (nibName :"CollectionHeaderView" , bundle :nil ),

forSupplementaryViewOfKind :UICollectionElementKindSectionHeader , withReuseIdentifier : kHeaderViewID)

33.

34. return collectionView

35. }()

36.

37. // MARK: 系统回调

38. override func viewDidLoad(){

39. super . viewDidLoad ()

40.

41. setupUI()

42. }

43.

44. }

实现数据源&代理方法

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

2. extension

AmuseViewController :UICollectionViewDataSource , UICollectionViewDelegate {

3. func numberOfSections(in

collectionView :UICollectionView )->Int {

4. return 8

5. }

6.

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

8. return 4

9. }

10.

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

12. // 1.获取Cell

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

14.

15. cell. backgroundColor =UIColor . randomColor ()

16.

17. return cell

18. }

19.

} 请求数据&展示数据

接口描述

请求地址:http://capi.douyucdn.cn/api/v1/getHotRoom/2

请求参数:无参数

ViewModel 封装

1.

class AmuseViewModel { 2.

fileprivate lazy var anchorGroups :[AnchorGroup ]=[AnchorGroup ]() 3.

} 4.

5.

extension AmuseViewModel { 6.

func loadAmuseData(finishedCallback :@escaping()->()){ 7.

NetworkTools . requestData (.get , URLString :"http://capi.douyucdn.cn/api/v1/getHotRoom/2"){(result ) in 8.

// 1.获取数据 9. guard let resultDict = result

as ?[String :Any ]else {return }

10. guard let dataArray =

resultDict ["data" ]as ?[[String :Any ]]else {return }

11.

12. // 2.字典转模型

13. for dict in dataArray {

14.

self . anchorGroups . append (AnchorGroup (dict : dict)) 15.

} 16.

17.

// 3.回调数据 18.

finishedCallback() 19.

} 20.

} 21. }

控制器中展示数据

修改之前的数据源&代理

1.

fileprivate func loadData(){ 2.

amuseVM. loadAmuseData { 3.

self . collectionView . reloadData () 4.

} 5. }

父类抽取

展示内容,我们会发现,该界面和推荐界面相似度非常非常高 相似:添加UICollectionView ,并且每组有对应的HeaderView 不同:推荐界面第1组使用的是PrettyCell

思考:

既然相似度很高,那么我们可以抽取父类

将相同代码抽取到父类中,不同代码子类自己来实现 请求数据的ViewModel 的抽取 1.

class BaseViewModel { 2.

lazy var anchorGroups :[AnchorGroup ]=[AnchorGroup ]() 3.

} 4.

5.

extension BaseViewModel { 6.

func loadAnchorData(URLString :String , parameters :[String :Any ]?=nil , finishedCallback :@escaping()->()){ 7.

NetworkTools . requestData (.get , URLString :URLString , parameters: parameters ){(result ) in 8. // 1.获取数据

9. guard let resultDict = result as ?[String :Any ]else {return }

10. guard let dataArray =

resultDict ["data" ]as ?[[String :Any ]]else {return } 11.

12. // 2.字典转模型

13. for dict in dataArray {

14. self . anchorGroups . append (AnchorGroup (dict : dict)) 15. }

16.

17. // 3.回调数据

18. finishedCallback()

19. }

20. }

21.

} 抽取懒加载UICollectionView

两个控制器都需要懒加载一个UICollectionView

并且UICollectionView 需要设置的内容和尺寸也是一致的 实现数据源&代理

无论是推荐还是娱乐都需要成为UICollectionView 的数据源&代理 如果子类有不同的实现,可以让子类自己实现 1.

privatelet kItemMargin :CGFloat =10 2.

privatelet kHeaderViewH :CGFloat =50 3.

let kItemW =(kScreenW -3* kItemMargin)/2 4.

let kNormalItemH = kItemW *3/4 5.

let kPrettyItemH = kItemW *4/3 6.

7.

privatelet kNormalCellID ="kNormalCellID" 8.

privatelet kHeaderViewID ="kHeaderViewID" 9.

let kPrettyCellID ="kPrettyCellID" 10.

11.

class BaseAnchorViewController :UIViewController { 12.

13.

// MARK: 懒加载属性 14.

var baseVM :BaseViewModel ! 15.

lazy var collectionView :UICollectionView ={[unowned self ]in 16.

// 1.创建布局 17. let layout =UICollectionViewFlowLayout ()

18.

layout. itemSize =CGSize (width : kItemW, height: kNormalItemH ) 19.

layout. minimumLineSpacing =0 20.

layout. minimumInteritemSpacing = kItemMargin 21.

layout. headerReferenceSize =CGSize (width : kScreenW , height : kHeaderViewH ) 22.

layout. sectionInset =UIEdgeInsets (top :0, left : kItemMargin , bottom :0, right: kItemMargin) 23. 24.

// 2.创建UICollectionView 25.

let collectionView =UICollectionView (frame :self . view . bounds , collectionViewLayout : layout) 26.

collectionView. backgroundColor =UIColor . white 27.

collectionView. dataSource =self 28.

collectionView. delegate =self 29.

collectionView. autoresizingMask =[.flexibleHeight ,. flexibleWidth ] 30.

31.

collectionView . register (UINib (nibName :"CollectionNormalCell" , bundle :nil ), forCellWithReuseIdentifier: kNormalCellID)

32.

collectionView . register (UINib (nibName :"CollectionPrettyCell" , bundle :nil ), forCellWithReuseIdentifier: kPrettyCellID)

33.

collectionView . register (UINib (nibName :"CollectionHeaderView" , bundle :nil ),

forSupplementaryViewOfKind :UICollectionElementKindSectionHeader , withReuseIdentifier : kHeaderViewID)

34.

35. return collectionView

36. }()

37.

38. // MARK: 系统回调

39. override func viewDidLoad(){

40. super . viewDidLoad ()

41.

42. setupUI()

43. loadData()

44. }

45. }

46.

47. // MARK:- 设置UI 界面内容

48. extension BaseAnchorViewController {

49.

func setupUI(){ 50.

view. addSubview (collectionView ) 51.

} 52.

53.

func loadData(){ 54.

} 55.

} 56.

57.

58.

59.

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

BaseAnchorViewController :UICollectionViewDataSource , UICollectionViewDel egate , UICollectionViewDelegateFlowLayout {

61. func numberOfSections(in

collectionView :UICollectionView )->Int {

62. return baseVM. anchorGroups . count

63. }

64.

65. func collectionView(_ collectionView:UICollectionView ,

numberOfItemsInSection section:Int )->Int {

66. return baseVM. anchorGroups [section ].anchors . count

67. }

68.

69. func collectionView(_ collectionView:UICollectionView ,

cellForItemAt indexPath:IndexPath )->UICollectionViewCell {

70. // 1.获取Cell

71. let cell = collectionView. dequeueReusableCell (withReuseIdentifier : kNormalCellID , for : indexPath) as ! CollectionNormalCell

72.

73. cell. anchor =

baseVM . anchorGroups [indexPath . section ].anchors [indexPath . item ]

74.

75. return cell

76. }

77.

78. func collectionView(_ collectionView:UICollectionView ,

viewForSupplementaryElementOfKind kind:String , at

indexPath :IndexPath )->UICollectionReusableView {

79. // 1.取出headerView

80. let headerView =

collectionView . dequeueReusableSupplementaryView (ofKind : kind, withReuseIdentifier : kHeaderViewID, for :

indexPath ) as ! CollectionHeaderView

81.

82.

headerView. group = baseVM. anchorGroups [indexPath . section ] 83.

84.

return headerView 85.

} 86.

87. func collectionView(_ collectionView:UICollectionView , layout collectionViewLayout :UICollectionViewLayout , sizeForItemAt indexPath :IndexPath )->CGSize {

88. return CGSize (width : kItemW, height: kNormalItemH)

89. }

90.

} 让RecommendViewController&AmuseViewController集成子

BaseAnchorViewController

修改对应的代码即可