Android布局层次结构查看工具-Layout Inspector介绍

（注意：本文基于Android Studio 4.0.1，版本不同没关系，思路可以复用）

 

Google的零容忍

hierarchy viewer：布局层级查看工具，已废弃……

Pixel Perfect：布局性能查看工具，已废弃……

Google将工具都废弃了……我们怎么查看Android应用的布局层次结构？（View树结构）

答案： Layout Inspector

1、Layout Inspector在哪？

Layout Inspector集成在Android Studio中，需要您安装Android Studio

2、Layout Inspector能否查看布局性能？

Layout Inspector不支持查看布局性能，当前版本：Android Studio 4.0.1

3、如何面对工具的废弃？

Google的工具随时会废弃…今天的你刚学会使用Layout Inspector，可它明天就废弃了…你觉得苦不苦B呢？所以学习除了如何使用工具，必须同时学习与工具相关的理论，这些理论可以复用一被子……你知道什么是DecorView吗？不知道的人，赶紧去补习一下……

 

开启Layout Inspector

1、打开Android Studio

2、连接真机或模拟器

3、运行你的Debug App

（注意：App必须为Debug Version，App进程必须处于存活状态）

4、点击Android Studio顶部菜单栏的 Tools > Layout Inspector

5、Layout Inspector窗口中选择设备与已经运行的Debug进程

6、成功启动Layout Inspector后的窗口截图

 

窗口介绍

Layout Inspector由3个子窗口组成，从左到右，依次介绍一下……

1、Component Tree窗口（最左侧窗口）

位于最左侧的就是Component Tree窗口，此窗口提供以下功能

1、Component Tree窗口可用于查看整个View树

2、Component Tree窗口可用于切换View树，当同时打开多个Activity时，可以指定查看哪一个View树

3、Component Tree窗口可用于选中View树中的某一个控件，被选中的控件属性信息会在Attrsibutes窗口中展示

 

2、通用窗口（中间窗口）

位于中间的为通用窗口（屏幕截图窗口，没找到合适的名字），此窗口提供这些功能

1、选择设备与进程

2、设置设备实时截图的选项

3、提供Overlay功能，可覆盖一张透明的设计图与实际的截图进行对比

4、更新当前屏幕截图功能

5、勾选按钮后，手机上的画面将随着实时更新，注意：此时的手机画面流畅度会下降

6、屏幕截图操作，放大、缩小、拖拽，注意其中一个正方形的功能，在API 29的设备上才可使用

 

3、Attributes窗口（最右侧窗口）

位于最右侧Attributes窗口，提供以下功能

1、展示控件的属性信息

2、控件所在View树的布局信息

3、控件相对屏幕的属性信息

4、支持搜索某个属性

 

使用场景

 

1：查看动态添加的View

控件是在代码中添加的，你很关心动态生成的控件在View树中的结构是否合理？Layout Inspector可以看到……

2、插桩测试定位控件

编写Android App的插桩测试项目（UI自动化），需要查看控件的一些属性用于查找控件，比如控件的id属性

3、原型对比

当前页面的结构图与设计师的原型图对比，检查实际页面与设计图的差别

4、学习View树结构

学习Android控件的原理，查看当前Window实际的View树结构是什么样的？比如看看顶级View是否为DecorView

5、查看竞品布局

查看竞争对手的App的界面是如何实现的（必须Root设备或模拟器），因为竞品与你的需求是相似的，通过参考竞品App的View树结构，有利于提高开发速度，我猜测这是Google故意提供的功能，开发者们越快开发出App，越利于Android生态的建设！（注意：必须Root手机或者模拟器才可查看Release版本的App，日常情况下只能查看Debug版本的App）

6、复杂布局Debug

明明写好的界面，为什么那里有个空白的bug？当某个页面很复杂，又出现莫名其妙的bug时，别着急，先用Layout Inspector工具看下View树结构，再来修改bug也不迟……

 

如何选中一个View

属性表窗口中展示选中的控件的所有属性

1、Component Tree窗口下，点击任意一个View，即可选中一个View

2、屏幕截图窗口下，点击任意一个View，即可选中一个View

3、重叠的View如何选中

如果布局中包含重叠的View，只能在View树窗口中选择对应的控件

 

隔离View功能

 

1、在View树窗口右键选中只展示子View

2、在屏幕截图窗口，对着选中的View，选中只展示子树

3、另外在View树窗口与屏幕截图窗口也可以右键选中只展示父View

 

 

控制布局边界显示选项

勾选Show Borders选项，屏幕截图中的View边界会

1、隐藏

或者

2、显示

 

控制控件类型信息显示选项

勾选Show View Label后，可以控制在屏幕截图中选中View后展示的View的类型信息

 

放大与缩小功能

• 要放大屏幕截图，请点击 Zoom In 图标 
• 要缩小屏幕截图，请点击 Zoom Out 图标 

 

实际布局与设计图比较功能

1、要将应用布局与参考图像进行比较，可以在布局检查器中加载一个位图图像作为叠加层

• 请点击布局检查器顶部的 Load Overlay 图标，然后选中一张设计图，叠加层将会缩放以适合当前布局

• 要调整叠加层的透明度，请使用 Alpha 滑块

• 要移除叠加层，请点击 Clear Overlay 图标 

 

 Android Studio4.0.1版本截图

 

当前页面改变，手动刷新并获取新的屏幕截图

 

Android Studio 4.0.1版本的Layout Inspector（再次介绍）

在Android Studio 4.0.1版本中，Layout Inspector工具进行了重大更新（坑爹），工具窗口相对旧版本发生变化，很多功能的操作也改变了，还有一部分功能直接废弃了……

新的窗口布局

从左侧到右侧共计3个子窗口

第1个窗口：Component Tree窗口

第2个窗口：屏幕截图窗口

第3个窗口：控件信息窗口

 

功能区

1、选择debug应用的位置

选择已运行的debug应用，集成在窗口中（旧版本是个对话框）

 

2、多个Activity的View树呈现在列表中（旧版是个选中Activity的对话框）

最下方的View树是当前屏幕的Activity

 

3、查看屏幕控件的全局选项固定为两个

 

4、View隔离功能，集成在屏幕窗口中、以及View树窗口中，使用右键弹出选项

 

5、刷新当前屏幕的View树功能按钮

 

6、控件信息窗口展示的信息更全面

 

7、最亮点的功能按钮，我没用……电脑配置太差

 

最亮点的功能需要配置-Layout Inspector Image Server

1、首先打开SDK Manager安装Layout Inspector的image server

2、必须是API 29-30之间的设备

3、我们来看下这个牛X的功能，未完，待续！

 

总结

1、Layout Inspector用于在Android平台查看View树层级

2、缺点：Layout Inspector无法查看布局性能

3、缺点：日常只能查看正在运行的debug App，想看竞品release App的布局，官方建议使用root手机或者模拟器设备

4、缺点：Layout Inspector工具更新太快了………………我就艹了…………

 

参考官方文献

https://developer.android.com/studio/debug/layout-inspector 使用布局检查器（Layout Inspector）调试布局