Hierarchy Viewer和Layout Inspector

Hierarchy Viewer

官方Hierarchy Viewer使用文档

本想学下Hierarchy Viewer的使用，打开官方文档?，发现
如果想打开Hierarchy Viewer，需要打开sdk/tools/monitor.bat

打开Android Device Monitor后就可以找到Hierarchy viewer

如果使用的是 Android Studio 3.1 或更高版本，则应在运行时改用 Layout Inspector 来检查应用的视图层次结构

所以下面来学一下Layout Inspector

Layout Inspector

Layout Inspector官方使用文档

Layout Inspector是Android studio自带的视图层次结构分析工具（Android Studio 2.2及其之后版本）。Android Studio中的Layout Inspector允许您在运行时从Android Studio IDE中检查应用程序的视图层次结构

以下内容都是可以在官方文档中找到的，为了防止某些同学看不到墙外的风景，我来搬运下…其实看到这个提示，我感觉有点可悲…

打开

1、在模拟机上运行你的程序
2、Tools-Layout Inspector
3、在显示的 Choose Process 对话框中，选择要检查的应用进程

显示内容

Layout Inspector 将显示以下内容：
1、View Tree：布局中视图的层次结构
2、Layout Inspector 工具栏：Layout Inspector 的工具
3、屏幕截图：设备上显示的应用布局的屏幕截图，其中显示了每个视图的布局边界
4、Properties Table：选定视图的布局属性

布局检查器会捕获快照，将它保存为 .li 文件并打开。如果设备上的布局发生变化，布局检查器不会更新。 您必须再次点击 Tools > Android > Layout Inspector，创建一个新的快照。每一个快照都将保存到 project-name/captures/ 内一个单独的 .li 文件中

您可以通过双击 project-name/captures/ 下的 .li 文件，重新加载以前的屏幕截图

选择视图

要选择某个视图，请在 View Tree 或屏幕截图中点击该视图。选定视图的所有布局属性都会显示在 Properties Table 中

如果您的布局包含重叠的视图，则只有前面的视图可以在屏幕截图中点击。要选择某个不在前面的视图，请在 View Tree 中点击该视图

隔离视图

要使用复杂的布局，您可以隔离各个视图，以便只有布局的一部分显示在 View Tree 中并呈现在屏幕截图中
截屏中双击视图即可
要返回刚才的截图屏幕，可以点击左上角

将应用布局与参考图像叠加层进行比较

要将您的应用布局与参考图像（如界面模型）进行比较，您可以在 Layout Inspector 中加载位图图像叠加层

要加载叠加层，请点击 Layout Inspector 顶部的 Load Overlay 图标。叠加层将会缩放以适合布局

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

??，我怎么没找到滑块？？谁能告诉我

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

放大并使用参考网格检查布局细节

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

要按屏幕截图中的一个像素对应于设备上的一个像素这一放大率来查看布局，请点击 Actual Size 图标
要叠加像素网格，请点击 Grid 图标 。网格仅在高缩放级别可用（也就是那个加号点击N后）

最后

Layout Inspector真的肥肠有用，除了查看我们自己写的app的布局，我们也可以查看没有源码的app的布局，例如我们打开“去哪儿旅行”app，现在模拟机上显示了“发现新版本”页面

我们打开Tools/Layout Inspector，选中Qunar

然后选择要展示的页面的截图，我们从名字上来看，Upgrade这个应该是提示更新的页面。选中它

这样我们就可以查看布局和id一些相关信息了