UI检测（Hierarchy Viewer和Layout Inspector）

工具推荐

UI检测的工具，Hierarchy Viewer和Layout Inspector。

Hierarchy Viewer官方地址

Layout Inspector官方地址

虽然Hierarchy Viewer已经废弃了，但感觉还是有必要介绍一下的。

Hierarchy Viewer

工具打开方式

AS版本：3.3.2 打开方式：

• 本地安装SDK目录->sdk->tools->monitor.bat

老版的AS打开方式：

• 本地安装SDK目录->sdk->tools->hierarchyviewer.bat
• Android Studio : 工具栏->Tools->Android->Android Device Monitor
• 在命令行输入 hierarchyviewer

工具的使用

设备连接（真机需要手机root权限）

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

打开Hierarchy View

点击Window->Open Perspective->Hierarchy View

若期间出现此问题

选择使用本地IP，并关闭，重新启动即可

此时，应该会看到如下图了：

• Tree View：显示视图层次结构的树视图。 可以使用鼠标拖动并放大树底部的缩放控件
• Tree Overview：为应用程序的完整视图层次结构提供鸟瞰图。 移动灰色矩形以更改树视图中可见的视口。
• Layout View：显示布局的线框视图。 当前所选视图的轮廓为红色，其父视图为浅红色。单击此处的视图也会在树视图中选择它，反之亦然。
• hierarchy view 视图层次结构是布局的快照，因此不会自动更新。 要更新层次结构视图，点击右上角蓝色金字塔（Reload the view hierarchy）。
• 要想保存Tree View,点击右上角蓝色金字塔左边小文档,左边是PNG格式,右边是PS的PSD格式。

获取布局的绘制

• 选择一个节点，点击Profile Mode按钮,可以获取到布局绘制的时间，如图:

• 绿:表示该View的此项性能比该View Tree中超过50%的View都要快；例如,一个绿点的测量时间意味着这个视图的测量时间快于树中的视图对象的50%。
• 黄: 表示该View的此项性能比该View Tree中超过50%的View都要慢；例如,一个黄点布局意味着这种观点有较慢的布局时间超过50%的树视图对象。
• 红: 表示该View的此项性能是View Tree中最慢的；例如,一个红点的绘制时间意味着花费时间最多的这一观点在树上画所有的视图对象。

布局性能分析

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

• 如果在叶节点或者ViewGroup中，只有极少的子节点，这可能反映出一个问题，应用可能在设备上运行并不慢，但是你需要指导为什么这个节点是红色的，可以借助Systrace或者Traceview工具，获取更多额外的信息；
• 如果一个视图组里面有许多的子节点，并且测量阶段呈现为红色，则需要观察下子节点的绘制情况；
• 如果视图层级结构中的根视图，Messure阶段为红色，Layout阶段为红色，Draw阶段为黄色，这个是比较常见的，因为这个节点是所有其它视图的父类；
• 如果视图结构中的一个叶子节点，有20个视图是红色的Draw阶段，这是有问题的，需要检查代码里面的onDraw方法，不应该在那里调用。

Layout Inspector

工具打开方式

• 在连接的设备或模拟器上运行应用；
• 点击 Tools > Android > Layout Inspector；
• 在出现的 Choose Process 对话框中，选择想要检查的应用进程，然后点击 OK
  

工具的使用

布局检查器会捕获快照，将它保存为 .li 文件并打开。如图所示，布局检查器将显示以下内容：

• View Tree：视图在布局中的层次结构。
• Screenshot：带每个视图可视边界的设备屏幕截图。
• Properties Table：选定视图的布局属性。
  

如果布局包括重叠视图，则默认情况下，只有前面的视图可以在屏幕截图中点击。 要让后面的视图可以在屏幕截图中点击，请执行以下操作：

在 View Tree 中右键点击前面的视图，然后取消选中 Show in preview。 此操作不会让视图内容消失；仅会让屏幕截图中的可点击边界消失，以便可以点击在它后面的视图。

如果设备上的布局发生变化，布局检查器不会更新。 必须再次点击 Tools > Android > Layout Inspector，创建一个新的快照。每一个快照都将保存到 project-name/captures/ 内一个单独的 .li 文件中。

结论

Hierarchy Viewer虽然已经废弃了，但实际应用中还是不能放弃的，相比较而言，Layout Inspector看布局的层级较为轻松，但Hierarchy Viewer看布局的绘制时间更为轻松，两者相结合，对布局的检测优化更为轻松，所以自我感觉两者都不能放弃。

具体如何进行优化，以及一些优化的建议，请听下回分解~

关注我的技术公众号，每个工作日都有优质技术文章推送。
微信扫一扫下方二维码即可关注：