使用布局检查器调试布局

Android Studio 中的布局检查器允许您通过显示视图层次结构来调试应用的布局,您可以在其中检查每个视图的属性。使用布局检查器,您可以将应用布局与设计模型进行比较,显示应用的放大或 3D 视图,并在运行时检查其布局的详细信息。当您的布局是在运行时构建而不是完全在 XML 中构建,并且布局的行为异常时,这尤其有用。

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

开始使用

要启动布局检查器,请运行您的应用,转到“正在运行的设备”窗口,然后点击“切换布局检查器” 切换嵌入式布局检查器按钮. 如果您在多个设备或项目之间切换,布局检查器会自动连接到已连接设备前台正在运行的可调试进程。

以下是如何执行一些常见任务

  • 要查看层次结构并检查每个视图的属性,请使用“组件树”和“属性”工具窗口。布局检查器可能需要重新启动活动才能访问属性。有关更多信息,请参阅查看属性检查

  • 要通过直接单击视图来选择视图,或通过双击视图导航到代码,请启用**切换深度检查** 切换深度检查按钮
  • 要与应用交互,请禁用**切换深度检查** 切换深度检查按钮
  • 要检查物理设备,请启用设备镜像
  • 要启用在更新应用 UI 时进行实时更新,请检查实时编辑是否已启用。
  • 要使用3D 模式,请获取布局检查器快照 布局检查器快照,然后单击**3D 模式** 3D 按钮

选择或隔离视图

视图通常会绘制用户可以查看和交互的内容。**组件树**实时显示应用的层次结构,其中包含每个视图组件,这有助于调试应用的布局,因为您可以可视化应用中的元素及其关联的值。

要选择视图,请在**组件树**或**布局显示**中单击它。所选视图的所有布局属性都显示在**属性**面板中。

如果布局包含重叠的视图,则在**深度检查**模式下 切换深度检查按钮右键单击时,您可以看到区域中的所有视图。要选择不在最前面的视图,请在**组件树**中单击它或旋转布局

要处理复杂的布局,您可以隔离各个视图,以便仅在**组件树**中显示布局的子集并在**布局显示**中呈现。要隔离视图,请获取快照 布局检查器快照,右键单击**组件树**中的视图,然后选择**仅显示子树**或**仅显示父级**。要返回完整视图,请右键单击该视图并选择**显示全部**。在隔离视图之前,必须先获取快照。

隐藏布局边框和视图标签

要隐藏布局元素的边界框或视图标签,请单击**视图选项** 视图选项按钮(位于**布局显示**的顶部),然后切换**显示边框**或**显示视图标签**。

捕获布局层次结构快照

布局检查器允许您保存正在运行的应用的布局层次结构的快照,以便您可以与他人共享或稍后参考它们。

快照捕获您在使用布局检查器时通常会看到的数据,包括布局的详细 3D 渲染、视图、Compose 或混合布局的组件树,以及 UI 的每个组件的详细属性。要保存快照,请单击**快照导出/导入** 快照导出/导入,然后单击**导出快照**。

通过单击**导入快照**加载先前保存的布局检查器快照。

3D 模式

**布局显示**具有应用运行时视图层次结构的高级 3D 可视化功能。要使用此功能,请获取快照 快照导出/导入,单击快照检查器窗口中的**3D 模式**按钮 3D 按钮,然后通过拖动鼠标进行旋转。

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

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

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

  • 要加载叠加,请从**布局检查器**工具栏中选择**加载叠加** 选项。叠加将缩放以适合布局。
  • 要调整叠加的透明度,请使用**叠加 Alpha**滑块。
  • 要移除叠加,请单击**清除叠加**

检查 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

或者,从设备的开发者选项中关闭启用视图属性检查

独立布局检查器

为了获得最佳性能,我们建议使用默认的嵌入式模式下的布局检查器。如果要取消嵌入布局检查器,请转到**文件**(macOS 上的**Android Studio**)> **设置** > **工具** > **布局检查器**,然后清除**启用嵌入式布局检查器**复选框。

在独立模式下,通过单击**布局检查器**工具栏中的**实时更新** 选项来启用实时更新。