使用版面配置檢查器和版面配置驗證功能對版面配置進行偵錯

Android Studio 的版面配置檢查器可顯示檢視區塊階層,讓您檢查每個檢視區塊的屬性,對應用程式的版面配置進行偵錯。您可以利用版面配置檢查器比較應用程式版面配置和設計模擬圖、顯示應用程式的放大或 3D 檢視畫面,以及檢查執行階段的版面配置細節。如果您的版面配置是透過執行階段建構,而非全部透過 XML 建構,且版面配置無法如預期般運作,此方法便特別實用。

您可以利用版面配置驗證功能,同時預覽不同裝置和顯示設定的版面配置,包括各種字型大小或使用者語言,輕鬆測試各種常見的版面配置問題。

如要開啟版面配置檢查器,請在已連結的裝置或模擬器上執行應用程式,然後依序選取「Tools」>「Layout Inspector」。如果您在多個裝置或專案間切換,版面配置檢查器會自動連線至可進行偵錯的程序,此程序會在已連結裝置的前景執行。

Sunflower 範例應用程式的版面配置檢查器快照

圖 1 Sunflower 範例應用程式的版面配置檢查器快照。版面配置檢查器會從左到右顯示以下元件:Component Tree、Layout Display 和 Attributes。

  • Component Tree:版面配置的檢視區塊階層。
  • Layout Display:應用程式版面配置在裝置或模擬器上的轉譯結果,每個檢視畫面都會顯示版面配置的界框。
  • Attributes:所選檢視區塊的版面配置屬性。版面配置檢查器需要重新啟動活動,才能存取屬性。詳情請參閱重新啟動活動相關說明。

如要瞭解檢視區塊的版面配置編輯器,請參閱「版面配置編輯器簡介」一文。

內嵌版面配置檢查器 (實驗功能)

從 Android Studio Hedgehog 開始,可以直接在「Running Devices」工具視窗中執行版面配置檢查器。這項實驗功能大幅改善了版面配置檢查器的效能,除了節省畫面空間,還可將 UI 偵錯工作流程整理在單一工具視窗中。如要啟用嵌入模式,請按照下列步驟操作:

  • 在 Windows 上,依序前往「File」>「Settings」>「Experimental」>「Layout Inspector」
  • 在 macOS 上,依序前往「Android Studio」>「Settings」>「Experimental」>「Layout Inspector」

以下說明如何使用此功能及執行一些常見工作:

  • 如要啟動版面配置檢查器,請前往「Running Devices」視窗,然後按一下「Toggle Layout Inspector」「Toggle Layout Inspector」按鈕
  • 如要查看階層並檢查每個檢視區塊的屬性,請使用「Component Tree」和「Attribute Panel」工具視窗。
  • 啟用「Toggle Deep Inspect」「Toggle Deep Inspect」按鈕 後,只要在檢視區塊上按一下即可選取,按兩下即可前往程式碼。
  • 如要與應用程式互動,請停用「Toggle Deep Inspect」「Toggle Deep Inspect」按鈕
  • 如要檢查實體裝置,請啟用裝置鏡像功能
  • 如要使用 3D 模式,請啟用「Layout Inspector Snapshot」版面配置檢查器快照

內嵌版面配置檢查器

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

即時更新

「Layout Display」會呈現應用程式版面配置在裝置或模擬器上的轉譯結果,並顯示每個檢視畫面的版面配置界框。您可以點選各項元件進行檢查。

應用程式 UI 部署至搭載 API 級別 29 以上的裝置或模擬器後,即時版面配置檢查器可提供完整即時的深入分析。

如要啟用即時版面配置檢查器,請從「Layout Inspector」工具列選取「Live Updates」選項

即時版面配置檢查器內含動態版面配置階層,可在裝置上的檢視畫面發生變更時更新「Component Tree」和「Layout Display」

選取或隔離檢視區塊

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

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

如果版面配置含有重疊的檢視區塊,您可以在「Component Tree」中點選,或透過旋轉版面配置的方式,選取位於後方的檢視區塊。

如果需要處理複雜的版面配置,您可以隔離個別檢視區塊,只讓部分版面配置顯示在「Component Tree」中,並且在「Layout Display」中轉譯。

隔離檢視區塊選單

圖 3. 如要隔離檢視區塊,請在「Component Tree」中該檢視區塊上按一下滑鼠右鍵,然後選取「Show Only Subtree」或「Show Only Parents」。

如要返回顯示完整的檢視區塊,請在檢視區塊上按一下滑鼠右鍵,然後選取「Show All」。

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

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

View Options 下拉式選單

圖 4. 如要隱藏版面配置框線和檢視區塊標籤,請點選「Layout Inspector」工具列的第二個檢視選項

3D 模式

「Layout Display」可運用進階 3D 視覺化功能,呈現執行階段的應用程式檢視區塊階層。如要使用這項功能,請按一下「Live Layout Inspection」視窗中的「3D Mode」按鈕 3D 按鈕,然後拖曳滑鼠加以旋轉。

版面配置檢查器:3D 檢視畫面

圖 5. 旋轉的版面配置 3D 檢視畫面。

版面配置檢查器:圖層間距檢視畫面

圖 6. 如要展開或縮減版面配置的圖層,請用「Layer Spacing」滑桿調整。

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

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

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

擷取版面配置階層快照

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

快照會擷取一般在使用版面配置檢查器時會看到的資料,包括詳細的版面配置 3D 轉譯內容、檢視/Compose/混合型版面配置的元件樹狀結構,以及各個 UI 元件的詳細屬性。如要儲存快照,請按照下列步驟操作:

  1. 開啟版面配置檢查器
  2. 版面配置檢查器應該會自動連結至應用程式程序。如未自動連結,請從下拉式選單中選取應用程式程序。
  3. 如要擷取快照,請按一下版面配置檢查器工具列中的「Export snapshot」圖示 匯出圖示
  4. 在隨即顯示的系統對話方塊中,指定快照的名稱和儲存位置。請務必使用 *.li 副檔名儲存檔案。

接著只要從主選單列中依序選取「File」>「Open」並開啟 *.li 檔案,即可載入版面配置檢查器快照。

版面配置檢查器快照 GIF

圖 7. 在版面配置檢查器中擷取快照。

檢查 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」方塊。

執行設定中的活動重新啟動選項

圖 12. 從「Run/Debug Configurations」中啟用自動重新整理功能。

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

版面配置驗證

版面配置驗證是一項視覺工具,可讓您同時預覽不同裝置和設定的版面配置,以便幫助您早期發現版面配置錯誤。如要使用這項功能,請按一下 IDE 視窗右上角的「Layout Validation」分頁標籤:

「Layout Validation」分頁標籤的螢幕截圖

圖 13. 「Layout Validation」分頁標籤。

如果想切換可用的設定組合,可以從「Layout Validation」視窗頂端的「Reference Devices」下拉式選單中選擇任一項:

  • 參考裝置
  • 自訂
  • 「Color Blind」(色盲)
  • 字型大小

「Layout Validation」工具中的下拉式選單螢幕截圖

圖 14.「Reference Devices」下拉式選單選項。

參考裝置

參照裝置是一系列由我們建議您用來測試的裝置,包括手機、摺疊式裝置、平板電腦以及電腦介面。您應該預覽版面配置在這一系列參照裝置顯示的樣子:

不同參考裝置的版面配置預覽畫面螢幕截圖

圖 15.「Layout Validation」工具中的參考裝置預覽畫面。

自訂

如要自訂螢幕設定進行預覽,系統提供多種設定供您選擇,包括語言、裝置、螢幕方向:

在「Layout Validation」工具中自訂裝置螢幕

圖 16. 在「Layout Validation」工具中設定自訂螢幕。

「Color Blind」(色盲)

為了讓應用程式更適合色盲使用者使用,您可以模擬幾種常見的色盲類型,藉此驗證版面配置:

模擬預覽各種色盲類型的螢幕截圖

圖 17. 在「Layout Validation」工具中進行色盲模擬預覽。

字型大小

檢查版面配置使用各種字型大小的外觀,並用較大的字型測試您的版面配置,藉此改善應用程式對視障使用者提供的無障礙功能:

以各種字型大小預覽應用程式的版面配置,並可看到大型字型會出現的版面配置錯誤

圖 18. 在「Layout Validation」工具中預覽多種字型大小。