使用 Android Studio 中的布局檢查器,您可以將應用布局與設計模型進行比較、顯示應用的放大視圖或 3D 視圖,以及在運行時檢查應用布局的細節。如果布局是在運行時(而不是完全在 XML 中)構建的并且布局行為出現異常,該工具會非常有用。
使用布局驗證,您可以在不同的設備和顯示配置(包括可變字體大小或用戶語言)上同時預覽布局,以便輕松測試各種常見的布局問題。
打開布局檢查器
如需打開 Layout Inspector,請執行以下操作:
- 在連接的設備或模擬器上運行應用。
- 依次點擊 Tools > Layout Inspector。
如圖 1 所示,布局檢查器將顯示以下內容:
- Component Tree:布局中視圖的層次結構。
- Layout Display:按照應用布局在設備或模擬器上的顯示效果呈現布局,并顯示每個視圖的布局邊界。
- 布局檢查器工具欄:布局檢查器的工具。
- Attributes:所選視圖的布局屬性。
圖 1. 布局檢查器
選擇視圖
如要選擇某個視圖,請在 Component Tree 或 Layout Display 中點擊該視圖。所選視圖的所有布局屬性都會顯示在 Attributes 面板中。
如果布局包含重疊的視圖,您可以選擇不在前面的視圖,方法是在 Component Tree 中點擊該視圖,或者旋轉布局并點擊所需視圖。
隔離視圖
如要使用復雜的布局,您可以隔離各個視圖,以便只有布局的一部分顯示在 Component Tree 中并呈現在 Layout Display 中。
如要隔離某個視圖,請在 Component Tree 中右鍵點擊該視圖,然后選擇 Show Only Subtree 或 Show Only Parent。
如需返回完整視圖,請右鍵點擊該視圖,然后選擇 Show All。
隱藏布局邊框和視圖標簽
如需隱藏布局元素的邊界框或視圖標簽,請點擊 Layout Display 頂部的 View Options 圖標
,然后切換 Show Borders 或 Show View Label。
將應用布局與參考圖像疊加層進行比較
如需將應用布局與參考圖像(如界面模型)進行比較,您可以在布局檢查器中加載位圖圖像疊加層。
- 如需加載疊加層,請點擊布局檢查器頂部的 Load Overlay 圖標 image.png
。系統會縮放疊加層以適合布局。 - 如需調整疊加層的透明度,請使用 Overlay Alpha 滑塊。
- 如需移除疊加層,請點擊 Clear Overlay 圖標 image.png
實時布局檢查器
實時布局檢查器可以在應用被部署到搭載 API 級別 29 或更高版本的設備或模擬器時,提供應用界面的完整實時數據分析。
如需啟用實時布局檢查器,請依次轉到 File > Settings > Experimental,勾選 Enable Live Layout Inspector 旁邊的框,然后點擊 Layout Display 上方 Live updates 旁邊的復選框。
實時布局檢查器包含動態布局層次結構,可隨著設備上視圖的變化更新 Component Tree 和 Layout Display。
此外,使用屬性值解析堆棧,您可以調查資源屬性值在源代碼中的來源位置,并按照屬性窗格中的超鏈接導航到其位置。
最后,Layout Display 可在運行時對應用的視圖層次結構進行高級 3D 可視化。如需使用該功能,只需在實時布局檢查器窗口中點擊相應布局,然后拖動鼠標旋轉該布局即可。如需展開或收起布局的圖層,請使用 Layer Spacing 滑塊。
布局驗證
“布局驗證”是一款可視化工具,用于同時預覽不同設備中及采用不同配置的布局,有助于您在此過程的早期發現布局存在的問題。如需使用該功能,請點擊 IDE 窗口右上角的 Layout Validation 標簽頁:
如需在可用的配置集之間切換,請從“Layout Validation”窗口頂部的下拉列表中選擇以下某個配置:
- Pixel Devices
- 自定義
- 色盲
- 字體大小
動態圖地址
Pixel Devices
預覽布局在 Pixel 設備上的顯示效果:
圖 4. 布局驗證工具中的 Pixel 設備預覽
自定義
如需自定義要預覽的顯示配置,請從各種設置(包括語言、設備或屏幕方向)中進行選擇:
動態圖地址
圖 5. 在布局驗證工具中配置自定義顯示
色盲
為了方便色盲用戶使用您的應用,請通過常見色盲類型的模擬驗證布局:
圖 6. 布局驗證工具中的色盲模擬預覽
字體大小
驗證各種字體大小下的布局,并通過使用較大的字體測試布局,改進適用于視力障礙用戶的無障礙功能:
圖 7. 布局驗證工具中的可變字體大小預覽
HierarchyviewerAndroid Studio(3.1)以上
作為傳統的Android 層級視圖瀏覽器,在Android 開發領域,受到了廣大開發者的青睞,但是很遺憾,在Android SDK 25.3.0 google已經廢棄了。。。
如果你還是不想舍棄,使用它還是按照如下方式可以找到的:
到這里我們已經找到另一個被Google廢棄的“Android device Monitor”工具,點擊下圖圖標
哇?。?!看到了我們熟悉的界面,喜歡的快拿去玩耍吧!
不過,由于Google對已廢棄的東西,不是很友好,現在AS調用它奇卡無比(不知道是不是我的電腦太low了),所以我還是推薦大家使用如下替代產品!
Layout Inspector
打開方式AS→tools→Layout Inspector:
選擇我們的視圖打開:
視圖層級一幕了然,界面美觀易用,快去愉快的玩耍吧!
參考網址:
官方文檔:使用布局檢查器和布局驗證工具調試布局
Android進階 - 視圖層級實時分析
Android Studio(3.1)以上查看UI布局層級