Android Studio 调试利器-使用布局检查器和布局验证工具调试布局Layout Inspector

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

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

打开布局检查器

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

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

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

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

图 1. 布局检查器

选择视图

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

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

隔离视图

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

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

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

隐藏布局边框和视图标签

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

image.png

,然后切换 Show BordersShow View Label

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

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

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

    。系统会缩放叠加层以适合布局。
  • 如需调整叠加层的透明度,请使用 Overlay Alpha 滑块。
  • 如需移除叠加层,请点击 Clear Overlay 图标
    image.png

实时布局检查器

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

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

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

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

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

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

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

布局验证

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

image.png

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

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

image.png

动态图地址

Pixel Devices

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

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

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

自定义

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

image.png

动态图地址

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

色盲

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

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

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

字体大小

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

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

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

HierarchyviewerAndroid Studio(3.1)以上

作为传统的Android 层级视图浏览器,在Android 开发领域,受到了广大开发者的青睐,但是很遗憾,在Android SDK 25.3.0 google已经废弃了。。。
如果你还是不想舍弃,使用它还是按照如下方式可以找到的:

image
image

到这里我们已经找到另一个被Google废弃的“Android device Monitor”工具,点击下图图标

image

哇!!!看到了我们熟悉的界面,喜欢的快拿去玩耍吧!
不过,由于Google对已废弃的东西,不是很友好,现在AS调用它奇卡无比(不知道是不是我的电脑太low了),所以我还是推荐大家使用如下替代产品!

Layout Inspector

打开方式AS→tools→Layout Inspector:

image

选择我们的视图打开:

image

视图层级一幕了然,界面美观易用,快去愉快的玩耍吧!

参考网址:
官方文档:使用布局检查器和布局验证工具调试布局
Android进阶 - 视图层级实时分析
Android Studio(3.1)以上查看UI布局层级

你可能感兴趣的:(Android Studio 调试利器-使用布局检查器和布局验证工具调试布局Layout Inspector)