使用布局检查器调试布局

Android Studio 中的布局检查器通过显示视图层次结构，让您能够检查每个视图的属性，从而调试应用的布局。借助布局检查器，您可以将应用布局与设计模型进行比较，显示应用的放大或 3D 视图，并在运行时检查其布局详情。当您的布局是在运行时而非完全在 XML 中构建，并且布局行为异常时，这尤其有用。

图 1. Jetchat 应用的嵌入式布局检查器。

开始使用

要启动布局检查器，请运行您的应用，转到 Running Devices 窗口，然后点击 Toggle Layout Inspector Toggle embedded layout inspector button。如果您在多个设备或项目之间切换，布局检查器会自动连接到连接设备前台运行的可调试进程。

以下是一些常见任务的操作方法

  • 要查看层次结构并检查每个视图的属性，请使用 Component Tree 和 Attributes 工具窗口。布局检查器可能需要重新启动 Activity 才能访问属性。如需了解详情，请参阅视图属性检查。
  • 要通过直接单击视图来选择视图或通过双击视图来导航到代码，请启用 Toggle Deep Inspect Toggle deep inspect button。
  • 要与应用互动，请停用 Toggle Deep Inspect Toggle deep inspect button。
  • 要检查物理设备，请启用设备镜像。
  • 要在更新应用 UI 时启用实时更新，请检查实时编辑是否已启用。
  • 要使用3D 模式，请拍摄布局检查器快照 Layout Inspector Snapshot，然后点击 3D Mode 3D button。

选择或隔离视图

视图通常会绘制用户可以看到和互动的内容。Component Tree 会实时显示应用的层次结构以及每个视图组件，这有助于您调试应用的布局，因为您可以直观地查看应用中的元素及其关联值。

要选择视图，请在 Component Tree 或 Layout Display 中点击它。所选视图的所有布局属性都会显示在 Attributes 面板中。

如果您的布局包含重叠视图，在 Deep Inspect 模式下右键点击时，您可以看到区域中的所有视图 Toggle deep inspect button。要选择不在最前面的视图，请在 Component Tree 中点击它或旋转布局。

要处理复杂布局，您可以隔离单个视图，以便在 Component Tree 中仅显示布局的子集并在 Layout Display 中渲染。要隔离视图，请拍摄快照 Layout Inspector Snapshot，在 Component Tree 中右键点击视图，然后选择 Show Only Subtree 或 Show Only Parents。要返回完整视图，请右键点击视图并选择 Show All。您必须在隔离视图之前拍摄快照。

隐藏布局边框和视图标签

要隐藏布局元素的边界框或视图标签，请点击 Layout Display 顶部的 View Options View Options button，然后切换 Show Borders 或 Show View Label。

捕获布局层次结构快照

布局检查器可让您保存正在运行的应用的布局层次结构快照，以便您与他人共享或日后参考。

快照捕获了您在使用布局检查器时通常会看到的数据，包括布局的详细 3D 渲染、View、Compose 或混合布局的组件树，以及 UI 中每个组件的详细属性。要保存快照，请点击 Snapshot Export/Import Snapshot Export/Import，然后点击 Export Snapshot。

通过点击 Import Snapshot 加载以前保存的布局检查器快照。

3D 模式

Layout Display 提供了应用视图层次结构在运行时的先进 3D 可视化功能。要使用此功能，请拍摄快照 Snapshot Export/Import，在快照检查器窗口中点击 3D Mode 按钮 3D button，然后拖动鼠标进行旋转。

Layout Inspector: 3D view
图 2. 布局的旋转 3D 视图。
Layout inspector: layer spacing view
图 3. 要展开或收缩布局层，请使用 Layer Spacing 滑块。

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

要将应用布局与参考图像（例如 UI 模型）进行比较，您可以在布局检查器中加载位图图像叠加层。

  • 要加载叠加层，请从 Layout Inspector 工具栏中选择 Load Overlay 选项。叠加层会缩放以适应布局。
  • 要调整叠加层的透明度，请使用 Overlay Alpha 滑块。
  • 要移除叠加层，请点击 Clear Overlay

检查 Compose

布局检查器允许您在模拟器或物理设备上检查正在运行的应用中的 Compose 布局。您可以使用布局检查器来检查可组合项重新组合或跳过的频率，这有助于识别应用中的问题。例如，某些编码错误可能会强制您的 UI 过度重新组合，从而导致性能不佳。某些编码错误可能会阻止您的 UI 重新组合，从而阻止您的 UI 更改显示在屏幕上。

详细了解适用于 Compose 的布局检查器

视图属性检查

布局检查器需要以下全局设置才能正常运行

adb shell settings put global debug_view_attributes 1

此选项会为设备上的所有进程生成额外的检查信息。

布局检查器在启动时会自动启用此设置。这会导致当前前台 Activity 重新启动。除非在设备上手动停用此标志，否则您不会看到另一次 Activity 重新启动。

要停用此标志，请运行以下 adb 命令

adb shell settings delete global debug_view_attributes

另外，您可以从设备的开发者选项中关闭启用视图属性检查。

独立布局检查器

为获得最佳性能，我们建议在默认嵌入模式下使用布局检查器。如果您想取消嵌入布局检查器，请前往 File（macOS 上的 Android Studio）> Settings > Tools > Layout Inspector，然后清除 Enable embedded Layout Inspector 复选框。

在独立模式下，通过点击 Layout Inspector 工具栏中的 Live Updates 选项来启用实时更新。