Android Studio 調試利器-使用布局檢查器和布局驗證工具調試布局Layout Inspector

使用 Android Studio 中的布局檢查器,您可以將應用布局與設計模型進行比較、顯示應用的放大視圖或 3D 視圖,以及在運行時檢查應用布局的細節。如果布局是在運行時(而不是完全在 XML 中)構建的并且布局行為出現異常,該工具會非常有用。

使用布局驗證,您可以在不同的設備和顯示配置(包括可變字體大小或用戶語言)上同時預覽布局,以便輕松測試各種常見的布局問題。

打開布局檢查器

如需打開 Layout Inspector,請執行以下操作:

  1. 在連接的設備或模擬器上運行應用。
  2. 依次點擊 Tools > Layout Inspector。

如圖 1 所示,布局檢查器將顯示以下內容:

  1. Component Tree:布局中視圖的層次結構。
  2. Layout Display:按照應用布局在設備或模擬器上的顯示效果呈現布局,并顯示每個視圖的布局邊界。
  3. 布局檢查器工具欄:布局檢查器的工具。
  4. Attributes:所選視圖的布局屬性。
image.png

圖 1. 布局檢查器

選擇視圖

如要選擇某個視圖,請在 Component TreeLayout Display 中點擊該視圖。所選視圖的所有布局屬性都會顯示在 Attributes 面板中。

如果布局包含重疊的視圖,您可以選擇不在前面的視圖,方法是在 Component Tree 中點擊該視圖,或者旋轉布局并點擊所需視圖。

隔離視圖

如要使用復雜的布局,您可以隔離各個視圖,以便只有布局的一部分顯示在 Component Tree 中并呈現在 Layout Display 中。

如要隔離某個視圖,請在 Component Tree 中右鍵點擊該視圖,然后選擇 Show Only SubtreeShow Only Parent。

如需返回完整視圖,請右鍵點擊該視圖,然后選擇 Show All。

隱藏布局邊框和視圖標簽

如需隱藏布局元素的邊界框或視圖標簽,請點擊 Layout Display 頂部的 View Options 圖標

image.png

,然后切換 Show BordersShow 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 TreeLayout Display。

此外,使用屬性值解析堆棧,您可以調查資源屬性值在源代碼中的來源位置,并按照屬性窗格中的超鏈接導航到其位置。

圖 2. “Attributes”面板中的屬性值,其中包含指向屬性定義的超鏈接。

最后,Layout Display 可在運行時對應用的視圖層次結構進行高級 3D 可視化。如需使用該功能,只需在實時布局檢查器窗口中點擊相應布局,然后拖動鼠標旋轉該布局即可。如需展開或收起布局的圖層,請使用 Layer Spacing 滑塊。

圖 3. 布局的旋轉 3D 視圖

布局驗證

“布局驗證”是一款可視化工具,用于同時預覽不同設備中及采用不同配置的布局,有助于您在此過程的早期發現布局存在的問題。如需使用該功能,請點擊 IDE 窗口右上角的 Layout Validation 標簽頁:

image.png

如需在可用的配置集之間切換,請從“Layout Validation”窗口頂部的下拉列表中選擇以下某個配置:

  • Pixel Devices
  • 自定義
  • 色盲
  • 字體大小

image.png

動態圖地址

Pixel Devices

預覽布局在 Pixel 設備上的顯示效果:

圖 4. 布局驗證工具中的 Pixel 設備預覽

圖 4. 布局驗證工具中的 Pixel 設備預覽

自定義

如需自定義要預覽的顯示配置,請從各種設置(包括語言、設備或屏幕方向)中進行選擇:

image.png

動態圖地址

圖 5. 在布局驗證工具中配置自定義顯示

色盲

為了方便色盲用戶使用您的應用,請通過常見色盲類型的模擬驗證布局:

圖 6.布局驗證工具中的色盲模擬預覽

圖 6. 布局驗證工具中的色盲模擬預覽

字體大小

驗證各種字體大小下的布局,并通過使用較大的字體測試布局,改進適用于視力障礙用戶的無障礙功能:

圖 7. 布局驗證工具中的可變字體大小預覽

圖 7. 布局驗證工具中的可變字體大小預覽

HierarchyviewerAndroid Studio(3.1)以上

作為傳統的Android 層級視圖瀏覽器,在Android 開發領域,受到了廣大開發者的青睞,但是很遺憾,在Android SDK 25.3.0 google已經廢棄了。。。
如果你還是不想舍棄,使用它還是按照如下方式可以找到的:

image
image

到這里我們已經找到另一個被Google廢棄的“Android device Monitor”工具,點擊下圖圖標

image

哇?。?!看到了我們熟悉的界面,喜歡的快拿去玩耍吧!
不過,由于Google對已廢棄的東西,不是很友好,現在AS調用它奇卡無比(不知道是不是我的電腦太low了),所以我還是推薦大家使用如下替代產品!

Layout Inspector

打開方式AS→tools→Layout Inspector:

image

選擇我們的視圖打開:

image

視圖層級一幕了然,界面美觀易用,快去愉快的玩耍吧!

參考網址:
官方文檔:使用布局檢查器和布局驗證工具調試布局
Android進階 - 視圖層級實時分析
Android Studio(3.1)以上查看UI布局層級

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。