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 IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}

例: 色付きのアイコン

次のコードは、テーマのプライマリ カラーを使用して色付きのアイコンを作成します。

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}

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

次のコードは、特定のサイズに変更された アイコンを作成します。

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}

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

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