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

Android Studio 的版面配置檢查器會顯示檢視區塊階層，方便您檢查每個檢視區塊的屬性，對應用程式的版面配置進行偵錯。您可以利用版面配置檢查器比較應用程式版面配置和設計模擬圖、顯示應用程式的放大或 3D 檢視畫面，以及在執行階段檢查版面配置的詳細資料。如果您的版面配置是在執行階段建構，而非完全透過 XML 建構，且版面配置會以非預期的方式運作，這項功能就特別實用。

圖 1 Jetchat 應用程式的內嵌版面配置檢查器。

開始使用

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

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

  • 如要查看階層並檢查每個檢視區塊的屬性，請使用「Component Tree」和「Attributes」工具視窗。版面配置檢查器可能需要重新啟動活動，才能存取屬性。詳情請參閱「避免活動重新啟動」一文。
  • 啟用「Toggle Deep Inspect」「Toggle Deep Inspect」按鈕 後，只要在檢視區塊上按一下即可選取，按兩下即可前往程式碼。
  • 如要與應用程式互動，請停用「Toggle Deep Inspect」「Toggle Deep Inspect」按鈕。
  • 如要檢查實體裝置，請啟用裝置鏡像功能。
  • 如要在更新應用程式的使用者介面時啟用即時更新，請確認即時編輯功能已啟用。
  • 如要使用 3D 模式，請拍攝版面配置檢查器快照 版面配置檢查器快照，然後按一下「3D Mode」圖示 3D 按鈕。

選取或隔離檢視區塊

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

若要選取檢視畫面，請在「Component Tree」(元件樹狀結構) 或「Layout Display」(版面配置顯示) 中按一下。所選檢視區塊的所有版面配置屬性都會顯示在「Attributes」面板中。

如果版面配置包含重疊的檢視畫面，在「Deep Inspect」模式 「Toggle Deep Inspect」按鈕 中按一下滑鼠右鍵，即可查看地區中的所有檢視畫面。如要選取不在前方的檢視畫面，請在「Component Tree」中按一下，或旋轉版面配置。

如果需要處理複雜的版面配置，您可以隔離個別檢視區塊，只讓部分版面配置顯示在「Component Tree」中，並且在「Layout Display」中轉譯。若要隔離檢視區塊，請拍攝快照 版面配置檢查器快照，在「Component Tree」中該檢視區塊上按一下滑鼠右鍵，然後選取「Show Only Subtree」或「Show Only Parents」。若要返回完整檢視畫面，請在檢視畫面上按一下滑鼠右鍵，然後選取「Show All」(顯示全部)。您必須先拍攝快照，才能區隔檢視畫面。

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

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

擷取版面配置階層快照

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

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

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

3D 模式

「Layout Display」可運用進階 3D 視覺化功能，呈現執行階段的應用程式檢視區塊階層。如要使用這項功能，請拍攝快照 快照匯出/匯入，然後按一下快照檢查器視窗中的「3D Mode」按鈕 3D 按鈕，然後拖曳滑鼠來旋轉按鈕。

版面配置檢查器：3D 檢視畫面
圖 2. 旋轉的版面配置 3D 檢視畫面。
版面配置檢查器：圖層間距檢視畫面
圖 3. 如要展開或縮減版面配置的圖層，請使用圖層間距滑桿。

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

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

  • 要載入重疊圖片，請從「Layout Inspector」工具列選取「Load Overlay」選項 。系統會根據版面配置調整重疊圖片大小。
  • 如果想調整重疊圖片的透明度，請使用「Overlay Alpha」滑桿調整。
  • 如要移除重疊圖片，請按一下清除疊加層

檢查 Compose

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

進一步瞭解 Compose 版面配置檢查器

避免活動重新啟動

版面配置檢查器需要下列其中一種全域設定才能正常運作。如未指定全域設定，版面配置檢查器會自動進行設定。

  1. adb shell settings put global debug_view_attributes_application_package <processname>

    這個選項會產生額外的資訊，用於檢查指定程序。

  2. adb shell settings put global debug_view_attributes 1

    這個選項會產生額外的資訊，用於檢查裝置上的所有程序。

變更全域設定可能會導致活動重新啟動。為避免活動重新啟動，您可以在 Android Studio 中變更設定，或是在裝置設定中變更「開發人員選項」。

如要在 Android Studio 中啟用自動重新整理功能，請從選單中依序選取「Run」>「Edit Configurations」，開啟「Run/Debug Configurations」。接著，前往「Miscellaneous」分頁，然後勾選「Layout Inspector Options」下方的「Connect to Layout Inspector without restarting activity」方塊。

執行設定中的活動重新啟動選項
圖 4：從「Run/Debug Configurations」對話方塊啟用自動重新整理功能。

或者，您也可以啟用裝置的開發人員選項，然後從裝置的開發人員設定中開啟「啟用檢視屬性檢查」功能。

獨立版面配置檢查器

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

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