使用可組合項預覽功能,預覽 Jetpack Compose Glimmer UI

Jetpack Compose Glimmer 是 UI 工具包,可用於建構豐富的環境體驗,適用於搭載 AI 的智慧眼鏡。開發 Jetpack Compose Glimmer UI 時,請使用可組合項預覽畫面,快速有效率地查看及疊代設計。可組合項預覽功能可直接在 Android Studio 中,即時互動式算繪 Jetpack Compose Glimmer UI 元件。這些預覽畫面可讓您不必在每次進行小幅 UI 變更時,都在模擬器或實體裝置上建構及執行應用程式,大幅加快開發週期。

預覽 Jetpack Compose Glimmer UI 元件

  1. 在 Android Studio 的最新 Canary 版本中開啟 XR 專案。
  2. 確認可組合函式是否已加上 @Preview 註解。
  3. 在「程式碼」檢視畫面中,按一下可組合函式的「預覽設定挑選器」

  4. 在「裝置」下拉式選單中,選取「AI 眼鏡」

    這會調整預覽畫面,以符合 AI 眼鏡螢幕的獨特解析度和顯示比例。

    在可組合函式預覽設定中,選取裝置的 AI 眼鏡。

  5. 選取「設計」或「分割」檢視畫面,即可查看預覽畫面。

    可組合函式預覽畫面會顯示在分割檢視畫面中,模擬 AI 眼鏡裝置。

調整預覽環境

眼鏡採用加成式透明螢幕,這表示螢幕只能增加光線,無法產生黑色。在加法顯示器中,黑色不是顏色,而是 100% 透明。Compose 預覽畫面會提供近似值,協助您瞭解 UI 在不同觀看條件下的行為。

如要模擬不同的觀看條件,請按一下預覽窗格工具列中的環境圖示。嘗試不同的背景選項 (例如「淺色」、「深色」或「忙碌」),確認文字和元件的對比度和可見度是否足夠。