Jetpack Compose Glimmer の切り替えボタン

対応する XR デバイス

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

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

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

Jetpack Compose Glimmer では、ToggleButton は、インタラクティブなコンポーネント で、チェックされた状態に基づいて外観が変化します。切り替えボタンは、ディスプレイ メガネ向けに最適化されており、形状と色を視覚的にスムーズに切り替えることができます。この切り替えは、アクションまたは設定が有効になっていることを示します。

切り替えボタンを使用して、オンとオフを切り替えられるアクションを表示します。アイコンのみの切り替えとは異なり、切り替えボタンは主にテキスト コンテンツを表示しますが、追加のコンテキスト用のオプションのアイコン スロットもサポートしています。

他のユースケースでは、標準ボタンとアイコンボタンもあります。

解剖学

切り替えボタンは、状態を切り替えるコンテナと、オプションのアイコンが付いたラベルで構成されています。

サイズ

標準ボタンと同様に、切り替えボタンは 2 つのサイズ バリアントをサポートしています。

切り替えボタンのデフォルト

デフォルトでは、切り替えボタンは ToggleButtonDefaults.animateShape を使用します。これにより、次の状態がスムーズに切り替わります。

• 未チェック: GlimmerTheme.shapes.large（通常は CircleShape）。
• チェック済み: ToggleButtonDefaults.CheckedShape（ RoundedCornerShape の角を持つ 20.dp）。

ToggleButtonColors クラスは、次の状態の色分解を管理します。

• 未チェック: デフォルトはGlimmerTheme.colors.surface。
• チェック済み: デフォルトは GlimmerTheme.colors.surface。

アニメーション

切り替えボタンでは、アニメーションに次のデフォルトが使用されます。

• animateShape：スプリング アニメーション仕様（stiffness = 600f）を使用して角のサイズを補間する Shape を提供します。
• colors: 両方の状態の背景色とコンテンツの色をカスタマイズするファクトリ関数。
• CheckedShape: チェックされた状態に使用される静的な RoundedCornerShape(20.dp)。
• contentPadding: ButtonDefaults.contentPadding から継承します。

例: 切り替えボタン

次のコードは、基本的な切り替えボタンを作成します。

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"

    ToggleButton(
        checked = checked,
        onCheckedChange = { checked = it }
    ) {
        Text(text)
    }
}
ToggleButtonSamples.kt

例: 先頭にアイコンが付いた切り替えボタン

次のコードは、先頭にアイコンが付いた切り替えボタンを作成します。

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }

    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(
                if (checked) FavoriteIcon else OutlinedFavoriteIcon,
                contentDescription = "Toggle favorite"
            )
        },
        onCheckedChange = { checked = it }
    ) {
        Text(if (checked) "On" else "Off")
    }
}
ToggleButtonSamples.kt