Jetpack Compose Glimmer のカード

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

Jetpack Compose Glimmer の Card コンポーネントは、関連コンテンツのプライマリ コンテナとして機能し、理解しやすい情報の単位の明確な視覚的境界を作成します。カードは適応性が高く、メイン コンテンツ、オプションのタイトル、サブタイトル、先頭または末尾のアイコンの組み合わせをサポートします。カードはデフォルトで利用可能な最大幅まで広がり、フォーカス可能で、クリック可能にすることもできます。カードは、見出し画像が最上部に配置され、その下にタイトル、サブタイトル、本文コンテンツが続く垂直方向の配置をサポートしています。

カードは Jetpack Compose Glimmer のサーフェス システム上に構築されているため、奥行き効果、クリッピング、一貫した境界線のハイライトなどの物理的プロパティを継承します。

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

構成とスロット

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

スロット 説明

ヘッダー

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

タイトルとサブタイトル

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

先頭のアイコン

カードのコンテンツ領域の先頭に表示されるオプションのアイコン（通常は Icon）。

末尾のアイコン

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

メイン コンテンツ

メインの Text またはコンテンツのカードの本文。

カードのデフォルト

カードには次のデフォルトが適用されます。

  • 幅: カードはディスプレイの最大幅いっぱいに表示され、ディスプレイ グラスでの読みやすさが最適化されます。
  • 最小高さ: 80.dp
  • テキストの垂直方向の間隔: 3.dp
  • ヘッダーの形状: 24.dp の角を持つ RoundedCornerShape を使用
  • コンテンツのパディング: デフォルトは GlimmerTheme.componentSpacingValues.medium です。これは、ヘッダー画像とコンテンツ コンテナの周囲の最も外側のパディングに影響します。
  • Shape: デフォルトは GlimmerTheme.shapes.medium です。

  • テキスト レンダリング: 次のスロットに GlimmerTheme.typography のデフォルト値を使用します。

例: ベーシック カード

次のコードは、カードの作成に必要な最小限のコードを示しています。

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

例: 複数のスロットを含むカード

次のコードは、複数のスロットを組み合わせてカードを作成する方法を示しています。

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}

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

  • title、subtitle、leadingIcon などのさまざまなカード要素を使用して、カードのコンテンツと構造をカスタマイズする方法を示します。
  • onClick で Card オーバーロードを使用して、カードのサーフェス全体をインタラクティブにします。

アクション カード

カードに操作ボタンを含める場合は、ActionCard を使用します。アクションカードには、標準カードと同じ要素が含まれています。また、下部のボタンを定義する追加の action パラメータも含まれています。

図 2. Jetpack Compose Glimmer の ActionCard の例。

例: 基本的なアクション カード

次のコードは、ActionCard を作成する方法を示しています。

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}

例: アイコン付きのアクション カード

このコードは、アイコンを使用してより複雑な ActionCard を作成する方法を示しています。

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}