Jetpack Compose Glimmer のタイトルチップ

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

Jetpack Compose Glimmer の TitleChip コンポーネントは、Card や GlimmerLazyColumn などの関連コンテンツに簡単なコンテキストやラベルを提供する非インタラクティブ コンポーネントです。

タイトルチップは、短いタイトル、カテゴリ名、ステータス インジケーターなどの簡潔な情報に使用します。通常、タイトルチップは、説明するコンテンツの上に配置して、明確な構造関係を確立する必要があります。

図 1. Jetpack Compose Glimmer のデフォルト スタイルのタイトルチップと固定タイトルチップの例。各タイトルチップには、ラベル（1）と、オプションの先頭アイコンまたはエンティティ（2）があります。

基本的な例: 短いタイトルチップを作成する

次のコードは、基本的なタイトルチップを作成します。

@Composable
fun BasicTitleChipSample() {
    TitleChip { Text("Messages") }
}

基本的な例: アイコン付きのタイトルチップを作成する

次のコードは、アイコン付きのタイトルチップを作成します。

@Composable
fun TitleChipWithIconSample() {
    TitleChip {
        Icon(FavoriteIcon, contentDescription = "Favorite")
        Text("Favorites")
    }
}

例: カードを含むタイトルチップを作成する

タイトルチップを別のコンポーネントで使用するには、コンポーザブル内の別のコンポーネントの上にタイトルチップ TitleChipDefaults.associatedContentSpacing を配置します。次のコードは、カードを含むタイトルチップを作成します。

@Composable
fun TitleChipWithCardSample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }

        Spacer(Modifier.height(TitleChipDefaults.associatedContentSpacing))

        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}

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

  • タイトルチップは水平方向に中央揃えされています。これは、カードの上に配置されたタイトルチップの通常の配置です。
  • Spacer の高さは固定されており、2 つのコンポーネント間に適切な垂直方向の間隔を確保します。これは TitleChipDefaults.associatedContentSpacing を使用して定義されます。
  • オプションの leadingIcon を使用して、テキスト コンテンツの前に視覚的なコンテキストを追加します。
  • タイトルチップは、テキストに caption スタイルを自動的に使用します。
  • タイトルチップはインタラクティブではありません。クリック可能なラベルが必要な場合は、Button または別のインタラクティブ コンポーネントを使用します。