Jetpack Compose Glimmer のカード

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

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

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

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

構成とスロット

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

スロット 説明

ヘッダー

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

タイトルとサブタイトル

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

先頭のアイコン

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

末尾のアイコン

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

アクション

Button などのプライマリ インタラクティブ要素のスロット。

メイン コンテンツ

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

カードのデフォルト

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

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

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

例: ベーシック カード

次のコードは、基本的なカードを作成します。

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}

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

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

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}

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

  • header、title、leadingIcon、action などのさまざまなカード要素を使用して、カードのコンテンツと構造をカスタマイズする方法を示します。
  • カード（またはその内部アクション）のみをフォーカス可能にする必要があるため、アクションを含む標準の Card オーバーロードを使用します。カードの表面全体をインタラクティブにする必要がある場合は、代わりに onClick を使用して Card オーバーロードを使用します。
  • このカードはアクション スロットを使用しているため、カード サーフェスはフォーカス可能ではなく、代わりに操作ボタンにフォーカスが移動します。