使用布局检查器调试您的布局

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

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

启动布局检查器时,它会自动启用该设置。这会导致当前前台活动重新启动。除非手动在设备上禁用该标志,否则您不会看到另一个活动重新启动。

要禁用该标志,请运行以下 adb 命令

adb shell settings delete global debug_view_attributes

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

独立布局检查器

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

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