1. 介绍
Hierarchy Viewer提供了一个可视化界面，显示布局的层次结构，让我们可以进行调试，从而优化界面布局结构。
不过它只支持模拟器，真机中还无法使用，若要使用可通过开源项目View server，通过这个项目可以让真机使用Hierarchy Viewer，ViewServer博客介绍
2. 启动工具
通过打开Android Device Monitor，添加hierarchyviewer视图，图解如下
2.1 android studio-》tools -》android -》Android Device Monitor
备注：
android studio 3.2及以上版本，此功能有较大改变，下面的文章也仅作参考
2.2 基本界面如下
2.3 之后点击右上角视图切换，选中 Hierarchy Viewer
2.4 成功开启后界面如下
其实这个界面中我自己添加的布局只有7个按钮（我通过相对布局添加的），如下图，
其他的几个是系统的，比如topbar，navigationbar等，是系统的，不需要关心
3.真机中使用
3.1 通过第三方库，安装和配置ViewServer,也是目前我在使用的方式，工具地址：https://github.com/romainguy/ViewServer，配置步骤比较简单，主要分为如下三步：
3.1.1 添加依赖，外层build.gradle文件，添加工具远程仓库地址；内层build.gradle文件，添加依赖：
allprojects {
repositories {
jcenter()
maven { url "https://jitpack.io" }
}
}dependencies {
...................................
compile 'com.github.romainguy:ViewServer:017c01cd512cac3ec054d9eee05fc48c5a9d2de'
}3.1.2 在manifest文件申请网络权限
<uses-permission android:name="android.permission.INTERNET"/>3.1.3 在应用中需要调试的Activity中添加如下代码，启动ViewServer, 这样就可以与hierarchy viewer通信了：
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Set content view, etc.
ViewServer.get(this).addWindow(this);
}
public void onDestroy() {
super.onDestroy();
ViewServer.get(this).removeWindow(this);
}
public void onResume() {
super.onResume();
ViewServer.get(this).setFocusedWindow(this);
}4.使用介绍
4.1 选择一个节点，点击右上角的
的按钮，就可以获取到布局绘制的时间，如图：
下面的三个圆圈，从左到右依次，代表View的Measure, Layout和Draw的性能，不同颜色代表不同的性能等级：
1） 绿: 表示该View的此项性能比该View Tree中超过50%的View都要快；
例如,一个绿点的测量时间意味着这个视图的测量时间快于树中的视图对象的50%。
2）黄: 表示该View的此项性能比该View Tree中超过50%的View都要慢；
例如,一个黄点布局意味着这种观点有较慢的布局时间超过50%的树视图对象。
3）红: 表示该View的此项性能是View Tree中最慢的；
例如,一个红点的绘制时间意味着花费时间最多的这一观点在树上画所有的视图对象。
4.2 测量结果分析
红色节点是代表应用性能慢的一个潜在问题，下面是几个例子，如何来分析和解释红点的出现原因？
1）如果在叶节点或者ViewGroup中，只有极少的子节点，这可能反映出一个问题，应用可能在设备上运行并不慢，但是你需要指导为什么这个节点是红色的，可以借助Systrace或者Traceview工具，获取更多额外的信息；
2）如果一个视图组里面有许多的子节点，并且测量阶段呈现为红色，则需要观察下子节点的绘制情况；
3）如果视图层级结构中的根视图，Messure阶段为红色，Layout阶段为红色，Draw阶段为黄色，这个是比较常见的，因为这个节点是所有其它视图的父类；
4）如果视图结构中的一个叶子节点，有20个视图是红色的Draw阶段，这是有问题的，需要检查代码里面的onDraw方法，不应该在那里调用。
5. 布局常见问题与优化建议
1）没有用的父布局时指没有背景绘制或者没有大小限制的父布局，这样的布局不会对UI效果产生任何影响。我们可以把没有用的父布局，通过<merge/>标签合并来减少UI的层次；
2）使用线性布局LinearLayout排版导致UI层次变深，如果有这类问题，我们就使用相对布局RelativeLayout代替LinearLayout,减少UI的层次；
3）不常用的UI被设置成GONE,比如异常的错误页面，如果有这类问题，我们需要用<ViewStub/>标签，代替GONE提高UI性能。
