調試 UI 的問題有時很棘手，Android Studio 4.0 內置了全新的布局檢查器 (Layout Inspector)，它的使用效果類似 Chrome 開發者工具，可以幫助開發者調試 Android 應用的 UI (用戶界面)。布局檢查器可用於設備和 Android 模擬器，它可以展示視圖的層次結構。該工具有助於定位由根節點引起的問題。和上壹個版本不同的是，新版本的布局檢查器可以以三維的視角來展現視圖層次結構，您可以直觀地看到視圖的布局方式。通過該工具您可以逐層來檢查視圖層次結構，同時它還會展示所有視圖的屬性，包括繼承自視圖父類的屬性。
接下來我們壹起了解壹下最新版本的布局檢查器是如何發揮作用的。首先點擊窗口的 View 菜單，找到 Tool Window 子菜單，然後選擇 Layout Inspector ，這樣就打開了布局檢查器窗口。
布局檢查器僅顯示正在運行的進程的 UI 層次結構。也就是說您需要連接到設備或者模擬器上的壹個正在運行的可調試應用，有兩種方式可以滿足該條件:
選擇所需的應用進程後，布局檢查器會基於當前 UI 層次結構創建壹個快照。如果您啟用了 Live Updates 選項，那麽當您在設備上操作界面時，快照會動態更新。
該版本的布局檢查器延續了之前版本的功能並且更加多樣化。首先，布局檢查器可以用兩種方式顯示 UI 層次結構: 以二維的輪廓格式，或者以壹種稱為旋轉模式 (rotation mode) 的三維視圖形式。
點擊 rotation 按鈕會在二維和三維視圖之間進行切換。當處於旋轉模式時，您可以旋轉 UI 層次結構。旋轉操作可以幫助您更直觀地了解視圖的組織結構。請註意，旋轉僅在 Android 10 或以上的設備上才可以使用。
右側的窗格會顯示所選視圖的所有已聲明的屬性和繼承的屬性。您可以通過點擊任何已聲明的屬性來打開布局相關的 xml 文件。和旋轉特性壹樣，這個功能也僅適用於 Android 10 以上的設備。
通過布局檢查器您還可以將新設計的界面和現有 UI 進行比較。要加載布局設計，點擊 Load Overlay，然後選擇壹個布局設計。圖片成功加載後，您可以改變它的半透明值 (alpha) 來比較現有布局與所選的設計布局之間的區別。
現在大家已經了解了布局檢查器的使用方式。那麽接下來我們通過實例來看壹下如何使用它來解決應用的問題。這裏我們有壹個簡單的示例應用，它包含壹個 fragment，其中有壹些靜態文本和壹個圖片。如果您在閱讀文章時想同步進行操作，可以先按照下面步驟操作創建工程。
當您運行應用的時候，您會看到壹個可愛的 android，但是裏面少了壹些東西: 底部的導航標簽。看壹下布局文件，我們可以看到底部的導航視圖是存在的，但是屏幕卻沒有顯示它。
看來布局檢查器大顯身手的時候到了: 我們運行壹下程序並檢查壹下這個問題，成功連接應用進程後，切換到旋轉視圖會看到應用的 UI 出現了問題。
首先我們可以看到 LinearLayout 裏布局了壹個工具欄 (toolbar)，然後是 navigation host。在它下面，您可以看到導航欄位於最下方——看來底部的導航欄被擠出了屏幕。
有可能是 navigation host 的尺寸設置錯了，我們嘗試把它的高度設置為 'wrap_content':
回到布局檢查器，您可以看到 LinearLayout 的尺寸正常了，但是底部的導航欄的位置不對:
有很多方法可以解決這個問題: 我們可以設置 navigation host 和底部導航欄的 layout_weight 參數，或者我們可以將 LinearLayout 換成 ConstraintLayout，但是切換布局不是本文的重點，所以我們設置壹下 layout_weights 參數:
然後得到如下結果:
再運行應用的時候，布局就正常了。
快快嘗試壹下布局檢查器的新特性，然後和我們分享您的使用體驗吧。歡迎大家向我們反饋問題，或者告訴我們新的特性需求。
點擊這裏 查看 Android 官方中文文檔 —— 使用布局檢查器調試布局