使用HierarchyViewer工具分析布局

AFinalStone

已于 2023-03-18 21:19:21 修改

阅读量4.2k

点赞数 2

分类专栏： Android技术进阶文章标签：技术进阶 UI Android

于 2022-10-31 16:32:45 首次发布

本文链接：https://blog.csdn.net/abc6368765/article/details/127613404

版权

Android技术进阶专栏收录该内容

5 篇文章

订阅专栏

不合理的布局会影响应用程序UI性能，HierarchyViewer是Android Device Monitor中内置工具，可直观获得UI布局设计结构和属性信息。本文介绍了该工具的打开、启动、使用方法，还对其分析功能，如圆点功能和颜色代表的性能含义进行了说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

不合理的布局会使我们的应用程序UI性能变慢，HierarchyViewer是 Android Device Monitor 中内置的一种工具，该工具能够用可视化的角度直观地获得UI布局设计结构和各种属性的信息，帮助我们优化布局设计，让我们更好地检视和设计用户界面(UI),绝对是UI检视的利器.
官方使用文档

一、打开

1、本地安装SDK目录->sdk->tools->hierarchyviewer.bat(版本低,可能有未知bug)或点击同级目录的monitor.bat

2、Android Studio : 工具栏->Tools->Android->Android Device Monitor(官方推荐)

3、在命令行输入 hierarchyviewer(可用,但是启动的是版本低的)

二、启动

1、设备连接

模拟器设备版本需要设置为 Android 4.1，真机需要手机root权限，成功后左侧Windows小手机会看到设备信息
window窗口
2、打开Hierarchy View视图界面

点击Window->Open Perspective->Hierarchy View。就会看到如图界面，否则点击工具栏Window -> Reset Perspective 重启默认布局
HierarchyView界面

三、使用

1、相关窗口视图介绍

Tree View（中央）：显示视图层次结构的树视图。您可以使用鼠标拖动并放大树，底部的缩放控件。每个节点表示它是View类名和ID名称。双击节点或者点击右上角小地球可以查看实际布局显示的内容
Tree Overview（右上）：为您的应用程序的完整视图层次结构提供鸟瞰图。移动灰色矩形以更改树视图中可见的视口。
Layout View（右下角）：显示布局的线框视图。当前所选视图的轮廓为红色，其父视图为浅红色。单击此处的视图也会在树视图中选择它，反之亦然。

2、相关功能按钮介绍

1）Hierarchy Viewer 视图层次结构是布局的快照，因此不会自动更新。要更新层次结构视图，点击右上角蓝色金字塔在这里插入图片描述。
2）要想保存Tree View,点击右上角蓝色金字塔左边小文档布局优化必备 Hierarchy Viewer 工具使用，左边是PNG格式,右边使用是PS的PSD格式。
3）如需使某个视图无效（请求在下一次布局更新期间对 onDraw() 进行系统调用），请选择层次结构中的相应视图，然后点击 Invalidate the layout 图标（这与在视图中调用 invalidate() 等效）。要请求实际布局视图（及任何子级），请点击 Request lay out 图标。

4）如果需要转到其他应用，则必须从左侧面板的 Windows 标签页中选择该应用，以查看其视图层次结构。
查看特定app的视图树
5）如需查看视图的属性，请点击左窗格中的 View Properties 标签页。
在这里插入图片描述
6）要查看有关视图的详细信息，包括其度量、布局和绘制时间（如图 3 所示），请在 Tree View 中点击该视图。双击该视图可查看其放大图片。
视图节点显示界面的各部分
7）点击右上Profile Mode按钮，可以检查节点布局绘制的时间是否合理。
查看视图绘制是否合理

四、分析

1、圆点功能介绍
点击右上Profile Mode 在这里插入图片描述按钮后，节点的每个子视图都有三个圆点。

①左边圆点：表示渲染管道的绘制过程。
②中间圆点：表示布局阶段。
③右点圆点：表示执行阶段。

2、圆点颜色介绍

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

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

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

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

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

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