调试UI问题可能很棘手。Android Studio 4.0带有更新的布局检查器,可让您以类似于Chrome开发者工具的方式调试Android应用程序UI(用户界面)。布局检查器可与您的设备或Android仿真器一起使用,并显示当前视图层次。这有助于查明问题并发现根本原因。与以前的版本不同,更新的布局检查器可以3D透视图显示视图层次结构,使您可以直观地查看视图的布局方式。这样,您可以检查图层中的视图层次结构。它还显示了视图的所有属性,包括从其父级继承的属性。

让我们看看Layout Inspector的最新版本是如何工作的。要打开布局检查器,请单击“ 查看”,然后在“工具Windows”菜单下选择“ 布局检查器 ”。这将打开“布局检查器”窗口。

从“视图”菜单中打开“布局检查器”

布局检查器仅显示正在运行的进程的UI层次结构。这意味着您需要连接到设备或仿真器上的可调试运行的应用程序。有两种方法可以做到这一点:

  • 如果您没有正在运行的进程,请连接到设备或启动Android Emulator实例,然后单击“ 运行”以启动应用程序。
  • 如果您有正在运行的应用程序进程,请单击“ 选择进程”,选择您正在运行的设备,然后从所选运行设备下的列表中选择正在运行的应用程序。
连接到正在运行的进程

选择应用程序流程后,布局检查器会创建当前UI层次结构的快照。如果选择“ 实时更新”选项,则在与设备上的应用程序交互时,快照将动态更新。

此版本的Layout Inspector与以前的版本相似,但功能更多。首先,Layout Inspector可以通过两种方式显示UI层次结构:以通常的2D轮廓格式,或在称为Rotation mode的3D视图中。

单击旋转按钮以切换到旋转(3D)模式

单击旋转按钮可在UI层次结构的2D和3D视图之间切换。单击旋转按钮可在两种模式之间切换。处于旋转模式时,可以旋转UI层次结构的图像。旋转帮助您查看视图的布局方式。请注意,轮换仅在设备API级别29及更高版本上可用。

单击并拖动鼠标以旋转应用程序

您也可以选择一个视图并单击鼠标右键以仅显示其子级。

选择“仅显示子树”以仅显示所选视图的子视图

同样,您可以显示所选视图的父级。

选择“仅显示父级”以仅显示所选视图的子级视图

右侧窗格显示所选视图的所有已声明和继承的属性。您可以通过单击任何声明的属性下方的链接导航到布局的相应xml文件。与轮换功能一样,此功能仅在运行API级别29或更高级别的设备上有效。

单击属性以打开源文件

使用布局检查器,您还可以加载新设计并将其与当前UI进行比较。

要加载设计,请单击“ 加载覆盖图”并选择一个设计。加载图像后,您可以更改叠加层的Alpha值以查看当前布局和设计之间的差异。


运行中的布局检查器

到目前为止,我们已经了解了布局检查器的工作原理,现在让我们看看它如何帮助解决应用程序问题。在这里,我们有一个简单的示例应用程序,该应用程序由一个片段以及一些静态内容的文本和图像组成。

如果您想在阅读文章时尝试一下,请先执行以下步骤。

  1. 打开Android Studio 4.0,然后从“文件”菜单中选择“新建项目”。
  2. 选择底部导航活动,单击下一步,然后单击完成。
  3. 替换activity_main.xmlfragment_home.xml的内容。
  4. 替换HomeFragment.kt的内容。

运行该应用程序时,您会看到一个可爱的android系统-但缺少一些内容:底部导航选项卡。查看布局文件,我们可以验证是否存在底部导航视图,但是某种程度上它不会出现在屏幕上。

底部导航选项卡不显示

这似乎是尝试Layout Inspector的好机会!让我们运行该应用程序并检查此问题。连接到应用程序流程后切换到旋转视图,表明应用程序UI存在问题。

轮流检查该应用程序可发现导航选项卡已推出屏幕之外

我们首先看到的是,工具栏位于LinearLayout内部,其后是导航主机。在其下,您会在底部看到导航选项卡。底部栏似乎已推离屏幕。

导航主机的大小可能是错误的。尝试将导航主机的高度设置为“ wrap_content”:

切换回Layout Inspector,可以看到线性布局具有正确的大小,但是底部导航选项卡未放置在正确的位置:

导航选项卡不在正确的位置

有多种解决方法。我们可以将布局权重添加到导航主机和底部导航选项卡,或者可以切换到使用约束布局而不是线性布局,但是切换布局不在本文讨论范围之内。因此,让我们添加布局权重:

结果如下:

导航栏显示在正确的位置
分类: 未分类

bayshier

愿世间每个美好的灵魂都能被温柔以待

发表评论

电子邮件地址不会被公开。 必填项已用*标注