Jetpack Compose Glimmer のアイコン

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

Jetpack Compose Glimmer の Icon コンポーネントは、単色のアイコンをレンダリングするための UI 要素です。アイコンは、GlimmerTheme との視覚的な一貫性を保ち、判読性を維持できるように、色合いとスケーリングをインテリジェントに処理します。

サイズ

アイコンのデフォルトのサイズは LocalIconSize によって提供されますが、提供されている 3 つのアイコンサイズを使用して特定のサイズを設定することもできます。これらのサイズは、次のコンテキストでもデフォルトで使用されます。

サイズトークン デフォルトの利用ポリシー

small

標準のリストアイテムまたは小さなチップの場合。

medium

スタンドアロンのアイコンとタイトルのチップの場合。

large

カードなどの強調度の高いコンポーネント。

アイコンのソース

アイコンは、ソースとして ImageVector、ImageBitmap、または Painter を受け入れることができます。独自のアイコンを定義する場合は、可能な限り ImageVector を使用して、ディスプレイ メガネのあらゆるスケールでシャープなレンダリングを促進します。

色と色合い

  • 自動色合い: アイコンは、親サーフェス（surface や Button など）から提供される LocalContentColor に基づいて色を解決します。LocalContentColor
  • 手動での色合いの調整: tint パラメータを使用して特定の色を適用します。
  • 多色のアセット: 色合いを変更すべきでないアイコン（多色のブランドロゴなど）の場合は、tint = Color.Unspecified を設定します。
  • 汎用画像: アイコンのサイズと色合いのルールに準拠していない写真や汎用画像には、代わりに標準の androidx.compose.foundation.Image を使用します。

例: サーフェス内の基本アイコン

次のコードは、テーマのプライマリ カラーを使用して、円形のサーフェス内に配置されるアイコンを作成します。

@Composable
fun IconSampleUsage() {
    GlimmerLazyColumn(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item { IconSizesSample() }
        item {
            Icon(
                FavoriteIcon,
                "Localized description",
                Modifier.surface(
                        shape = CircleShape,
                        color = GlimmerTheme.colors.primary,
                        border = null,
                    )
                    .padding(12.dp),
            )
        }
    }
}

例: サイズの異なるアイコン

次のコードは、さまざまなアイコンサイズを示しています。

@Composable
fun IconSizesSample() {
    val iconSizes = GlimmerTheme.iconSizes
    Column(
        verticalArrangement = Arrangement.spacedBy(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.small))
        // medium is also the default size, defining explicitly for clarity
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.medium))
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.large))
    }
}

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

  • 各アイコンのサイズは、修飾子付きの GlimmerTheme.iconSizes を使用してカスタマイズされます。アイコンの場合、デフォルト値は GlimmerTheme.iconSizes.medium です。値をハードコードする代わりにこれらのサイズを使用すると、UI 全体で一貫性を維持できます。
  • 各アイコンのローカライズされた contentDescription を提供します。アイコンが純粋に装飾的なものでない限り、必ずこれらの説明を提供します。