布局优化必备 Hierarchy Viewer 工具使用

导读:

不合理的布局会使我们的应用程序UI性能变慢,Android 自带的 Hierarchy Viewer 工具能够可视化的角度直观地获得UI布局设计结构和各种属性的信息,帮助我们优化布局设计.让我们更好地检视和设计用户界面(UI),绝对是UI检视的利器.

平常没事想学习别人APP的布局设计,也可以通过这个工具查看

官方Hierarchy Viewer使用文档

工具打开方式:

1. 本地安装SDK目录->sdk->tools->hierarchyviewer.bat(版本低,可能有未知bug)或点击同级目录的monitor.bat
2. Android Studio : 工具栏->Tools->Android->Android Device Monitor(官方推荐)
3. 在命令行输入 hierarchyviewer(可用,但是启动的是版本低的)

工具使用(第二种打开方式为例):

一、设备连接(模拟器设备版本需要设置为 Android 4.1,真机需要手机root权限)

成功后左侧Windows小手机会看到设备信息

二、点击Window->Open Perspective->Hierarchy View

现在应该会看到如图界面,否则点击工具栏Window -> Reset Perspective 重启默认布局

• Tree View（中心）：显示视图层次结构的树视图。 您可以使用鼠标拖动并放大树，底部的缩放控件。 每个节点表示它是View类名和ID名称。双击节点或者点击右上角小地球可以查看实际布局显示的内容

• Tree Overview（右上）：为您的应用程序的完整视图层次结构提供鸟瞰图。 移动灰色矩形以更改树视图中可见的视口。

• Layout View（右下角）：显示布局的线框视图。 当前所选视图的轮廓为红色，其父视图为浅红色。单击此处的视图也会在树视图中选择它，反之亦然。

• hierarchy view 视图层次结构是布局的快照，因此不会自动更新。 要更新层次结构视图，点击右上角蓝色金字塔Reload the view hierarchy

• 要想保存Tree View,点击右上角蓝色金字塔左边小文档,左边是PNG格式,右边是PS的PSD格式

三、双击左侧Window小手机设备信息对应的我们的app的包名,就能看见TreeView显示我们项目的View层级视图(切换到其他app同理操作)

四、随便选择一个节点,点击右上的Profile Mode按钮,可以获取到布局绘制的时间,如图

①绿色:表示该View的此项性能比该View Tree中超过50%的View都要快；例如,一个绿点的测量时间意味着这个视图的测量时间快于树中的视图对象的50%

②黄: 表示该View的此项性能比该View Tree中超过50%的View都要慢；例如,一个黄点布局意味着这种观点有较慢的布局时间超过50%的树视图对象。

③红: 表示该View的此项性能是View Tree中最慢的；例如,一个红点的绘制时间意味着花费时间最多的这一观点在树上画所有的视图对象。

布局性能分析

红色节点是代表应用性能慢的一个潜在问题，下面是几个例子，如何来分析和解释红点的出现原因？

1. 如果在叶节点或者ViewGroup中，只有极少的子节点，这可能反映出一个问题，应用可能在设备上运行并不慢，但是你需要指导为什么这个节点是红色的，可以借助Systrace或者Traceview工具，获取更多额外的信息；

2. 如果一个视图组里面有许多的子节点，并且测量阶段呈现为红色，则需要观察下子节点的绘制情况；

3. 如果视图层级结构中的根视图，Messure阶段为红色，Layout阶段为红色，Draw阶段为黄色，这个是比较常见的，因为这个节点是所有其它视图的父类；

4. 如果视图结构中的一个叶子节点，有20个视图是红色的Draw阶段，这是有问题的，需要检查代码里面的onDraw方法，不应该在那里调用。

总结:

本篇文章到此结束,欢迎关注,后续有补充的会即使更新,有问题也欢迎评论,共同成长

布局优化神器 include 、merge、ViewStub标签详解