调试 UI 的问题有时很棘手，Android Studio 4.0 内置了全新的布局检查器 (Layout Inspector)，它的使用效果类似 Chrome 开发者工具，可以帮助开发者调试 Android 应用的 UI (用户界面)。布局检查器可用于设备和 Android 模拟器，它可以展示视图的层次结构。该工具有助于定位由根节点引起的问题。和上一个版本不同的是，新版本的布局检查器可以以三维的视角来展现视图层次结构，您可以直观地看到视图的布局方式。通过该工具您可以逐层来检查视图层次结构，同时它还会展示所有视图的属性，包括继承自视图父类的属性。

接下来我们一起了解一下最新版本的布局检查器是如何发挥作用的。首先点击窗口的 View 菜单，找到 Tool Window 子菜单，然后选择 Layout Inspector ，这样就打开了布局检查器窗口。

布局检查器仅显示正在运行的进程的 UI 层次结构。也就是说您需要连接到设备或者模拟器上的一个正在运行的可调试应用，有两种方式可以满足该条件:

• 如果您没有正在运行的进程，那么需要首先连接到一台设备或者启动一个 Android 模拟器实例 ，并且点击窗口的 Run 按钮来启动应用；
• 如果您的应用进程已经运行，点击 select process ，选择正在运行的设备，然后从设备右侧的列表来选择一个已运行的应用。

选择所需的应用进程后，布局检查器会基于当前 UI 层次结构创建一个快照。如果您启用了 Live Updates 选项，那么当您在设备上操作界面时，快照会动态更新。

该版本的布局检查器延续了之前版本的功能并且更加多样化。首先，布局检查器可以用两种方式显示 UI 层次结构: 以二维的轮廓格式，或者以一种称为旋转模式 (rotation mode) 的三维视图形式。

点击 rotation 按钮会在二维和三维视图之间进行切换。当处于旋转模式时，您可以旋转 UI 层次结构。旋转操作可以帮助您更直观地了解视图的组织结构。请注意，旋转仅在 Android 10 或以上的设备上才可以使用。

右侧的窗格会显示所选视图的所有已声明的属性和继承的属性。您可以通过点击任何已声明的属性来打开布局相关的 xml 文件。和旋转特性一样，这个功能也仅适用于 Android 10 以上的设备。

通过布局检查器您还可以将新设计的界面和现有 UI 进行比较。要加载布局设计，点击 Load Overlay，然后选择一个布局设计。图片成功加载后，您可以改变它的半透明值 (alpha) 来比较现有布局与所选的设计布局之间的区别。

布局检查器示例

现在大家已经了解了布局检查器的使用方式。那么接下来我们通过实例来看一下如何使用它来解决应用的问题。这里我们有一个简单的示例应用，它包含一个 fragment，其中有一些静态文本和一个图片。如果您在阅读文章时想同步进行操作，可以先按照下面步骤操作创建工程。

1. 打开 Android Studio 4.0，然后在 File 菜单里选择 New Project；
2. 选择 Bottom Navigation Activity，点击 Next 然后点击 Finish；
3. 替换 activity_main.xml 和 fragment_home.xml 的内容；
4. 替换 HomeFragment.kt 的内容。

当您运行应用的时候，您会看到一个可爱的 android，但是里面少了一些东西: 底部的导航标签。看一下布局文件，我们可以看到底部的导航视图是存在的，但是屏幕却没有显示它。