当前位置:首页 >> 互联网 >>

iOS培训-斗鱼直播APP之娱乐基本展示_图文

玩转【斗鱼直播 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.

privatelet privatelet privatelet privatelet privatelet

kItemMargin :CGFloat=10 kItemW =(kScreenW -3* kItemMargin)/2 kNormalItemH = kItemW *3/4 kPrettyItemH = kItemW *4/3 kHeaderViewH :CGFloat=50

privatelet kNormalCellID ="kNormalCellID" privatelet kPrettyCellID ="kPrettyCellID" privatelet kHeaderViewID ="kHeaderViewID" classAmuseViewController:UIViewController{ // MARK: 懒加载属性 fileprivate lazy var collectionView :UICollectionView={[unowned self]in // 1.创建布局 let layout =UICollectionViewFlowLayout() layout.itemSize =CGSize(width: kItemW, height: kNormalItemH) layout.minimumLineSpacing =0 layout.minimumInteritemSpacing = kItemMargin layout.headerReferenceSize =CGSize(width: kScreenW, height: kHeaderViewH) layout.sectionInset =UIEdgeInsets(top:0, left: kItemMargin, bottom:0, right: kItemMargin)

21. 22.

23. 24. 25. 26. 27. 28. 29. 30.

// 2.创建 UICollectionView let collectionView =UICollectionView(frame:self.view.bounds, collectionViewLayout: layout) collectionView.backgroundColor =UIColor.white collectionView.dataSource =self collectionView.delegate=self collectionView.autoresizingMask =[.flexibleHeight,.flexibleWidth]

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. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44.
?

return collectionView }() // MARK: 系统回调 override func viewDidLoad(){ super.viewDidLoad() setupUI() } } 实现数据源&代理方法 // MARK:- 遵守 UICollectionView 的数据源&代理协议 extension AmuseViewController:UICollectionViewDataSource,UICollectionViewDelegate { func numberOfSections(in collectionView:UICollectionView)->Int{ return8 }

1. 2.

3. 4. 5. 6.

7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

func collectionView(_ collectionView:UICollectionView, numberOfItemsInSection section:Int)->Int{ return4 } func collectionView(_ collectionView:UICollectionView, cellForItemAt indexPath:IndexPath)->UICollectionViewCell{ // 1.获取 Cell let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kNormalCellID,for: indexPath) cell.backgroundColor =UIColor.randomColor() return cell } }

请求数据&展示数据
接口描述 请求地址:http://capi.douyucdn.cn/api/v1/getHotRoom/2 请求参数:无参数 ViewModel 封装

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.

classAmuseViewModel{ fileprivate lazy var anchorGroups :[AnchorGroup]=[AnchorGroup]() } extension AmuseViewModel{ func loadAmuseData(finishedCallback :@escaping()->()){ NetworkTools.requestData(.get,URLString:"http://capi.douyucdn.cn/ api/v1/getHotRoom/2"){(result)in // 1.获取数据 guard let resultDict = result as?[String:Any]else{return} guard let dataArray = resultDict["data"]as?[[String:Any]]else{return} // 2.字典转模型 for dict in dataArray {

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,并且每组有对应的 HeaderView 不同:推荐界面第 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 :@escaping()->()){ NetworkTools.requestData(.get,URLString:URLString, parameters: parameters){(result)in // 1.获取数据

9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21.

guard let resultDict = result as?[String:Any]else{return} guard let dataArray = resultDict["data"]as?[[String:Any]]else{return} // 2.字典转模型 for dict in dataArray { self.anchorGroups.append(AnchorGroup(dict: dict)) } // 3.回调数据 finishedCallback() } } }

抽取懒加载 UICollectionView 两个控制器都需要懒加载一个 UICollectionView 并且 UICollectionView 需要设置的内容和尺寸也是一致的 实现数据源&代理 无论是推荐还是娱乐都需要成为 UICollectionView 的数据源&代理 如果子类有不同的实现,可以让子类自己实现

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.

privatelet kItemMargin :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" classBaseAnchorViewController:UIViewController{ // MARK: 懒加载属性 var baseVM :BaseViewModel! lazy var collectionView :UICollectionView={[unowned self]in // 1.创建布局 let layout =UICollectionViewFlowLayout()

18.
kNormalItemH)

layout.itemSize =CGSize(width: kItemW, height: layout.minimumLineSpacing =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.bounds, collectionViewLayout: layout) collectionView.backgroundColor =UIColor.white collectionView.dataSource =self collectionView.delegate=self collectionView.autoresizingMask =[.flexibleHeight,.flexibleWidth]

19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 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. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48.

return collectionView }() // MARK: 系统回调 override func viewDidLoad(){ super.viewDidLoad() setupUI() loadData() } } // MARK:- 设置 UI 界面内容 extension BaseAnchorViewController{

49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60.

func setupUI(){ view.addSubview(collectionView) } func loadData(){ } }

// MARK:- 遵守 UICollectionView 的数据源&代理协议 extension BaseAnchorViewController:UICollectionViewDataSource,UICollectionViewDel egate,UICollectionViewDelegateFlowLayout{ func numberOfSections(in collectionView:UICollectionView)->Int{ return baseVM.anchorGroups.count } func collectionView(_ collectionView:UICollectionView, numberOfItemsInSection section:Int)->Int{ return baseVM.anchorGroups[section].anchors.count } func collectionView(_ collectionView:UICollectionView, cellForItemAt indexPath:IndexPath)->UICollectionViewCell{ // 1.获取 Cell let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kNormalCellID,for: indexPath)as!CollectionNormalCell cell.anchor = baseVM.anchorGroups[indexPath.section].anchors[indexPath.item] return cell } func collectionView(_ collectionView:UICollectionView, viewForSupplementaryElementOfKind kind:String, at indexPath:IndexPath)->UICollectionReusableView{ // 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.group= baseVM.anchorGroups[indexPath.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 修改对应的代码即可


相关文章:
iOS培训-斗鱼直播APP之娱乐基本展示_图文.doc
iOS培训-斗鱼直播APP之娱乐基本展示_互联网_IT/计算机_专业资料。本文档
iOS培训-斗鱼直播APP之游戏推荐展示.doc
iOS培训-斗鱼直播APP之游戏推荐展示_计算机软件及应用_IT/计算机_专业资料。本文档的主要内容是小码哥教育iOS培训项目都已直播APP之游戏推荐展示的相关知识点讲解。 ...
iOS培训课件斗鱼直播APP之获取APP图片资源.doc
iOS培训课件斗鱼直播APP之获取APP图片资源 - 文档均来自网络,如有侵权请
@iOS培训-斗鱼直播APP之弹出房间界面.doc
@iOS培训-斗鱼直播APP之弹出房间界面 - 玩转【斗鱼直播 APP】系列之弹
iOS培训-斗鱼直播APP之首页布局分析实现.doc
iOS培训-斗鱼直播APP之首页布局分析实现_计算机软件及应用_IT/计算机_专业资料。本文档的主要内容是小码哥教育iOS课程的斗鱼直播APP之首页布局分析实现的相关知识点。...
iOS培训-iOS直播APP之播放篇.doc
iOS培训-iOS直播APP之播放篇_计算机软件及应用_IT/计算机_专业资料。本文档的主要内容是小码哥教育iOS培训项目iOS直播APP之播放篇的详细讲解。 ...
iOS培训-iOS直播APP之原理篇.doc
本文档的主要内容是小码哥教育iOS培训项目iOS直播APP之原理篇的详细讲解。 ...二、了解直播 热门直播产品 映客,斗鱼,熊猫,虎牙,花椒等等 直播效果图 1.一...
原理篇|如何快速地开发一个完整的iOS直播App_图文.pdf
原理篇|如何快速地开发一个完整的iOS直播App_互联网_IT/计算机_专业资料。原理篇|如何快速地开发一个完整的iOS直播App 今年移动直播行业的兴起,诞生...
ios培训ppt_图文.ppt
ios培训ppt_职业技术培训_职业教育_教育专区。IOS基础介绍 什么是IOS开发 了解...? 4.众多的应用(AppStore)。 学习资料以及一些效果展示 1.http://www.cocoa...
斗鱼直播产品分析报告_图文.pdf
娱乐、关注、 发现等进入到直播间,选择对于的分区进入直播间和主播互动或打 赏...iOS培训-斗鱼直播APP之娱... 暂无评价 11页 免费 阿里巴巴商户产品视频展....
播放篇|如何快速地开发一个完整的iOS直播App_图文.pdf
播放篇|如何快速地开发一个完整的iOS直播App 本篇主要讲解的是直播app中,
IOS培训教材_图文.ppt
IOS培训教材_计算机软件及应用_IT/计算机_专业资料。什么是IOS开发了解IOS IOS...? 4.众多的应用(AppStore)。 4/15/2015 学习资料以及一些效果展示 1.http:...
毕业论文《基于iOS及Objective-C开发语言娱乐、学习app....doc
毕业论文《基于iOS及Objective-C开发语言娱乐、学习app设计》_工学_高等教育_教育专区。摘 要 苹果 iOS 是由苹果公司开发的手持设备操作系统。 苹果公司最早于 ...
基于IOS的网上商城APP设计与实现_图文.doc
龙源期刊网 http://www.qikan.com.cn 基于 IOS 的网上商城 APP 设计与实现 作者:吴大非 张欢 来源:《电脑知识与技术》2016 年第 28 期 摘要:伴随着 4G ...
网络直播APP趋势分析_图文.doc
QuestMobile 数据显示,从网络直播 APP 行业 MAU 趋势看,已基本定型划成 两个...iOS 端活跃率排名前三的依旧是映客、斗鱼和全民 TV,分别为 63.6%、54.1% ...
飞一般直播APP创意策划文案_图文.doc
飞一般直播 APP 创意策划书 班级:2015 级文化...近一半为泛娱乐直播有 68 个,其次为游戏直播 ...斗鱼,到红衣教主周鸿的花椒直播、 国民老公王...
直播营销案例分析报告_图文.pdf
但自 2013年起,借助移动互联的大形势,直播平台来 势汹汹,先有斗鱼、虎牙等...“直播”讨论内容与体育、娱乐、热点新闻、社会热点话题紧密相关。直播APP与明星...
IOS未来发展趋势项目报告_图文.ppt
苹果ios开发培训 Ios应用程序开发 IT移动互联网行 ...IT应用的移动化 AR: iButterfly(视频) 娱乐: ...app@myjy.org.cn 地址:成都市一环路东一段159号...
映客直播iOS-App-性能优化_图文.pdf
2015.3 ~ 至今 映客,iOS 开发 大纲 1、直播大厅的优化 2、直播间的优化 3、私信消息模块的优化 直播大厅 直播列表的刷新 问题: ? 作为 App 的入口,其高...
网络直播PPT_图文.ppt
网络直播PPT_娱乐时尚_生活休闲。201517140106 刘...院的数据显示,截至今年6月,直播App渗透率环...传统的直播平台的中的top1YY和top2 斗鱼的...