Jetpack Compose Glimmer のアイコンボタン

対象となる XR デバイス

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

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

[]

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

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

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

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

サイズと寸法

状態

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

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

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

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

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

例: アイコンボタン

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

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