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

借助 Android Studio 中的布局检查器,您可以在模拟器或实体设备上检查和调试正在运行的应用中的布局。您可以检查每个组件的属性,将应用布局与设计模型进行比较,以及显示应用的放大视图。

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

如需了解详情,请参阅调试 Compose 界面

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

开始使用

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

下面介绍了如何执行一些常见任务:

  • 如要查看视图层次结构并检查每个组件的属性,请使用 Component TreeAttributes 工具窗口。布局检查器可能需要重启 activity 才能访问属性。
  • 如需选择组件,请先启用 Toggle Deep Inspect “Toggle deep inspect”按钮,然后点击相应组件。或者,您也可以通过双击组件来找到代码。
  • 如要与应用交互,请停用 Toggle Deep Inspect “Toggle deep inspect”按钮
  • 如要检查实体设备,请启用设备镜像
  • 如需在更新应用界面时启用实时更新,请确保已启用实时编辑

选择或隔离组件

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

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

如果布局包含重叠的组件,您可以在深度检查模式 “Toggle deep inspect”按钮 下右键点击某个区域,查看该区域中的所有组件。如需选择某个不在前面的组件,请在 Component Tree 中点击该组件。

如要处理复杂的布局,您可以隔离各个组件,以便只有部分布局显示在 Component Tree 中并在 Layout Display 中呈现。如要隔离某个组件,请在 Component Tree 中右键点击该组件,然后选择 Show Only SubtreeShow Only Parents。如需返回完整视图,请右键点击该组件,然后选择 Show All

隐藏布局边框和视图标签

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

捕获布局层次结构快照

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

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

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

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

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

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

独立布局检查器

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

在独立模式下,如需启用实时更新,请从 布局检查器 工具栏中点击 实时动态 选项。

其他资源

查看内容