仿斗鱼界面项目架构分析

写在前面:赶在2016年结束前总结总结最近学习的知识。

申明:此项目为参考GitHub上是模仿斗鱼部分界面的一个项目(并不是斗鱼真正的源码)。我记录了一下个人对此项目的一些看法,其实我只是大自然的搬运工。

 一,界面预览

作为一个像我这样的小白来说看到这样的界面顿时感觉如果是我来做的话是无从下手的,但无论多么复杂的项目都是通过一个模块一个模块拼接而成的。下面让我由简到繁来剖析项目实现过程。

  首先,我们可以看到应用下方有四个选项卡,通过点击某个选项卡来切换不同页面。这个比较简单,我就不做详细介绍。

  接下来,我们看首页部分

分析:上图中的模块一和模块四都是固定的比较好办,而模块二和模块三是连动的,点击了模块二中的某个选项卡,模块三也需要切换视图。

二,构建选项卡

1,根据由简到繁的原则,我们继续细分,先把模块三抛开,将模块二四个选项卡做出来。

2,类似这种选项卡切换的效果当前移动端应用是可谓是比比皆是,说不定什么时候我们就有这样的开发需求。

3,特别是项目规模达到一定程度后,类似这种选项卡很有可能在项目中会得到重复利用,因此我们又可以将选项卡的项目部分抽象出来,以方便后续使用。关于选项卡的个数,显示文本,位置都可以交给初始化器,创建本类实例时指定。同时设置相关代理,至于代理做什么我们目前还不知道,只是留下一个协议(类似Java的接口),让其实现类去完成代理的一些方法。如此一来这个类既可以提高复用性,同时具备可拓展性。

三,构建滚动视图

1,创建滚动视图原理与选项卡类似,不同的是在这里先创建一个UICollectionView,根据你所需要加入几个滑动页面将其作为子视图添加到UICollectionView中。

2,要从第一页滑到第二页其实类似于做了一个scrollView,设置相关属性让它每次滑动都是滑动整页,并不会出现滑动了一点两个页面都显示了一部分。

四,设置选项卡与滚动视图联动

效果如下:

解析:先从点击上方的选项卡也就是我们的label开始需要改变下面的视图

1,给label添加点击手势并调用其触发方法

1  // 5.给Lable添加手势
2  label.isUserInteractionEnabled = true
3  //Lable点击后先触发本身的监听方法
4  let tapGes = UITapGestureRecognizer(target: self, action: #selector(titleLabelClick(_:)))
5  label.addGestureRecognizer(tapGes)

2,点击label后先执行本身一些业务,(例如:改变label字体颜色等),再通知代理执行代理方法

1 @objc fileprivate func titleLabelClick(_ tapGes: UITapGestureRecognizer) {
2     //...
3
4     // 7.通知代理,代理具体业务交给其实现类
5     delegate?.pageTitltView(self, selectedIndex: currentIndex)
6 }

3,通过最后一层代理才是真正进行页面切换的业务逻辑

1 // MARK:- 遵守PageTitleViewDelegate协议
2 extension HomeViewController : PageTitleViewDelegate {
3     func pageTitltView(_ titleView: PageTitleView, selectedIndex index: Int) {
4         pageContentView.setCurrentIndex(index)
5     }
6 }

小结:通过上面的效果图中我们不难发现,通过点击选项卡可以切换视图,拖动下发视图同样可以切换视图并改变选项卡是否选中的状态。这是如何实现的呢?其实和上面的原理是一致的,都是通过先触发本身控件的监听方法再通知代理调用对方的某些方法。做到这一步,这个项目的大概雏形也出来了。

五,系统控件拓展

 1 /*
 2  对系统的一些控件进行拓展方便项目中使用
 3  */
 4
 5 extension UIColor {
 6
 7     // MARK:- 遍历构造器
 8     convenience init(r: CGFloat, g: CGFloat, b: CGFloat) {
 9         self.init(red: r/255.0, green: g/255.0, blue: b/255.0, alpha: 1.0)
10     }
11
12     // MARK:- 随机色
13     class func randomColor() -> UIColor {
14         return UIColor(r: CGFloat(arc4random_uniform(256)), g: CGFloat(arc4random_uniform(256)), b: CGFloat(arc4random_uniform(256)))
15     }
16 }

解析:当我们在看别人项目源码的时候发现他调用了一个系统本没有的方法,这个时候第一反应应该想到是否是导入了第三方库或是自己对系统某个对象进行了拓展。

优点:通过这种方式我们可以避免调用系统又臭又长的方法和其他一些便利的方法。

缺点:同时这种方式不能滥用,不然一个类中大都是程序员自己定义的方法,会降低代码的可读性。一个项目往往是多个人合作完成的,你能理解的别人未必能。

六,第三方库的封装

 1 // MARK:- 方法枚举类型
 2 enum MethodType {
 3     case get
 4     case post
 5 }
 6
 7 // MARK:- 网络请求工具类
 8 class NetworkTools {
 9     class func requestData(_ type : MethodType, URLString : String, parameters : [String : Any]? = nil, finishedCallback: @escaping (_ result : Any) -> ()) {
10
11         // 1.获取类型
12         let method = type == .get ? HTTPMethod.get : HTTPMethod.post
13
14         // 2.发送网络请求
15         Alamofire.request(URLString, method: method, parameters: parameters).responseJSON { (response) in
16             // 3.获取结果
17             guard let result = response.result.value else {
18                 print(response.result.error)
19                 return
20             }
21             // 4.将结果回调出去
22             finishedCallback(result)
23         }
24     }
25 }

解析:框架与代码的分离

1,无论是哪种语言在开发中总是避免不了需要引入第三方框架,例如本例中需要引入第三方库之一Alamofire。我们在这里对其进行封装是为了使我们的代码与框架进行解耦。

2,在一个项目中或多或少需要引用各种各样的框架使我们的项目更加强健,稳固。同时,我们也不能过分依赖于框架,使我们的项目过分的与框架耦合在一起。

3,假如,我们发现在我们项目中某套框架存在很大的漏洞,又或者是有一套全新的更加完善的框架出现,需要替换框架时,此时我们才发现我们的代码与框架已经紧密耦合在一起了。这个时候如需要替换的话,对我们的成本来说无疑是巨大的打击。

4,封装后在项目其他文件中便不在需要引入Alamofire库,要使用它的方法只需调用我们自己封装的方法,需要替换框架时再重新实现相关方法即可。

七,总结:

1,对于我这种小菜鸟如果要我来开发这个项目恨不得用一个类写完所有的方法然后不停的调用即可。但是....大家都知道。如果一个项目的架构以十分来评论的话我想我的思维深度恐怕只有两分。

2,之前小打小闹也开发过几个练手的小项目一股脑的写下去,在一个地方卡住了,整个项目也就废了,此时对于一个项目的整体架构与思维模型显得尤为重要。

3,不得不吐槽下swift语言版本差异太大很多方法对象改变很大,同时在使用Xcode开发过程中有些控件的属性是在工具面板中配置的而有些是在代码中配置的,在项目调试过程中很难发现问题。索性我更愿意在开发中控件完全由代码生成,总之,综合上述因素,给我们开发带来了不少困扰,不知道你们有何感想。

4,差点忘记提供链接:https://github.com/coderwhy/DouYuZB    大家可以下载源码感受下原作者的思维深度。

写给自己:革命尚未成功,2017更要努力!

时间: 2024-10-04 15:43:33

仿斗鱼界面项目架构分析的相关文章

MVP架构-Android官方MVP项目和响应式MVP-RxJava项目架构分析对比解读

介绍 MVP这个架构一直是Android开发社区讨论的焦点,每个人都有自己的分析理解众说纷纭.直到GitHub上Google官方发布用MVP架构搭建的项目.感觉是时候分析了. MVP架构简介 这不是本文重点,所以摘抄自李江东的博文 MVP架构简介 对于一个应用而言我们需要对它抽象出各个层面,而在MVP架构中它将UI界面和数据进行隔离,所以我们的应用也就分为三个层次. View:对于View层也是视图层,在View层中只负责对数据的展示,提供友好的界面与用户进行交互.在Android开发中通常将A

storm项目架构分析

storm是一条一条数据处理,spark是一批数据处理的,storm才是真正意义的实时数据处理. 1.fileBeat类似flume用来采集日志的,fileBeat是轻量级的,对性能消化不大,而flume比较消化性能. 2.fileBeat会实时监控前端机,然后把数据实时写到Kafka集群里面. 3.storm对kafka里的数据进行实时处理,在处理的时候与redis进行交互,因为有些关联的数据日志里是不全的. 4.处理完之后最终把数据写人mysql里,再到web图像进行展现. 为了方便演示 实

Java企业级电商项目架构演进之路 Tomcat集群与Redis分布式百度云实战分享

muke慕课实战课程分享QQ313675301 新增课程: Java企业级电商项目架构演进之路 Tomcat集群与Redis分布式百度云实战分享 后端开发: 1.高级java软件架构师实战培训视频教程2.大型SpringMVC,Mybatis,Redis,Solr,Nginx,SSM分布式电商项目视频教程3.Spark Streaming实时流处理项目实战4.Java校招面试 Google面试官亲授5.Java开发企业级权限管理系统6.Java大牛 带你从0到上线开发企业级电商项目7.Java

项目架构开发:异常处理及日志

上一篇我们完善了多层开发的效率问题,传送门:项目架构开发:展现层(下) 这次我们完成架构的异常处理功能,异常处理一般都与日志分不开的,因为分析及定位问题需要一些详细信息: 稍微正规一点的公司,都会分开发.测试及生产环境.在本地及测试环境出BUG了,问题很好解决 调试跟踪问题,三下五除二就搞完了:但是在生产环境出问题,基本上是不允许直连数据库调试的: 这时候如何没有足够的异常信息参考,那你就悲催了,你等着加班熬夜吧. 为了解决这个问题,所以异常信息的捕捉及记录就显得非常重要了,一个完善的系统,出问

企业架构分析&设计模式 课程

高焕堂的招牌课程 企业架构分析.设计模式和App Framework/SDK开发方法 by 高焕堂 亚太地区Android技术大会 主席 洞庭国际智能硬件检测基地 & 中云企业大数据中心(IDC) 首席架构师 微博:@高焕堂_台北                                课程简介: 本课程依据企业软件开发流程里的先后环节来作教学.主要目标在于介绍和阐述各环节的思想.模式.技术和实践要点.让学员能熟悉当今云计算&大数据潮流下,终端与云端的(业务)架构分析.API设计.框

Qualcomm Android display架构分析

Android display架构分析(一) http://blog.csdn.net/BonderWu/archive/2010/08/12/5805961.aspx http://hi.baidu.com/leowenj/blog/item/429c2dd6ac1480c851da4b95.html 高通7系列硬件架构分析 如上图,高通7系列 Display的硬件部分主要由下面几个部分组成: A.MDP 高通MSM7200A内部模块,主要负责显示数据的转换和部分图像处理功能理,如YUV转RG

浅谈工业级物联网项目架构设计及实施

[说明]这是发表在<程序员>电子刊10月B架构专题文章 网页链接:http://www.csdn.net/article/2015-10-31/2826093 摘要:互联网+和物联网由于发展的侧重点不同,在做架构设计上肯定有所不同.而以中小项目为主的物联网项目,其实更看重的,一是系统稳定可靠,能保证系统长期稳定的运行.本文主要介绍工业级物联网项目的架构设计及实施. 前言 早在1999年就已经有了“物联网”这个概念,但是直到十年之后的2009年,IBM提出“智慧地球”的概念,才推动很多国家把物联

Cocos2d-x 3.0final 终结者系列教程04-引擎架构分析

从前有个跟我学Android的学生,老是问我: 沈老师,为什么Android中的窗口叫Activity,为什么要在onCreate方法中写setContentView(R.layout.main)? 我说: 你能不能按照我教你的实现一个窗口 第一步在AndroidManifest.xml中添加一个Activity标签 第二步写一个类继承Activity并覆盖onCreate方法 他说: 我想知道为什么要实现Activity和onCreate方法,之后我才能完成这个练习. 我说: 你实现了Acti

HRMS(人力资源管理系统)-从单机应用到SaaS应用-架构分析(功能性、非功能性、关键约束)-上篇

一.开篇 上一篇<HRMS(人力资源管理系统)-从单机应用到SaaS应用-系统介绍>我们已经详细的分析了HRMS系统具备的功能,并且从HRMS系统的概念.系统功能.HR行业管理现状及痛点.发展趋势及行业前景.行业内的服务提供商情况.HRMS系统的建设意义及价值等方面进行了系统化的分析梳理.我想大家已经对于HRMS系统的大体情况有了初步的了解,本篇将对HRMS系统的需求进行全方位的梳理(功能性需求.非功能性需求.系统约束等),这对于HRMS系统的架构设计来说是核心关键,是架构能否成功的前提.这也