Jetpack Compose Glimmer のアイコンボタン

対象の XR デバイス

このガイダンスは、次のようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。

XR デバイスのタイプについて →

XR デバイスのタイプについて →

Jetpack Compose Glimmer では、IconButton は、1 回のタップで補足的なアクションを表示するために使用されるコンパクトなインタラクティブ コンポーネントです。

アイコンボタンは標準ボタンよりも小さく表示されますが、ディスプレイ メガネでの操作性を確保するため、物理的な境界は維持されます。

その他のユースケースでは、標準ボタンと切り替えボタンもあります。

サイズと寸法

州

Jetpack Compose Glimmer のアイコンボタンは、状態を伝えるために外観が変化します。

• 有効: デフォルトのインタラクティブ状態。
• Focused: GlimmerTheme.depthEffectLevels.level1 とフォーカスされた枠線のハイライトを適用します。
• Pressed: 半透明の白いオーバーレイをサーフェスに適用します。
• 無効: ボタンは操作できず、視覚的なフィードバックは削除されます。

アイコンボタンのデフォルト

アイコンボタンには次のデフォルトが適用されます。

• Shape: デフォルトは GlimmerTheme.shapes.large（通常は円形）です。
• 色: デフォルトは GlimmerTheme.colors.surface です。
• コンテンツの色: 明示的に指定されていない限り、背景色から自動的に計算されます。
• コンテンツ パディング: アイコンとコンテナの端の間のデフォルトの間隔を指定します。
• 最小サイズ: ボタンが小さくなりすぎて操作できなくなるのを防ぐための固定値 48.dp。
• アイコンのサイズ: デフォルトは GlimmerTheme.iconSizes.small（32.dp）です。

例: アイコンボタン

次のコードは、デフォルトの特性を持つアイコンボタンを作成します。

@Composable
fun IconButtonSample() {
    IconButton(onClick = {}) { Icon(FavoriteIcon, "Localized description") }
}
IconButtonSamples.kt