视频频道页面重构总结

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 1.2k 阅读时长 ≈ 1 分钟

By Long Luo

一、重构前的一些缺点

  1. 频道显示在 VideoListActivity 实现的，代码结构不够清晰；
  2. 频道页面需要根据不同频道目前存在矩阵式显示和列表式显示2种方式，矩阵式显示嵌入在 ListView 中实现的，造成加载时绘制矩阵式页面需要更长的时间；
  3. 后续频道页面会参考第三方视频应用，不同频道会有不同的展示方式，而目前功能可扩展性不够好；

二、重构方案

重构方案:

  1. 将频道页面独立出来，新建一个 ChannelListActivity ，作为所有频道页面的 Activity ，负责所有频道界面的绘制，便于后续扩展；
  2. 针对不同频道，具有不同的布局方式，比如对于需要矩阵式显示的频道，使用矩阵式布局；
  3. 矩阵式布局，替换原有的 ListView 加 GridView 显示，提高加载速度；

三、具体实现

技术实现方案如下所示：

  1. 新建 ChannelListActivity ，在 VideoListActivity 中用进入频道页的接口替换原有的接口，将相关处理在 ChannelListActivity 中实现；
  2. 根据传入的频道ID不同，使用setContentView()加载不同的布局方式，实现不同频道不同布局显示；
  3. 新建 ChannelGridAdapter ，替换原有的 ChannelListAdapter 加 ChannelGridListAdapter 方式，提高加载速度；

四、数据对比

我们通过 TraceView 工具比较前后2种方案的区别：

4.1 启动时间：

比较两者启动时间，可以看出重构之后的方案是有大概20ms的提升。

Startup Time

4.2 TraceView对比：

通过 DDMS TraceView 工具，我们再比较下2者性能上的区别：

4.2.1 重构之前：

重构之前的在绘制页面时需要绘制 ListView ，然后在每一个 List 中在绘制 GridView ，在 TraceView 获取到的数据如下：

ChannelListAdapter
ChannelGridListAdapter

从以上可以分析，在 ChannelListAdapter 的 getView() 就占据了1.0%的 Incl Cpu Time , GridView 的 getView() 占据了6.9%的 Incl Cpu Time ，合计占用了7.9%的 CPU Time。

4.2.2 重构之后：

重构之后，我们仅需要在 ChannelGridAdapter 中绘制 View，测量数据如下：

ChannelGridAdapter

从上图可以看出，getView() 占据的 CPU 时间仅为3.2%，效率大大提高。

文章修改历史

  • Created by Long Luo at 2014/7/1 15:45:01
  • Completed by Long Luo at 2014/7/2 14:42:29
  • Modified by Long Luo at 2018年9月27日22点40分 at Hangzhou, China.
  • 修改图片图床 2024.03.03 in Shenzhen.