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

借助 Android Studio 中的布局检查器,您可以显示一个视图层次结构,您可以在其中检查每个视图的属性,从而调试应用的布局。借助布局检查器,您可以将应用布局与设计模型进行比较、显示应用的放大视图或 3D 视图,以及在运行时检查应用布局的细节。如果布局是在运行时(而不是完全在 XML 中)构建的并且布局行为出现异常,此功能会特别有用。

如需了解适用于 View 的布局编辑器,请参阅布局编辑器简介

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

开始

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

执行一些常见任务的方法如下:

  • 如需查看层次结构并检查每个视图的属性,请使用 Component TreeAttributes 工具窗口。布局检查器可能需要重启 activity 才能访问这些属性。如需了解详情,请参阅避免 activity 重启
  • 如要通过直接点击视图来选择视图,或通过双击视图查看代码,请启用 Toggle Deep Inspect “Toggle deep inspect”按钮
  • 如要与应用交互,请停用 Toggle Deep Inspect “Toggle deep inspect”按钮
  • 如需检查实体设备,请启用设备镜像
  • 如需在更新应用界面时启用实时更新,请检查是否已启用实时编辑
  • 如需使用 3D 模式,请截取布局检查器的快照 布局检查器快照,然后点击 3D 模式 3D 按钮

选择或隔离视图

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

如要选择某个视图,请在 Component TreeLayout Display 中点击该视图。所选视图的所有布局属性都会显示在 Attributes 面板中。

如果布局包含重叠的视图,当您在 Deep Inspect 模式 “Toggle deep inspect”按钮 中右键点击时,您可以看到某个区域中的所有视图。如需选择一个不在前面的视图,请在 Component Tree 中点击该视图或旋转布局

如需处理复杂的布局,您可以隔离各个视图,以便只有部分布局显示在 Component Tree 中并在 Layout Display 中呈现。如需隔离某个视图,请截取快照 布局检查器快照,在 Component Tree 中右键点击该视图,然后选择 Show Only SubtreeShow Only Parents。如需返回完整视图,请右键点击该视图,然后选择 Show All。您必须先截取快照,然后才能隔离视图。

隐藏布局边框和视图标签

如需隐藏布局元素的边界框或视图标签,请点击 Layout Display 顶部的 View Options 图标 “View Options”按钮,然后切换 Show BordersShow View Label

捕获布局层次结构快照

借助布局检查器,您可以保存正在运行的应用的布局层次结构的快照,以便与他人分享或日后引用。

快照功能会捕获您在使用布局检查器时通常会看到的数据,包括布局的详细 3D 渲染、视图的组件树、Compose 或混合布局,以及界面中每个组件的详细属性。如需保存快照,请依次点击快照导出/导入 快照导出/导入导出快照

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

3D Mode

Layout Display 可在运行时对应用视图层次结构进行高级 3D 可视化效果。如需使用此功能,请拍摄快照 快照导出/导入,点击快照检查器窗口中的 3D 模式按钮 3D 按钮,然后拖动鼠标进行旋转。

布局检查器:3D 视图
图 2. 布局的旋转 3D 视图。
布局检查器:Layer Spacing 视图
图 3. 如需展开或收起布局的图层,请使用 Layer Spacing 滑块。

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

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

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

检查 Compose

借助布局检查器,您可以在模拟器或实体设备上检查正在运行的应用中的 Compose 布局。您可以使用布局检查器检查某个可组合项执行重组或跳过重组的频率,这有助于识别应用存在的问题。例如,某些编码错误可能会强制界面过度重组,从而导致性能不佳。某些编码错误可能会阻止界面重组,进而阻止界面更改呈现在屏幕上。

详细了解 Compose 布局检查器

避免 activity 重启

布局检查器需要以下全局设置之一才能正常运行。如果您未指定全局设置,布局检查器会自动进行设置。

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    此选项会生成用于检查指定进程的额外信息。

  2. adb shell settings put global debug_view_attributes 1

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

更改全局设置可能会导致 activity 重启。如需避免 activity 重启,您可以在 Android Studio 中更改相关设置,或更改设备设置中的开发者选项

如需在 Android Studio 中启用自动刷新功能,请在菜单中依次选择 Run > Edit Configurations,以打开 Run/Debug Configurations。然后,进入 Miscellaneous 标签页,并勾选 Layout Inspector Options 下的 Connect to Layout Inspector without restarting activity 复选框。

“Run/Debug Configurations”中的 activity 重启选项
图 4. Run/Debug Configurations 对话框中启用自动刷新。

或者,您也可以启用设备的开发者选项,然后在设备的开发者设置中开启启用视图属性检查功能

独立的布局检查器

为了获得最佳性能,我们建议在默认的嵌入式模式下使用布局检查器。如果您想取消嵌入布局检查器,请依次前往 File(在 macOS 上为 Android Studio)> Settings > Tools > Layout Inspector,然后取消选中 Enableembedded Layout Inspector 复选框。

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