使用版面配置檢查器對版面配置偵錯

Android Studio 中的版面配置檢查器可讓您檢查及偵錯模擬器或實體裝置上執行中應用程式的版面配置。您可以檢查每個元件的屬性、比較應用程式版面配置和設計模擬圖，以及顯示應用程式的放大檢視畫面。

android layout

您也可以使用版面配置檢查器，檢查某個可組合項的重組或略過頻率，這有助於找出應用程式的問題。舉例來說，某些程式設計錯誤可能會強制 UI 過度重組，進而導致效能不佳。部分程式設計錯誤也可能會導致 UI 無法重組，因而使得 UI 變更無法顯示在畫面上。

詳情請參閱「為 Compose UI 偵錯」。

開始使用

如要啟動版面配置檢查器，請執行應用程式，前往「Running Devices」視窗，然後按一下「Toggle Layout Inspector」。如果您在多個裝置或專案間切換，版面配置檢查器會自動連線至可進行偵錯的程序，此程序會在已連結裝置的前景執行。

以下說明如何執行一些常見工作：

• 如要查看檢視區塊階層並檢查每個元件的屬性，請使用「Component Tree」和「Attributes」工具視窗。版面配置檢查器可能需要重新啟動活動，才能存取屬性。
• 如要選取元件，請先啟用「Toggle Deep Inspect」，然後按一下元件。或者，按兩下元件即可前往程式碼。
• 如要與應用程式互動，請停用「Toggle Deep Inspect」。
• 如要檢查實體裝置，請啟用裝置鏡像功能。
• 如要在更新應用程式 UI 時啟用即時更新，請確認已啟用「即時編輯」。

選取或隔離元件

元件通常會繪製使用者可見並進行互動的元素。「Component Tree」會即時顯示應用程式階層中的每個可組合元件，協助您對應用程式的版面配置進行偵錯，因為這樣可透過視覺呈現應用程式內的元素和相關值。

如要選取元件，請在「Component Tree」或「Layout Display」中點選該元件。所選元件的所有版面配置屬性都會顯示在「Attributes」(屬性) 面板中。

如果版面配置包含重疊的元件，在「Deep Inspect」模式下按一下滑鼠右鍵 ，即可查看區域中的所有元件。如要選取位於後方的元件，請在「Component Tree」中點選該元件。

如要處理複雜的版面配置，您可以隔離個別元件，只讓部分版面配置顯示在「Component Tree」中，並且在「Layout Display」中轉譯。如要隔離元件，請在「Component Tree」中該元件上按一下滑鼠右鍵，然後選取「Show Only Subtree」或「Show Only Parents」。如要返回顯示完整的檢視區塊，請在元件上按一下滑鼠右鍵，然後選取「Show All」。

隱藏版面配置框線及檢視區塊標籤

如要隱藏版面配置元素的定界框或元件標籤，請按一下「Layout Display」頂端的「View Options」圖示 ，然後切換「Show Borders」或「Show View Label」。

擷取版面配置階層快照

您可以利用版面配置檢查器，儲存執行中應用程式的版面配置階層快照，方便與他人分享或供日後參考。

快照會擷取一般在使用版面配置檢查器時會看到的資料，包括詳細的版面配置轉譯內容、Compose/檢視/混合型版面配置的元件樹狀結構，以及各個 UI 元件的詳細屬性。如要儲存快照，請依序點選「快照匯出/匯入」圖示 和「匯出快照」。

如要載入先前儲存的版面配置檢查器快照，請按一下「Import Snapshot」(匯入快照)。

比較應用程式版面配置與參考圖片重疊

若要比較應用程式版面配置和參考圖片 (如使用者介面模擬圖)，您可以在版面配置檢查器中載入點陣圖影像重疊。

• 如要載入重疊圖片，請從「版面配置檢查器」工具列選取「Load Overlay」選項 。系統會根據版面配置調整重疊圖片大小。
• 如果想調整重疊圖片的透明度，請使用「Overlay Alpha」滑桿調整。
• 如要移除重疊圖片，請點選「Clear Overlay」圖示。

獨立版面配置檢查器

為獲得最佳效能，建議您使用預設內嵌模式的版面配置檢查器。如要取消內嵌版面配置檢查器，請依序前往 「File」 (macOS 上的 「Android Studio」) > 「Settings」 > 「Tools」 > 「Layout Inspector」 ，然後取消勾選 「Enable embedded Layout Inspector」 核取方塊。

在獨立模式中，按一下「Layout Inspector」工具列中的「Live Updates」選項，即可啟用即時更新。

其他資源

Views 內容

• 使用版面配置檢查器 (檢視區塊) 對版面配置進行偵錯