Android Studio 4.0+ 中新的 UI 层次结构调试工具

调试 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，可是里面少了一些东西: 底部的导航标签。看一下布局文件，咱们能够看到底部的导航视图是存在的，可是屏幕却没有显示它。

看来布局检查器大显身手的时候到了: 咱们运行一下程序并检查一下这个问题，成功链接应用进程后，切换到旋转视图会看到应用的 UI 出现了问题。

首先咱们能够看到 LinearLayout 里布局了一个工具栏 (toolbar)，而后是 navigation host。在它下面，您能够看到导航栏位于最下方——看来底部的导航栏被挤出了屏幕。

有多是 navigation host 的尺寸设置错了，咱们尝试把它的高度设置为 'wrap_content':

<!-- Copyright 2019 Google LLC.
SPDX-License-Identifier: Apache-2.0 -->

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:defaultNavHost="true"
        android:layout_weight="9"
        app:navGraph="@navigation/mobile_navigation" />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/bottom_nav_menu" />
</LinearLayout>
复制代码

回到布局检查器，您能够看到 LinearLayout 的尺寸正常了，可是底部的导航栏的位置不对:

有不少方法能够解决这个问题: 咱们能够设置 navigation host 和底部导航栏的 layout_weight 参数，或者咱们能够将 LinearLayout 换成 ConstraintLayout，可是切换布局不是本文的重点，因此咱们设置一下 layout_weights 参数:

<!-- Copyright 2019 Google LLC.
SPDX-License-Identifier: Apache-2.0 -->

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:defaultNavHost="true"
        android:layout_weight="9"
        app:navGraph="@navigation/mobile_navigation" />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/bottom_nav_menu" />
</LinearLayout>
复制代码

而后获得以下结果:

再运行应用的时候，布局就正常了。

快快尝试一下布局检查器的新特性，而后和咱们分享您的使用体验吧。欢迎你们向咱们反馈问题，或者告诉咱们新的特性需求。

点击这里查看 Android 官方中文文档 —— 使用布局检查器调试布局