Jetpack Compose Glimmer UI を開発する際は、コンポーズ可能なプレビューを使用して、デザインを迅速かつ効率的に可視化して反復処理します。コンポーザブル プレビューを使用すると、Jetpack Compose Glimmer UI コンポーネントのライブ インタラクティブ レンダリングを Android Studio 内で直接確認できます。これらのプレビューを使用すると、UI の小さな変更ごとにエミュレータや実機でアプリをビルドして実行する必要がなくなるため、開発サイクルが大幅に短縮されます。
Jetpack Compose Glimmer UI コンポーネントをプレビューする
- Android Studio の最新の Canary ビルドで XR プロジェクトを開きます。
- コンポーズ可能な関数に
@Previewアノテーションが付いていることを確認します。 [コード] ビューで、コンポーズ可能な関数の [プレビュー設定選択ツール] をクリックします。
[デバイス] プルダウン メニューから [AI グラス] を選択します。
これにより、プレビュー サーフェスがディスプレイ グラスの固有の解像度とアスペクト比に合わせて調整されます。
![コンポーズ可能な関数のプレビュー設定で、デバイスに [AI グラス] を選択します。](https://developer.android.com/static/images/develop/xr/jetpack-xr-sdk/glimmer/preview-configuration.png?hl=ja)
プレビューを表示するには、[Design] ビューまたは [Split] ビューを選択します。
プレビュー環境を調整する
グラスは、加算型の透明なディスプレイを使用します。この特性は、ディスプレイが光を追加することしかできず、黒を作成できないことを意味します。加法混色ディスプレイでは、黒は色ではなく、100% 透明に見えます。Compose プレビューは、さまざまな表示条件で UI がどのように動作するかを把握するのに役立つ近似値を提供します。
さまざまな表示条件をシミュレートするには、プレビュー ペインのツールバーにある環境アイコンをクリックします。さまざまな背景オプション（ライト、ダーク、ビジーなど）を試して、テキストとコンポーネントのコントラストと視認性が適切かどうかを確認します。