對 Compose UI 進行偵錯

Android Studio 提供多種工具,可供您偵錯 Compose UI。

版面配置檢查器

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

取得重組次數

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

版面配置檢查器會在您與應用程式互動時,顯示版面配置階層中的個別可組合項曾經重組或略過的時間。系統會在 Android Studio 中醒目顯示重組程序,協助您判斷可組合項在 UI 中的重組位置。

圖 1. 版面配置檢查器會醒目顯示重組程序。

醒目顯示的部分會在版面配置檢查器的圖片部分中顯示可組合項的漸層重疊效果,並且逐漸消失,方便您瞭解具有最高重組率的可組合項在 UI 中的位置。如果某個可組合項的重組率高於另一個可組合項,則第一個可組合項會呈現較深的漸層重疊色彩。如果在版面配置檢查器中按兩下某個可組合項,系統會引導您前往對應的程式碼進行分析。

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

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

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

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

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

Compose 語意

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

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

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

Compose UI 檢查

為協助您在 Jetpack Compose 中建構更具適應性和無障礙功能的 UI,Android Studio 在 Compose 預覽中提供 UI 檢查模式。這項功能類似於檢視畫面的無障礙功能掃描器

在 Compose 預覽畫面中啟用 Compose UI 檢查模式後,Android Studio 會自動稽核 Compose UI,並建議改善方式,讓 UI 更容易存取及自動調整。Android Studio 會檢查 UI 在不同螢幕大小下是否正常運作。在「Problems」面板中,工具會顯示偵測到的問題,例如文字在大螢幕上遭到延展,或是色彩對比度偏低。

如要存取這項功能,請按一下 Compose 預覽中的「UI Check」圖示:

圖 5. UI 檢查模式的進入點。

UI 檢查會自動預覽不同設定下的 UI,並醒目顯示不同設定中發現的問題。在「問題」面板中,點選問題即可查看問題詳細資料、建議修正方式,以及醒目顯示問題區域的算繪結果。

圖 6. UI 檢查模式的實際運作情形。