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，其中有一些靜態文本和一個圖片。如果您在閱讀文章時想同步進行操作，可以先按照下面步驟操作創建工程。
- 打開 Android Studio 4.0，然后在 File 菜單里選擇 New Project；
- 選擇 Bottom Navigation Activity，點擊 Next 然后點擊 Finish；
- 替換 activity_main.xml 和 fragment_home.xml 的內容；
- 替換 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 官方中文文檔 —— 使用布局檢查器調試布局