android ui分析 - 今日头条UI主界面

Dump View Hierarchy for UI Automator

上篇文章使用Hierarchy Viewer工具分析了今日头条UI的整体结构，由分析结果可以看到，主界面(也就是MainActivity)里边的逻辑是最复杂的，嵌套了好几层的内容，和新闻/资讯相关的所有内容都在这个Activity里边。其它的Activity职责相对来说比较简单(或者说清晰)，即一个Activity就做一件事情(SplashActivity就是开屏的内容，BaseSettingActivity就是设置，而BrowserActivity就是载入不同的网页)。

但是如果我们想分析主界面的UI结构该怎么办呢？两种选择：

Hierarchy Viewer的tree view模式

其实这个模式更适合用于分析layout，来进行优化

Dump View Hierarchy for UI Automator

这个模式则更加适合用于具体界面的UI结构分析，很直观

UI主界面结构分析

主界面有4个tab，分别是”首页”(有时会变成”刷新”)，”话题”，”发现”，”我的”。如下图所示：

主界面整体结构

按照由整体到局部的顺序来分析，主界面使用了流行的tab布局，并且4个tab之间不能左右滑动。

这种布局的一般实现方式是：tabhost+fragment，具体可以参考Support v4 demos里的FragmentTabs。

对每个tab界面的分析也基本验证了这个猜想，不过有一些细节需要注意一下，见截图

第一个tab对应的截图



后三个tab对应的截图



第一个tab的实际内容是在id为main_layout的RelativeLayout中，而后边的tab的内容则都在tabhost的第一个子元素里(截图并没有显现出来，id为realtabcontent)。关于这一点目前我也不清楚是使用什么技巧实现的，希望有朋友明白的可以告诉我。但是这个小问题并不影响整体分析。

需要注意的一点是，tabhost(4个tab都是如此)的最后一个子元素是一个FrameLayout，其id为main_top_video_holder。根据其id可以猜测它的作用是用于在主界面的最上边显示一个插屏的视频广告。

“首页”结构

先来一张”首页”的整体结构，其实就是id为main_layout的RelativeLayout的子元素




UI上分为两大块，蓝色线框的头部区域与绿色线框的内容区域。

头部区域是一个可以左右滑动分类，选择不同的分类后，下边的内容区域会显示对应的内容。

通过分析其uix文件可以发现，头部的分类是用HorizontalScrollView实现的，而下边的内容区域整个是一个ViewPager，用于和头部的分类联动。

内容区域的内容列表则是一个ListView，注意其item是有不同样式的，这个在实现时是需要一些技巧的，具体可以查看相关的文档。

至于top_view_holder则是一个占位符，根据其名字猜测也是某个时候用于播放视频的。

我画了一张图来总结上面的内容

“话题”结构

“话题”的整体结构是id=realtabcontent的FrameLayout的子元素



具体分析方法与上边一样，直接上结果

“发现”结构

“发现”的整体结构也是id=realtabcontent的FrameLayout的子元素



这个页面比较简单，直接上结果

“我的”结构

最后是”我的”，它同样也是id=realtabcontent的FrameLayout的子元素



其对应的结果如下

小结

各个部分的分析结果见上面的内容

app里边好多地方用到了WebView，这个在很大程度上简化了客户端UI的开发(至于H5页面的适配则是另外一件事了)

我并没有去反编译源代码，只是自己猜测主界面当中用了大量的Fragment。通过分析UI布局，也体会到Fragment分模块开发UI的好处。否则所有的都在一个Activity里，代码肯定混乱的一塌糊涂。