android开发调试工具,使用布局检查器和布局验证工具调试布局

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

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

注意:目前,我们建议不要在搭载 Android 12 开发者预览版的设备中使用布局检查器。

打开布局检查器

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

在连接的设备或模拟器上运行您的应用。

依次点击 Tools > Layout Inspector。

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

Component Tree:布局中视图的层次结构。

Layout Display:按照应用布局在设备或模拟器上的显示效果呈现布局,并显示每个视图的布局边界。

布局检查器工具栏:布局检查器的工具。

Attributes:所选视图的布局属性。

88462b5a47814f63007d26fc842962ed.png

图 1. 布局检查器

选择视图

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

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

隔离视图

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

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

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

隐藏布局边框和视图标签

如需隐藏布局元素的边界框或视图标签,请点击 Layout Display 顶部的 View Options 图标

5716fd50b52b6a92469403e7a79b2aed.png,然后切换 Show Borders 或 Show View Label。

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

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

如需加载叠加层,请点击布局检查器顶部的 Load Overlay 图标

7be27c66c15586be2ea3030fe79e2450.png。系统会缩放叠加层以适合布局。

如需调整叠加层的透明度,请使用 Overlay Alpha 滑块。

如需移除叠加层,请点击 Clear Overlay 图标

cd1ffe4a62cf560ca1cee073338ab860.png

实时布局检查器

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

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

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

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

8b25980c600b506aba6a0d7400598253.png

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

bd84cbd87a2a0d3d8e258b2402356885.png

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

布局验证

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

06bc6d8d47c5afb3b4a658c558bcccd3.png

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

Pixel Devices

自定义

色盲

字体大小

a6adbdf4331b1cf2ad83415ef518efbd.gif

Pixel Devices

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

1f3b74962eff060930d825764c28ac12.gif

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

自定义

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

583717c6b5bcf4bf09ec602133cfcc5d.gif

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

色盲

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

b669a64f7c159bd85654f3cadcbcb5eb.png

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

字体大小

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

332901c0ef49c4ea5d541c68ea500cbe.png

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值