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

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

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

若要打开布局检查器,请在已连接的设备或模拟器上运行您的应用,然后依次选择 Tools > Layout Inspector

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

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

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

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

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 中呈现。

用于隔离视图的菜单

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

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

隐藏布局边框和视图标签

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

“View Options”下拉菜单

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

3D Mode

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

布局检查器:3D 视图

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

布局检查器:Layer Spacing 视图

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

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

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

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

布局验证

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

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

图 6. “Layout Validation”标签页。

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

  • Reference Devices
  • Custom(自定义)
  • Color Blind
  • Font Sizes

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

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

Reference Devices

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

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

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

Custom

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

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

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

Color Blind

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

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

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

Font Sizes

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

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

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

捕获布局层次结构快照

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

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

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

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

布局检查器快照 GIF

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

检查 Compose

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

布局检查器中的 Compose 重组计数

在调试 Compose 布局时,了解可组合项何时重组对于理解界面是否正确实现非常重要。例如,如果重组次数过多,您的应用可能会执行不必要的操作。另一方面,未按预期重组的组件可能会导致意外行为。

借助布局检查器,您可以查看布局层次结构中的各个可组合项是执行了重组还是跳过了重组。此类信息会在您与应用互动时实时显示。

首先,请确保您的应用使用的是 API 级别 29 或更高级别,并且使用的是 Compose 1.2.0-alpha03 或更高版本。然后,按照常规方法部署您的应用。

布局检查器中的组合和跳过计数器

图 13. 布局检查器中的组合和跳过计数器。

打开 Layout Inspector 窗口,然后连接到应用进程。在 Component Tree 中,布局层次结构旁会显示两列。第一列显示每个节点的组合次数,第二列显示每个节点的跳过次数。选择可组合项节点时,系统将显示该可组合项的尺寸和参数。不过,对于内联函数,系统无法显示参数。从 Component TreeLayout Display 中选择可组合项时,您还可以在 Attributes 窗格中看到类似信息。

重置计数有助于您了解与应用进行特定交互期间的重组或跳过情况。如果要重置计数,请点击 Component Tree 窗格顶部附近的 Reset

在布局检查器中启用组合和跳过计数器

图 14. 在布局检查器中启用组合和跳过计数器。

Compose 语义

在 Compose 中,语义无障碍服务和测试框架可以理解的替代方式描述您的界面。您可以使用布局检查器检查 Compose 布局中的语义信息。

使用布局检查器显示的语义信息

图 15. 使用布局检查器显示的语义信息。

选择 Compose 节点时,请使用 Attributes 窗格检查相应节点是直接声明语义信息、合并子元素中的语义,还是二者兼有。如需快速识别哪些节点包含已声明或合并的语义,请在 Component Tree 窗格中选择 View options 下拉菜单,然后选择 Highlight Semantics Layers。这样一来,系统只会突出显示树中包括语义的节点,您可以使用键盘在节点之间快速导航。

避免 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 重启选项

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

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