布局嵌套分析之Layout Inspector工具
Google的零容忍
hierarchy viewer：布局层级查看工具，已废弃……
Pixel Perfect：布局性能查看工具，已废弃……
工具都废弃了……还有什么工具可以查看布局层次结构呢？（View树结构）
工具主角：Layout Inspector
1、工具在哪？
Layout Inspector集成在Android Studio中，请安装Android Studio
2、支持查看布局性能不？
Layout Inspector目前不支持查看布局性能！（对应版本：Android Studio 4.0.1）
3、如何应对经常废弃的工具？（重要的事情：说三遍）
Google提供的工具随时可能因为不爽就废弃……今天的你刚学会Layout Inspector，可能明天它就废弃了…你觉得苦不苦B呢？所以学习工具的同时，必须同时学习工具相关的理论！！
Google提供的工具随时可能因为不爽就废弃……今天的你刚学会Layout Inspector，可能明天它就废弃了…你觉得苦不苦B呢？所以学习工具的同时，必须同时学习工具相关的理论！！
Google提供的工具随时可能因为不爽就废弃……今天的你刚学会Layout Inspector，可能明天它就废弃了…你觉得苦不苦B呢？所以学习工具的同时，必须同时学习工具相关的理论！！
如何开启Layout Inspector
1、打开Android Studio
2、已连接真机或模拟器
3、运行你的Debug App
（注意事项：App必须为Debug Version，App进程必须处于存活状态）
image
4、点击Android Studio顶部菜单栏的 Tools > Layout Inspector
image
5、Layout Inspector窗口中选择设备与已经运行的Debug进程
image
6、成功启动Layout Inspector后的窗口截图
image
窗口组成介绍
Layout Inspector由3个子窗口组成，从左到右，依次介绍一下……
Component Tree窗口（最左侧）
image
位于最左侧的就是Component Tree窗口，此窗口提供以下功能
1、Component Tree窗口可用于查看整个View树
2、Component Tree窗口可用于切换View树，当同时打开多个Activity时，可以指定查看哪一个View树
3、Component Tree窗口可用于选中View树中的某一个控件，被选中的控件属性信息会在Attrsibutes窗口中展示
通用窗口（居中）
image
位于中间的为通用窗口（屏幕截图窗口，没找到合适的名字），此窗口提供这些功能
1、选择设备与进程
2、设置设备实时截图的选项
3、提供Overlay功能，可覆盖一张透明的设计图与实际的截图进行对比
image
4、更新当前屏幕截图功能
image
5、勾选按钮后，手机上的画面将随着实时更新，注意：此时的手机画面流畅度会下降
image
6、屏幕截图操作，放大、缩小、拖拽，注意其中一个正方形的功能，在API 29的设备上才可使用
image
image
Attributes窗口（最右侧）
image
位于最右侧Attributes窗口，提供以下功能
1、展示控件的属性信息
2、控件所在View树的布局信息
3、控件相对屏幕的属性信息
4、支持搜索某个属性
image
image
Layout Inspector使用场景
使用场景1：查看动态添加的View
控件是在代码中动态添加的，你很关心动态生成的控件在View树中的位置结构是否合理？那就使用Layout Inspector吧！
使用场景2：插桩测试定位控件
编写Android App的插桩测试项目，需要查看控件的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
image
2、屏幕截图窗口下，点击任意一个View，即可选中一个View
image
3、重叠的View如何选中
如果布局中包含重叠的View，只能在View树窗口中选择对应的控件
隔离View功能
1、在View树窗口右键选中只展示子View
image
2、在屏幕截图窗口，对着选中的View，选中只展示子树
image
3、另外在View树窗口与屏幕截图窗口也可以右键选中只展示父View
image
控制布局边界显示选项
image
勾选Show Borders选项，屏幕截图中的View边界会
1、隐藏
或者
2、显示
控制控件类型信息显示选项
image
image
勾选Show View Label后，可以控制在屏幕截图中选中View后展示的View的类型信息
放大与缩小功能
要放大屏幕截图，请点击 Zoom In 图标
要缩小屏幕截图，请点击 Zoom Out 图标
image
实际布局与设计图比较功能
1、要将应用布局与参考图像进行比较，可以在布局检查器中加载一个位图图像作为叠加层
请点击布局检查器顶部的 Load Overlay 图标，然后选中一张设计图，叠加层将会缩放以适合当前布局
image
要调整叠加层的透明度，请使用 Alpha 滑块
image
要移除叠加层，请点击 Clear Overlay 图标
image
Android Studio4.0.1版本截图
image
当前页面改变，手动刷新并获取新的屏幕截图
image
Android Studio 4.0.1版本的Layout Inspector（再次介绍）
在Android Studio 4.0.1版本中，Layout Inspector工具进行了重大更新（坑爹），工具窗口相对旧版本发生变化，很多功能的操作也改变了，还有一部分功能直接废弃了……
新的窗口布局
image
从左侧到右侧共计3个子窗口
第一个窗口：Component Tree窗口
第二个窗口：屏幕截图窗口
第三个窗口：控件信息窗口
功能区
1、选择debug应用的位置
选择已运行的debug应用，集成在窗口中（旧版本是个对话框）
image
2、多个Activity的View树呈现在列表中（旧版是个选中Activity的对话框）
最下方的View树是当前屏幕的Activity
image
3、查看屏幕控件的全局选项固定为两个
image
4、View隔离功能，集成在屏幕窗口中、以及View树窗口中，使用右键弹出选项
image
image
5、刷新当前屏幕的View树功能按钮
image
6、控件信息窗口展示的信息更全面
image
7、最亮点的功能按钮，我没用……电脑配置太差
image
image
最亮点的功能需要配置-Layout Inspector Image Server
image
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工具更新太快了………………我就艹了…………
