前言
至于怎么使用Reveal分析App我就不多说了,帖子也是一大把, 但是前提是你的手机是越狱的, 不然也是白搭, 我的手机是6p, 买来就越狱, 没升过级, 现在还真舍不得升级😀, 废话这么多, 开始吧
分析的这款是非常非常非常重量级, 也是大家经常用的, 融合了所有的功能点的一款App, 那就是TB, 当然了不可能分析所有页面的, 只分析一些我们经常用看到的页面, 首页啊, 宝贝详情啊,购物车啊等等...
先看首页的吧, No Picture, Say Mao Xian
确实,Window根控制器是一个TabBarController, tabBar的子控制器意识一个导航控制器, 现在的主流架构, tabBar+nav, 通常我们的做法是, nav的根控制器就是我们要显示的控制器了, 而这款App的做法是根控制器是一个ToolBar控制器, 其他的控制器我还没有看是不是这样的结构, 我们稍后验证, 是否全部的导航控制器的根控制器都是这个ToolBar控制器, 导航栏是自定义的, 原本的导航栏被隐藏了, 应该就是上面那一块NavBar了把, 虽然我在我写项目的时候, 也是隐藏了系统的导航栏, 但没有去看视图层, 到底是是隐藏到哪里去了, 应该就是这个样子的吧(😋, 猜测哈), 下面我们看看其他的TabBar的子控制器的视图层
其他的三个也都看过了, 就不截图了, 确实是nav的根控制器是toolBar, toolBar上然后才是显示我们需要显示的控制器
让我们继续回到主页去分析
以前我模仿过百度糯米的主页面, 当时是用TableView写的, 上面也有很多不规则的组件, 跟淘宝主页面有点类似, 我也是自定义每一个组件, 但并没有放在Cell里, 把所有组件装在一起, 成一个控制器, 作为头部视图这么做的, 后来看到糯米的商品排列可以切换的, 由横条变为方块, 此时才知道, 用tableView实现这个效果, 有点复杂了, 用CollectionView正好, 切换一下布局就可以了(UICollectionView确实是一个强大的控件, 当然也TableView复杂), 如果是你, 遇到这样的页面, 你会怎么布局呢, 可以评论, 我们一起探讨😀
当你知道用什么样的控件来布局整体的时候, 那下面就好做了, 定义多个不同的Cell, 来根据数据去显示对应的Cell即可, 当然了,这中间的逻辑有多复杂, 自己实现以下就知道了, 牛的人说的就很轻松, 但是对于初学者而言, 还是要下一番功夫的
留心的人应该会发现中间有的Cell的灰色, 轮播图Cell与下面的那个很多个按钮的Cell有一个灰色的Cell, 灰色的表示在视图上没有显示的, 我猜想的是留着给中间间隔用的, 往下看, 与头条之间也有一个间隔Cell, 也是没有显示的, 便利店一小时达上面的那个间隔是这个cell上面的, 并不是单独的, 这个Cell是刷新数据后出来的, 动态显示的, 其余的这些应该是都会显示的, 抢购的Cell上面就有一个间隔的Cell, 那个在左边的呈现白色, 确实是显示出来的, 能看的出来, 这些个Cell中间都有一个间隔Cell, 接着看下一屏幕
再往下拉, 就都是商品, 都是同一种商品的Cell了
整体下来应该是自定义布局的, 每一个Cell单独写, 还是很容易的, 但是要放在这同一个页面, 怎么去显示, 这儿逻辑怎么判断, 还需要花点时间琢磨一下, 不然硬着头皮写下去, 代码也就肯定跟......一样, 我相信这不是你想要的, 我一惯的做法, 用数据去显示控件, 控制好数据, 也就控制了页面, 这个页面, 返回了很多内容, 当然, 这么大的公司, 服务架构一起返回的数据格式, 肯定是相当易于组合成一个数组去显示这个页面, 但是在小公司, 后台没有那么强大的情况下, 还是需要移动端的人员, 去合理处理数据之后再显示页面
除了商品的Cell之外, 每一个Cell的上点击某一个位置, 处理的事情, 都是各不相同的, 至于怎么封装, 怎么样优雅的实现这里的内容, 不在本篇的讨论范围之内(因为我也不知道, 我也不会😀)
里面的每一个控件是什么样的视图层次结构就不多看了, 都是自定义的View, 当然了, 我们在写页面的时候, 控件的多少, 要与整个页面的逻辑息息相关, 有人说, 控件越少越好, 这个间隔Cell也是完全可以放在每一个Cell里面的, 但是还是放在了外面, 单独成行, 这样更易于我们去配置, 空格大一点小一点, 改个数字就好了, 放在Cell里面可能就需要调布局了, 如果产品要把间隔调大一点, 情况可想而知
下面我们看看第二个页面 *淘(不是屏蔽了, 我就是打的星号)
上面我已有图
本以为就一个TabelView, 只是咋也没想到, 打开视图层后, 吓死宝宝了, 这么层, 我也不知道是用干嘛的, 长时间的迭代, 或许每一层都有不同的用处
整一个暂且就作为tableView吧, 两种类型的Cell, 第二个Cell
本以为是cell嵌套一个TabeView来着, 不是的, 加的自定义的View在ContainerView上
第一种Cell就是类似朋友圈的那种布局了, 我也实现过, tabelViewCell嵌套的CollectionView, 但是它不是我想的那种
里面的View都是同一个类型的View, 我感觉这样的实现起来应该是蛮复杂的, 用CollectionView是有什么不好么?(这一点有点疑惑)
确实, 是我想的简单了, 这里面的Cell不是两种这么简单
看上面有一个导航栏, 真是傻了, 我说下面的ScrollView干嘛的 来滚动切换TableView的, 但是视图层还是挺深的(尴尬!),上面有动态, 上新, 视频, 热文等等多种样式的(心好累, 这么深, 看的都想想😪了....)
细细想来, 这个页面确实不简单
换个页面, 看一下购物车的
下面的两个一排,是一个Cell
点击编辑之后
其他的Cell就不显示了, 该怎么做?我觉得控制数据源显示的行数, 应该是这个办法吧
个人中心
很清晰能看到是用什么搭建的这个页面
看看商品详情的吧
scrollView里放TableView和一个自定义的图片View
每一行, 每一个间隔都是一个Cell, 这个值得深思, 益处多多
当往上拉 查看图文详情的时候, 我猜是用了自定义穿转场了, 也有可能不是, 显示的是用了一个WebView
点击立即购买
只是没想到这个View是加载TabBarView上的, 或许这样更利于传值, 解耦合吧
我的足迹 下拉就会出来
这个ScrollView上的显示的ItemCell应该是做了循环利用了, 最多只有5个Cell显示出来, 即使我滑到了14个的时候
先看这些吧, 这里面的复杂度还是很大的, 逻辑结构当然是看不到, 从这些页面的布局去推理为什么, 还是很值得去做的一件事情, 只身一人想完整的做出这一个项目, 那肯定要下很大的功夫, 也并非不可能的, 世上无难事只怕有心人!
现在只是简单的看了一下几个页面, 这个App里的页面, 相比我们现在看到了, 还只是冰山一角, 慢慢看吧
给自己先定一个小目标, 实现一个首页, 或者详情页再说😀
(如果真写了,代码会贴出来的哈, 关注我吧😋)
或者说你想看哪一款App某一个页面的搭建布局, 而你没有办法像我这样看的话, 可以评论留言喔
喜欢就是点个赞吧(国庆还是在家比较合适!)
