Android进阶之路 - Component Tree、Layout Inspector - Tree View、Hierarchy Viewer 查看视图层级结构_component tree 怎么调出来

很早之前就想总结一篇关于怎么去查看视图结构的文章，今日终于抽了点时间来完成进阶霸业 ~

之所以会去学习这些查看视图结构的工具，主要是为了布局优化做准备

xml 自带视图分析

1.右侧的预览布局，根据图中操作

2.多个视图在同一部位覆盖，此方式查看结构就比较够呛了

3.在多个视图不覆盖同一区域下的话，简单查看结构还是可以做到的

正式讲解视图结构

主要通过三种方式全方位查看View结构，哪种也可以用，哪种也都在进步 ~

Component Tree（直观视图结构）

主要用于查看当前xml的层级结构，根布局为xml的根布局

1.选取Desgin

2.最终结果

3.扩展讲解Palette（翻译：调色板），个人认为主要作用于拖拽，不建议使用

---

Layout Inspector - Tree View（底层代码树形视图结构）

主要用于当前xml的总体布局，根布局为Phone Window，相比前者布局结构更完善

1.打开Layout Inspector工具

As3.0之前 - Tools - Android - Layout Inspector

As3.0之后 - Tools - Layout Inspector

2.执行流程

当运行的时候遇到这样的错误，请使用ADB关闭其他应用程序：Monitor、DDMS、Eclipse ，当然可以重启尝试，这里要记得系统会提示你让你允许调用调试权限，记得确定

3.选取对应的包名

4.最终结果

---

Hierarchy Viewer（可视化树形视图结构）

一种相对古老的工具了，兼容了Ecplise和As，最早的时候是通过DDMS进行启动的，后来As可以通过插件启动了 ~

据说AndroidStudio3.0、3.1之后此工具Android原开发团队将不再维护

前提

• 添加到你的 build.gradle

build.gradle(Project)

allprojects {
    repositories {
        google()
        jcenter()
        maven {url "https://jitpack.io"}
    }
}
1
2
3
4
5
6
7

build.gradle(Module)

compile 'com.github.romainguy:ViewServer:017c01cd512cac3ec054d9eee05fc48c5a9d2de'
1

• 清单文件添加权限

<uses-permission android:name="android.permission.INTERNET" />
1

• 然后注册查看服务器到您想要检查的活动

public class MyActivity extends Activity {
    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);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如您没有设置前提条件，那么如博友文中所说一样，由于一直都是用真机开发，启动之后，发现没有看到应有的效果，出现了下面的错误：

2016-04-15 15:44:26 - hierarchyviewer]Unable to get view server version from device 2d2843d
[2016-04-15 15:44:26 - hierarchyviewer]Unable to get view server protocol version from device 2d2843d
1
2

那么可以尝试使用下方的解决方案，此方案来自Stack Overflow 的这篇文章：Android Debug Monitor层次结构视图不显示

解决步骤：

主要就是通过DDMS去查看视图结构，但是As3.0之前与As3.0之后启动DDMS的方式不太一样；
此篇粗略介绍，如想具体了解的可以查看我的另一篇文章 - DDMS调试之旅

• As3.0之前 - 启动方式

1.AndroidStudio - Tools - Android - Andorid Device Monitor（设备监控)

2.打开后呈现的视图

3.因为初次进入的时候并没有Hierarchy View,所以我们需要进行添加

注：担心大图看不清楚，故放小图一张> <

4.最终效果

• DDMS通用 - 启动方式

1.通过sdk - tools 激活工具

2.成功激活工具

注：如无视图查看器，可看下图操作