Android布局分析工具Layout Inspector（解决布局产生的性能问题）

概述

---

我们在Android开发中，如果出现了页面打开时间慢，该如何分析解决呢？

其实有很多原因可以导致页面打开慢，例如cpu占用过高、主线程进行耗时任务、布局复杂、布局层级过深等，其中最常见的就是布局问题了，我们重点来看如何解决布局相关的性能问题。

那么，布局有问题为什么会导致页面打开慢、卡顿等问题呢？这是因为，页面视图从准备阶段直到显示到屏幕上，要经历3个主要过程：测量、布局、绘制，复杂的视图布局或者层级过深等，都会导致这3个过程耗时过长，从而导致了性能问题。

我们如何来查看布局层级以及复杂度呢？有没有工具呢？

这个问题google当然也想到了，并且为我们提供了相应的开发工具：Hierarchy Viewer，它可以很方便的查看当前显示页面的布局以及视图的父子关系。

Hierarchy Viewer是Android Device Monitor中内置的一种工具，可让您测量布局层次结构中每个视图的布局速度。

但是，Hierarchy Viewer现在已被弃用。如果你使用的是Android Studio 3.1或更高版本，则应在运行时改用Layout Inspector来检查应用的视图层次结构。

接下来我们来看如何使用Layout Inspector工具（布局检查器）。

Layout Inspector工具

---

使用Android Studio中的布局检查器（Layout Inspector工具），你可以将应用布局与设计模型进行比较、显示应用的放大视图或3D视图，以及在运行时检查应用布局的细节。如果布局是在运行时（而不是完全在 XML 中）构建的并且布局行为出现异常，该工具会非常有用。

打开布局检查器

1. 首先我们要打开要运行的APP，并且打开要检查的页面，这里注意，APP必须是Debug版本的。如果使用真机，确保真机已连接Android Studio。
2. 依次点击 Tools > Layout Inspector，即可打开布局检查器。

在图中1的位置，点击并选择视图所在的进程，即可进行分析了。

使用

如图所示，布局检查器将显示以下内容：

1. Component Tree：布局中视图的层次结构。
2. Layout Display：按照应用布局在设备或模拟器上的显示效果呈现布局，并显示每个视图的布局边界。
3. 布局检查器工具栏：布局检查器的工具。
4. Attributes：所选视图的布局属性。

选择视图

如要选择某个视图，请在 Component Tree 或 Layout Display 中点击该视图。所选视图的所有布局属性都会显示在 Attributes 面板中。

如果布局包含重叠的视图，您可以选择不在前面的视图，方法是在 Component Tree 中点击该视图，或者旋转布局并点击所需视图。

隔离视图

如要使用复杂的布局，你可以隔离各个视图，以便只有布局的一部分显示在 Component Tree 中并呈现在 Layout Display 中。

如要隔离某个视图，请在 Component Tree 中右键点击该视图，然后选择 Show Only Subtree 或 Show Only Parent。

如需返回完整视图，请右键点击该视图，然后选择 Show All。

如图：

隐藏布局边框和视图标签

如需隐藏布局元素的边界框或视图标签，请点击 Layout Display 顶部的 View Options 图标 实时布局检查器视图选项图标（眼睛图标），然后切换 Show Borders 或 Show View Label。

3D 可视化

Layout Display 可在运行时对应用的视图层次结构进行高级 3D 可视化。如需使用该功能，只需在实时布局检查器窗口中点击相应布局，然后拖动鼠标旋转该布局即可。

将当前布局与参考图片叠加层进行比较

我们还可以将当前布局与参考图片叠加层进行比较（例如与UI效果图进行对比）。

操作步骤：

1. 如需加载叠加层，请点击布局检查器顶部的 Load Overlay 图标 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传。系统会缩放叠加层以适合布局。
2. 如需调整叠加层的透明度，请使用 Overlay Alpha 滑块。
3. 如需移除叠加层，请点击 Clear Overlay 图标。

小结

本节我们学习了如何使用布局检查器进行布局的分析。

今后分析由布局产生的视图性能问题将会非常简单拉~

---

PS：性能优化专栏：《Android性能》持续更新中……