Jetpack Compose Glimmer のアイコン

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

Jetpack Compose Glimmer では、Icon コンポーネントは単色のアイコンをレンダリングするために特別に設計されています。Icon は、ソースとして ImageVector、ImageBitmap、または Painter を受け入れることができます。Icon は Text と同様に、周囲の UI テーマに基づいてインテリジェントに色合いを適用できます。デフォルトでは LocalIconSize で指定されたサイズが使用されますが、カスタム アイコン サイズを設定することもできます。

例: 大きな星アイコンを含むボックスを作成する

@Composable
fun GlimmerIconSample() {
    GlimmerTheme {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_star),
                    contentDescription = "A star icon from Google Symbols",
                    modifier = Modifier.size(GlimmerTheme.iconSizes.large),
                    tint = GlimmerTheme.colors.primary
                )
            }
        }
    }
}

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

  • アイコンのソースは、painterResource を使用してローカル XML ベクター ドローアブル（R.drawable.ic_star）を読み込みます。これは、外部ライブラリのオーバーヘッドなしで Jetpack Compose Glimmer UI にアイコンを統合するための推奨アプローチを示しています。
  • アイコンのサイズは、修飾子で GlimmerTheme.iconSizes.large を設定することでカスタマイズされます。これは、Jetpack Compose Glimmer の事前定義されたサイズ設定をオーバーライドする方法を示しています。
  • アイコンの色合いは、色合いパラメータを使用して GlimmerTheme.colors.primary を設定することでカスタマイズされ、視覚的な一貫性を保つために単色のアイコンの色合いが適用されます。