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 官方中文文檔 —— 使用佈局檢查器調試佈局