Jetpack Compose Glimmer のカード

対象の XR デバイス
このガイダンスは、このようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。
XR デバイスの種類について →
AI メガネ
XR デバイスの種類について →

Jetpack Compose Glimmer の Card コンポーネントは、関連情報を 1 つの単位にグループ化して表示するように設計されています。カードは適応性が高く、メイン コンテンツ、オプションのタイトルとサブタイトル、先頭または末尾のアイコンの組み合わせをサポートします。カードはデフォルトで AI グラスのディスプレイの最大全幅を埋め、フォーカス可能で、クリック可能にすることもできます。

図 1. Jetpack Compose Glimmer のさまざまなスタイルのカードの例。

カードの構造とスロット

Jetpack Compose の Glimmer カードは、いくつかの特殊な要素で構成されており、コンテンツとレイアウトをカスタマイズできます。

  • ヘッダー: カードの上部セクション。画像を保持するように設計されています。

  • タイトルとサブタイトル: これらのテキスト フィールドには、カードのメインラベルとセカンダリ ラベルを指定します。

  • 先頭のアイコン: カードのコンテンツ領域の先頭に表示されるオプションのアイコン。

  • Trailing Icon: カードのコンテンツ領域の末尾に表示されるオプションのアイコン。

  • Action: ボタンなどの主要なインタラクティブ要素のスロット。これにより、ユーザーはカードから直接アクションを実行できます。このスロットは、Card コンポーザブルの別のオーバーロードで使用できます。

  • メイン コンテンツ: カードの本体部分。メインのテキストやその他のコンテンツを配置します。

基本的な例: ベーシック カードを作成する

ごくわずかなコードで、非常に基本的なカードを作成できます。

Card { Text("This is a card") }

詳細な例: 複雑なカードを表示する

次のコードは、複数のスロットを組み合わせてカードを作成する方法を示しています。また、Card と TitleChip をペア設定する方法も示します。

@Composable
fun SampleGlimmerCard() {
    val myHeaderImage = painterResource(id = R.drawable.header_image)
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
        Card(
            action = {
                Button(onClick = {}) {
                    Text("Action Button")
                }
            },
            header = {
                Image(
                    painter = myHeaderImage,
                    contentDescription = "Header image for the card",
                    contentScale = ContentScale.FillWidth
                )
            },
            title = { Text("Card Title") },
            subtitle = { Text("Card Subtitle") },
            leadingIcon = { FavoriteIcon, "Localized description" },
            trailingIcon = { FavoriteIcon, "Localized description" }
        ) {
            Text("A Jetpack Compose Glimmer Card using all available slots")
        }
    }
}

コードに関する主なポイント

  • header、title、subtitle、leadingIcon、action などのさまざまなカード要素を使用して、カードのコンテンツと構造をカスタマイズする方法を示します。
  • TitleChip を配置して Spacer を使用する方法の例を示します。