Jetpack Compose Glimmer の切り替えボタン

対象の XR デバイス

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

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

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

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

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

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

解剖学

切り替えボタンは、状態間で変化するコンテナと、オプションのアイコンを含むラベルで構成されます。

サイズ

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

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

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

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

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) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}
ToggleButtonSamples.kt