使用布局检查器和布局验证工具调试布局

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

借助布局验证,您可以同时预览使用不同设备和显示配置(包括可变字体大小或用户语言)时的布局,以便轻松测试各种常见的布局问题。

若要打开布局检查器,请在已连接的设备或模拟器上运行您的应用,然后依次选择 Tools > Layout Inspector。如果您在多个设备或项目之间切换,布局检查器会自动连接到在已连接设备的前台运行的可调试进程。

Sunflower 示例应用的布局检查器快照

图 1. Sunflower 示例应用的布局检查器快照。布局检查器从左到右显示以下内容:Component Tree、Layout Display 和 Attributes。

  • Component Tree:布局中视图的层次结构。
  • Layout Display:呈现应用布局在设备或模拟器上的显示效果,并显示每个视图的布局边界。
  • Attributes:所选视图的布局属性。布局检查器需要重启 activity 才能访问属性。如需了解详情,请参阅 activity 重启相关说明。

如需了解布局编辑器,请参阅布局编辑器简介

嵌入式布局检查器(实验性功能)

从 Android Studio Hedgehog 开始,您可以直接在“Running Devices”工具窗口中运行布局检查器。这项实验性功能可显著提升布局检查器的性能,节省屏幕空间,并帮助您在单个工具窗口中整理界面调试工作流。如要启用嵌入式模式,请按以下步骤操作:

  • 在 Windows 上,依次前往 File > Settings > Experimental > Layout Inspector
  • 在 macOS 上,依次前往 Android Studio > Settings > Experimental > Layout Inspector

下面介绍了如何开始使用这个模式,执行一些常见任务:

  • 如要启动布局检查器,请前往 Running Devices 窗口,然后点击 Toggle Layout Inspector “Toggle embedded layout inspector”按钮
  • 如要查看层次结构并检查每个视图的属性,请使用 Component TreeAttribute Panel 工具窗口。
  • 如要通过直接点击视图来选择视图,或通过双击视图查看代码,请启用 Toggle Deep Inspect “Toggle deep inspect”按钮
  • 如要与应用交互,请停用 Toggle Deep Inspect “Toggle deep inspect”按钮
  • 如要检查实体设备,请启用设备镜像
  • 如要使用 3D 模式,请截取布局检查器的快照 布局检查器快照

嵌入式布局检查器

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

Live Updates

Layout Display 会呈现应用布局在设备或模拟器上的显示效果,并显示每个视图的布局边界。您可以点击每个组件进行检查。

实时布局检查器可以在应用被部署到搭载 API 级别 29 或更高版本的设备或模拟器时,提供应用界面的完整实时数据分析。

如需启用实时布局检查器,请从 Layout Inspector 工具栏中选择 Live Updates 选项。

实时布局检查器包含动态布局层次结构,可随着设备上视图的变化更新 Component TreeLayout Display

选择或隔离视图

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

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

如果布局包含重叠的视图,您可以选择不在最前面的视图,方法是在 Component Tree 中点击该视图,或者旋转布局

如要处理复杂的布局,您可以隔离各个视图,以便只有部分布局显示在 Component Tree 中并在 Layout Display 中呈现。

用于隔离视图的菜单

图 3. 如要隔离某个视图,请在 Component Tree 中右键点击该视图,然后选择 Show Only SubtreeShow Only Parents

如需返回完整视图,请右键点击该视图,然后选择 Show All

隐藏布局边框和视图标签

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

“View Options”下拉菜单

图 4. 如要隐藏布局边框和视图标签,请点击 Layout Inspector 工具栏中的第二个 View Options

3D Mode

Layout Display 可在运行时对应用的视图层次结构进行高级 3D 可视化展示。如需使用该功能,请在实时布局检查器窗口中点击 3D Mode 按钮 3D 按钮,然后拖动鼠标进行旋转。

布局检查器:3D 视图

图 5. 布局的旋转 3D 视图。

布局检查器:Layer Spacing 视图

图 6. 如要展开或收起布局的图层,请使用 Layer Spacing 滑块。

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

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

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

捕获布局层次结构快照

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

快照功能会捕获您在使用布局检查器时通常会看到的数据,包括布局的详细 3D 渲染、视图的组件树、Compose 或混合布局,以及界面中每个组件的详细属性。如需保存快照,请按以下步骤操作:

  1. 打开布局检查器
  2. 布局检查器应该会自动连接到您的应用进程。如果未自动连接,请从下拉菜单中选择相应应用进程。
  3. 如需捕获快照,请点击布局检查器工具栏中的 Export snapshot “导出”图标
  4. 在出现的系统对话框中,指定快照的名称和保存位置。请务必以 *.li 扩展名保存文件。

如需加载布局检查器快照,您需要从主菜单栏中依次选择 File > Open,然后打开 *.li 文件。

布局检查器快照 GIF

图 7. 在布局检查器中截取快照。

检查 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 重启选项

图 12. 在“Run/Debug Configurations”中启用自动刷新功能。

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

布局验证

“布局验证”是一款可视化工具,用于同时预览使用不同设备和不同显示配置时的布局,可帮助您在此过程的早期发现布局中存在的问题。如需使用该功能,请点击 IDE 窗口右上角的 Layout Validation 标签页:

“Layout Validation”标签页的屏幕截图

图 13. “Layout Validation”标签页。

如需在可用的配置集之间切换,请从 Layout Validation 窗口顶部的 Reference Devices 下拉列表中选择以下某个配置:

  • Reference Devices
  • 自定义
  • Color Blind
  • Font Sizes

布局验证工具中的下拉菜单屏幕截图

图 14. “Reference Devices”下拉菜单选项。

Reference Devices

参考设备是指我们建议您针对其进行测试的一组设备,包括手机、可折叠设备、平板电脑和桌面设备的界面。您应该可以预览您的布局在这一组参考设备上的显示效果:

不同参考设备的布局预览的屏幕截图

图 15. 布局验证工具中的参考设备预览。

自定义

如需自定义要预览的显示配置,请从各种设置(包括语言、设备或屏幕方向)中进行选择:

在布局验证工具中自定义设备显示界面

图 16. 在布局验证工具中配置自定义显示界面。

Color Blind

为了方便色盲用户使用您的应用,请对常见的色盲类型进行模拟,以此验证布局:

不同色盲类型的模拟预览的屏幕截图

图 17. 布局验证工具中的色盲模拟预览。

Font Sizes

验证各种字体大小下的布局;使用较大的字体测试布局,改进对视力障碍用户的无障碍支持:

不同字体大小下的应用布局预览(使用大字体时有可见的布局错误)

图 18. 布局验证工具中的不同字体大小预览。