Android Studio 的版面配置檢查器可以讓您比較應用程式版面配置和設計模擬圖，以放大或 3D 方式顯示應用程式，並可檢視執行階段版面配置的詳細資訊。如果您的版面配置是透過執行階段建構，而非全部透過 XML 建構，且版面配置無法按照預期運作，此方法便特別實用。
您可以透過版面配置驗證同時預覽不同裝置的版面配置及顯示設定，包括各種字型大小或使用者語言，讓您可以輕鬆測試各種常見的版面配置問題。
開啟版面配置檢查器
如要在開啟版面配置檢查器，請按照下列步驟操作：
- 在已連結的裝置或模擬器上執行應用程式。
- 按一下「Tools」(工具) >「Layout Inspector」(版面配置檢查器)。
請看圖 1 所示，版面配置檢查器會顯示以下內容：
- 「Component Tree」(元件樹狀結構)：版面配置檢視畫面的上下階級。
- 「Layout Display」(版面配置顯示)：應用程式版面配置在裝置或模擬器的轉譯結果，檢視畫面都會顯示版面配置的框線。
- 「Layout Inspector」(版面配置檢查器) 工具列：版面配置檢查器的工具。
- 「Attributes」(屬性)：所選檢視畫面的版面配置屬性。
圖 1. 版面配置檢查器。
選取檢視畫面
若要選取檢視畫面，請在「Component Tree」(元件樹狀結構) 或「Layout Display」(版面配置顯示) 中按一下。所有所選檢視畫面的版面配置屬性都會顯示在「Attributes」(屬性) 面板中。
如果您的版面配置有重疊的檢視畫面，您可以按一下「Component Tree」(元件樹狀結構) 選取不在前方的檢視畫面，或旋轉版面配置後按一下想選取的檢視畫面。
隔離檢視畫面
如果需要處理複雜的版面配置，您可以隔離單一檢視畫面，如此一來就只有一小組版面配置會顯示在「Component Tree」(元件樹狀結構) 內，並在「Layout Display」(版面配置顯示) 中轉譯。
若要隔離檢視畫面，請在「Component Tree」(元件樹狀結構) 中按一下右鍵，並點選「Show Only Subtree」(只顯示子樹狀結構) 或「Show Only Subtree」(只顯示父項)。
若要返回完整檢視畫面，請在檢視畫面上按一下滑鼠右鍵，然後選取「Show All」(顯示全部)。
隱藏版面配置框線及檢視畫面標籤
若要隱藏版面配置元素的定界框或檢視畫面標籤，請按一下「Layout Display」(版面配置顯示) 頂端的「View Options」(檢視畫面選項) 
，然後切換「Show Borders」(顯示框線) 或 「Show View Label」(顯示檢視畫面標籤) 等設定。
比較應用程式版面配置與參考圖片重疊
若要比較應用程式版面配置和參考圖片 (如使用者介面模擬圖)，您可以在版面配置檢查器中載入點陣圖影像重疊。
- 要載入重疊，請按一下版面配置檢查器頂端的「Load Overlay」(載入重疊)
。重疊會調整大小，以便符合版面配置。 - 如果想調整重疊的透明度，請用「Overlay Alpha」(重疊 Alpha) 滑桿調整。
- 如果想移除重疊，請按「Clear Overlay」(清除重疊)
。
即時版面配置檢查器
即時版面配置檢查器可以讓您用完整即時的深入方式，查看應用程式部署到 API 級別 29 以上的裝置或模擬器的使用者介面後的樣子。
如要啟用即時版面配置檢查器，請依序前往「File」(檔案) >「Settings」(設定) >「Experimental」(實驗功能)，勾選「Enable Live Layout Inspector」(啟用即時版面配置檢查器) 旁邊的方塊，然後在「Layout Display」(版面配置顯示) 上方，勾選「Live updates」(即時更新) 旁邊的核取方塊。
即時版面配置檢查器內含動態版面配置階層，可以隨著裝置上的檢視畫面變更而更新「Component Tree」(元件樹狀結構) 及「Layout Display」(版面配置顯示)。
另外，您可以使用屬性值解析度堆疊調查資源屬性內容值來自哪一段原始碼，並用屬性窗格的超連結前往該處。
圖 2. 「Attributes」(屬性) 面板的屬性值，以及屬性定義超連結。
最後，「Layout Display」(版面配置顯示) 可以用先進的 3D 視覺化功能檢視應用程式在執行階段的檢視畫面階層。如要使用這項功能，只要在「Live Layout Inspector」(即時版面配置檢查器) 視窗中按一下版面配置並藉由拖曳滑鼠旋轉即可。若要展開或縮小版面配置圖層，請用「Layer Spacing」(圖層間距) 滑桿調整。
圖 3. 旋轉 3D 版面配置檢視畫面。
版面配置驗證
版面配置驗證是一項視覺工具，可讓您同時預覽不同裝置和設定的版面配置，以便幫助您早期發現版面配置錯誤。如要存取這項功能，請按一下 IDE 視窗右上角的「Layout Validation」(版面配置驗證) 分頁標籤：
圖 4. 「Layout Validation」(版面配置驗證) 分頁標籤。
如果想切換可以使用的設定組合，可以從「Layout Validation」(版面配置驗證) 視窗頂端的「Reference Devices」(參照裝置) 下拉式選單中選擇任一項：
- 「Reference Devices」(參照裝置)
- 「Custom」(自訂)
- 「Color Blind」(色盲)
- 「Font Sizes」(字型大小)
圖 5. 「Reference Devices」(參照裝置) 下拉式選單選項。
「Reference Devices」(參照裝置)
參照裝置是一系列由我們建議您用來測試的裝置，包括手機、折疊式平板電腦以及電腦介面。您應該預覽版面配置在這一系列參照裝置顯示的樣子：
圖 6. 「Layout Validation」(版面配置驗證) 工具中的參照裝置預覽
「Custom」(自訂)
如果您想自訂螢幕設定進行預覽，便可以任選多種設定，包括語言、裝置、螢幕方向等等：
圖 7. 使用「Layout Validation」(版面配置驗證) 工具設定自訂螢幕
「Color Blind」(色盲)
為了讓應用程式更適合色盲使用者使用，您可以模擬幾種常見的色盲類型，藉此檢查您的版面配置：
圖 8. 使用「Layout Validation」(版面配置驗證) 工具進行色盲模擬預覽
「Font Sizes」(字型大小)
檢查版面配置使用各種字型大小的外觀，並用較大的字型測試您的版面配置，藉此改善應用程式對視障使用者提供的無障礙功能：
圖 9. 使用「Layout Validation」(版面配置驗證) 工具預覽多種字型大小
擷取版面配置階層快照
您可以透過版面配置檢查器，儲存執行中應用程式的版面配置階層快照，以便與他人分享或日後供參考。
快照會擷取一般在使用版面配置檢查器時會看到的資料，包括詳細的版面配置 3D 轉譯內容、檢視/Compose/混合型版面配置的元件樹狀結構，以及各個 UI 元件的詳細屬性。如要儲存快照，請按照下列步驟操作：
- 開啟版面配置檢查器。
- 版面配置檢查器應該會自動連結至應用程式程序。如未自動連結，請從下拉式選單中選取應用程式程序。
- 如要擷取快照，請在版面配置檢查器工具列中按一下「Export snapshot」(匯出快照) 圖示
。 - 在隨即顯示的系統對話方塊中，指定快照的名稱和儲存位置。請務必使用
*.li副檔名儲存檔案。
接著只要在主選單列中依序選取「File」(檔案) >「Open」(開啟) 並開啟 *.li 檔案，即可載入版面配置檢查器快照。
圖 10. Sunflower 範例應用程式的版面配置檢查器快照
檢查撰寫語義
在 Compose 中，語意會以無障礙服務和測試架構能夠理解的替代方式描述使用者介面。您可以使用版面配置檢查器來檢查 Compose 版面配置中的語意資訊。
圖 11. 使用版面配置檢查器顯示的語意資訊
選取某個 Compose 節點後，請使用「Attributes」(屬性) 視窗檢查該節點是直接宣告語意資訊、合併其子項的語意，還是同時採用這兩種做法。如要快速找出包含語意 (無論是直接宣告或合併而來) 的節點，請在「Component Tree」(元件樹狀結構) 視窗的「View options」(檢視選項) 下拉式選單中，選取「Highlight Semantics Layers」(醒目顯示語意版面配置)。選取這個選項後，系統只會醒目顯示樹狀結構中包含語意的節點，且您可以使用鍵盤快速瀏覽各個節點。