Google 致力于为黑人社区推动种族平等。查看具体举措

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

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

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

打开布局检查器

如需打开 Layout Inspector,请执行以下操作:

  1. 在连接的设备或模拟器上运行应用
  2. 依次点击 Tools > Layout Inspector

如图 1 所示,布局检查器将显示以下内容:

  1. Component Tree:布局中视图的层次结构。
  2. Layout Display:按照应用布局在设备或模拟器上的显示效果呈现布局,并显示每个视图的布局边界。
  3. 布局检查器工具栏:布局检查器的工具。
  4. Attributes:所选视图的布局属性。

布局检查器的屏幕截图,其中包含指示“Component Tree”、“布局检查器工具栏”、“Layout Display”和“Attributes”的标签

图 1. 布局检查器

选择视图

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

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

隔离视图

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

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

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

隐藏布局边框和视图标签

如需隐藏布局元素的边界框或视图标签,请点击 Layout Display 顶部的 View Options 图标 实时布局检查器视图选项图标,然后切换 Show BordersShow View Label

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

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

  • 如需加载叠加层,请点击布局检查器顶部的 Load Overlay 图标 。系统会缩放叠加层以适合布局。
  • 如需调整叠加层的透明度,请使用 Overlay Alpha 滑块。
  • 如需移除叠加层,请点击 Clear Overlay 图标

实时布局检查器

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

如需启用实时布局检查器,请依次转到 File > Settings > Experimental,勾选 Enable Live Layout Inspector 旁边的框,然后点击 Layout Display 上方 Live updates 旁边的复选框。

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

此外,使用属性值解析堆栈,您可以调查资源属性值在源代码中的来源位置,并按照属性窗格中的超链接导航到其位置。

属性值解析堆栈

图 2. “Attributes”面板中的属性值,其中包含指向属性定义的超链接。

最后,Layout Display 可在运行时对应用的视图层次结构进行高级 3D 可视化。如需使用该功能,只需在实时布局检查器窗口中点击相应布局,然后拖动鼠标旋转该布局即可。如需展开或收起布局的图层,请使用 Layer Spacing 滑块。

布局检查器:3D 视图

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

布局验证

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

Android Studio IDE 中的“Layout Validation”标签页的屏幕截图

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

  • Pixel Devices
  • 自定义
  • 色盲
  • 字体大小


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

Pixel Devices

预览布局在 Pixel 设备上的显示效果:

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

图 4. 布局验证工具中的 Pixel 设备预览

自定义

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

展示如何在布局验证工具中自定义设备显示的动画

图 5. 在布局验证工具中配置自定义显示

色盲

为了方便色盲用户使用您的应用,请通过常见色盲类型的模拟验证布局:

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

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

字体大小

验证各种字体大小下的布局,并通过使用较大的字体测试布局,改进适用于视力障碍用户的无障碍功能:

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

图 7. 布局验证工具中的可变字体大小预览