一、概述

Hierarchy Viewer是我们平时开发中常用的工具，通过它我们可以得到某个界面中的布局层次，今天我们来介绍一下如何使用这个工具来优化布局。

Hierarchy工具位于SDK/tools目录下，直接运行之后我们会得到下面这个界面：

它提供了下面两个功能：

因为主要是讨论如何用它来分析性能问题，所以我们主要介绍第一个功能。

二、`Hierarchy`分析

在Hierarchy Viewer的根界面，它列出了当前手机或者模拟器中可见的Window，假如我们要分析某个Activity，那么点击它，再点击Load View Hierarchy后，就会得到下面这个界面：

这个界面一共分为四个部分，它们分别是：

Tree View 这里面将Activity的所有View呈现成为一个树形结构，它提供了以下几种操作方式：
- 通过拖动条来放大或缩小可视范围。
- 通过输入类名或者View的id来迅速定位到需要分析的View
- 通过上方的Save as PNG或者Capture Layers保存当前的树形结构。
Tree Overview 这相当于是Tree View的缩小版，可以通过它快速查看或者定位。
Properties View 当我们选取了一个View的时候，它会列出对应View的属性。
Layout View 当我们选取了一个View之后，会在这个区域内，显示出不同颜色的矩形框，其中红色就是我们选取的View的范围，而淡红色则是该View对应的父容器的范围，其它的白色矩形框既不是该View的父容器，也不是该View的子控件。

需要注意，当Window的布局变化时，是不会主动刷新的，如果我们想要查看最新的布局情况，那么就要点击上方的Load View Hierarchy来刷新，而如果我们想要去查看别的Window布局，那么就需要点击下方操作栏最左边的按钮，重新进入选择Window的窗口。

对于Tree View中的每个节点，我们可以获得以下信息：

View的类名
View所存储的地址
View的id属性值
View绘制的相对耗时分析，它会根据measure/layout/draw这三个阶段，分为三个小点展示，而小点的颜色就代表了它在这个阶段相对于View树中的其他View在同一阶段的耗时对比结果：
绿色：在前50%
黄色：在后50%
红色：耗时最长
View处于它的父容器的index。

如果我们选择了一个View，那么会有更加详细的信息：

上面我们看到Hierarchy View可以得到绘制阶段的耗时，这些耗时是在上一次绘制的时候计算出的，我们也可以通过这个工具主动地触发重绘，以得到最新的结果，操作步骤为：

Hierarchy View对于我们平时开发中的作用主要是以下几点：

查看整个布局的深度，是否可以去掉一些不必要的层级，以尽量使View树保持扁平。
查看measure、layout、draw当中那些红色或者黄色的节点，但是由于这些节点的颜色是包含了它和它的子View的时间，因此我们分析的时候，需要根据具体情况看究竟是由于ViewGroup的子View过多，还是View过于复杂引起的这一问题。

今天主要介绍了Hierarchy Viewer和分析性能有关的用法，如果对于Inspect Screenshot有兴趣的同学可以查看下面官方文档的其它部分：

http://android.xsoftlab.net/tools/debugging/debugging-ui.html