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

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

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

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

如要開啟版面配置檢查器,請在已連結的裝置或模擬器上執行應用程式,然後依序選取「Tools」>「Layout Inspector」

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

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

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

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

即時更新

「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」中轉譯。

隔離檢視區塊選單

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

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

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

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

View Options 下拉式選單

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

3D 模式

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

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

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

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

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

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

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

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

版面配置驗證

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

Layout Validation 分頁標籤的螢幕截圖

圖 6. Layout Validation 分頁標籤。

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

  • Reference Devices
  • Custom
  • Color Blind
  • Font Sizes

版面配置驗證工具中的下拉式選單螢幕截圖

圖 7. Reference Devices 下拉式選單選項。

Reference Devices

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

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

圖 8. 版面配置驗證工具中的參考裝置預覽畫面。

Custom

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

在版面配置驗證工具中自訂裝置螢幕

圖 9. 在版面配置驗證工具中設定自訂螢幕。

Color Blind

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

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

圖 10. 在版面配置驗證工具中進行色盲模擬預覽。

Font Sizes

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

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

圖 11. 在版面配置驗證工具中預覽多種字型大小。

擷取版面配置階層快照

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

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

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

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

版面配置檢查器快照 GIF

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

檢查 Compose

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

版面配置檢查器中的 Compose 重組計數

對 Compose 版面配置進行偵錯時,如要瞭解 UI 的實作方式是否正確,必須知道可組合項的重組時機。舉例來說,如果重組次數過多,表示應用程式可能執行了不必要的工作。另一方面,如果預期應重組的元件沒有進行重組,則可能會導致未預期的行為。

版面配置檢查器可讓您查看版面配置階層中的個別可組合項曾經重組或略過的時間。這項資訊會在您與應用程式互動時即時顯示。

如要開始使用,請先確認應用程式使用的是 API 級別 29 以上以及 Compose 1.2.0-alpha03 以上版本。接著,按照平常的方法部署應用程式。

版面配置檢查器中的組合和略過計數器

圖 13. 版面配置檢查器中的組合和略過計數器。

開啟「Layout Inspector」視窗,並連線至應用程式程序。在「Component Tree」中,版面配置階層旁會顯示兩個資料欄。第一欄顯示每個節點的組合次數,第二欄則顯示每個節點的略過次數。選取可組合項節點時,系統會顯示該可組合項的尺寸和參數,但如果是內嵌函式,就無法顯示參數。當您從「Component Tree」或「Layout Display」中選取可組合項時,也可在「Attributes」窗格中看到類似資訊。

您可以重設計數,藉此瞭解與應用程式的特定互動期間有多少次重組或略過。如要重設計數,請按一下「Component Tree」窗格頂端附近的「Reset」

在版面配置檢查器中啟用組合和略過計數器

圖 14. 在版面配置檢查器中啟用組合和略過計數器。

Compose 語意

在 Compose 中,語意會以無障礙服務和測試架構能夠理解的替代方式描述 UI。您可以使用版面配置檢查器來檢查 Compose 版面配置中的語意資訊。

使用版面配置檢查器顯示的語意資訊

圖 15. 使用版面配置檢查器顯示的語意資訊。

選取某個 Compose 節點後,可透過「Attributes」窗格檢查該節點是直接宣告語意資訊、合併其子項的語意,還是同時採用這兩種做法。如要快速找出包含語意 (無論是直接宣告或合併而來) 的節點,請在「Component Tree」窗格的「View Options」下拉式選單中選取「Highlight Semantics Layers」。選取這個選項後,系統只會醒目顯示樹狀結構中包含語意的節點,且您可以使用鍵盤快速瀏覽各個節點。

避免活動重新啟動

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

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

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

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

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