Android Dev Summit, October 23-24: two days of technical content, directly from the Android team. Sign-up for livestream updates.

使用 Layout Inspector 调试布局

使用 Android Studio 中的 Layout Inspector,您可以将应用布局与设计模型进行比较、显示应用的放大视图,并在运行时检查其布局的细节。如果您的布局是在运行时(而不是完全在 XML 中)构建的并且布局表现出意外行为,这会很有用。

Layout Inspector 中的大部分功能以前是由 Hierarchy Viewer 和 Pixel Perfect 工具提供的,但这些工具现已弃用。

打开 Layout Inspector

要打开 Layout Inspector,请执行以下操作:

  1. 在连接的设备或模拟器上运行您的应用
  2. 依次点击 Tools > Layout Inspector
  3. 在显示的 Choose Process 对话框中,选择要检查的应用进程,然后点击 OK

    图 1. Choose Process 对话框

    默认情况下,Choose Process 对话框仅列出当前在 Android Studio 中打开且正在设备或模拟器上运行的项目的进程。如果您要检查设备上的其他应用,请勾选 Show all processes。如果您使用的是没有 Google Play 商店的已取得 root 权限的设备或模拟器,那么您会看到所有正在运行的应用。否则,您只会看到正在运行的可调试的应用。

Layout Inspector 会拍摄快照,将其另存为 .li 文件并打开。

如图 2 中所示,Layout Inspector 将显示以下内容:

  1. View Tree:布局中视图的层次结构。
  2. Layout Inspector 工具栏:Layout Inspector 的工具。
  3. 屏幕截图:设备上显示的应用布局的屏幕截图,其中显示了每个视图的布局边界。
  4. Properties Table:选定视图的布局属性。

图 2. Layout Inspector

选择视图

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

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

隔离视图

要使用复杂的布局,您可以隔离各个视图,以便只有布局的一部分显示在 View Tree 中并呈现在屏幕截图中。

只有在设备仍处于连接状态时,您才能隔离视图。隔离视图要求设备呈现布局,以便 Layout Inspector 可以再截取一个屏幕截图。

要隔离某个视图,请执行以下某项操作:

  • 在屏幕截图中双击该视图。
  • View Tree 中右键点击该视图,然后选择 Render Subtree Preview

要返回父视图,请点击 Tree View 左上角的箭头。

隐藏布局边界

要隐藏某个布局元素的边界框,请在 View Tree 中右键点击该元素,然后取消选择 Show layout bounds

为某个布局元素取消选择 Show layout bounds 后,无法通过在屏幕截图中点击来选择该元素。

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

您可以使用 Layout Editor 工具栏中的按钮控制屏幕截图的网格叠加层和缩放级别:

  • 要放大屏幕截图,请点击 Zoom In 图标
  • 要缩小屏幕截图,请点击 Zoom Out 图标
  • 要按屏幕截图中的一个像素对应于设备上的一个像素这一放大率来查看布局,请点击 Actual Size 图标
  • 要叠加像素网格,请点击 Grid 图标 。网格仅在高缩放级别可用。

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

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

  • 要加载叠加层,请点击 Layout Inspector 顶部的 Load Overlay 图标 。叠加层将会缩放以适合布局。
  • 要调整叠加层的透明度,请使用 Alpha 滑块。
  • 要移除叠加层,请点击 Clear Overlay 图标

截取新屏幕截图来捕捉布局更改

如果设备上的布局发生更改,Layout Inspector 不会自动更新。要捕捉布局更改,请再次依次点击 Tools > Layout Inspector 来创建一个新的屏幕截图。

每个屏幕截图都保存在 project-name/captures/ 下的一个单独的 .li 文件中并在一个新标签中打开。

图 3. Project 窗口中的 Layout Inspector 屏幕截图(.li 文件)

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