スイッチ

Switch コンポーネントを使用すると、ユーザーはオンとオフの 2 つの状態を切り替えることができます。アプリでスイッチを使用して、ユーザーに次のいずれかを行うようにします。

• 設定をオンまたはオフに切り替える。
• 機能を有効または無効にします。
• オプションを選択します。

このコンポーネントは、サムとトラックの 2 つの部分で構成されています。スライダーはスイッチのドラッグ可能な部分で、トラックは背景です。ユーザーはスライダーを左右にドラッグしてスイッチの状態を変更できます。スイッチをタップして確認し、オフにすることもできます。

図 1. スイッチ コンポーネント。

基本的な実装

API の完全な定義については、Switch リファレンスをご覧ください。使用が必要な主なパラメータは次のとおりです。

• checked: スイッチの初期状態。
• onCheckedChange: スイッチの状態が変化したときに呼び出されるコールバック。
• enabled: スイッチが有効か無効か。
• colors: スイッチに使用される色。

次の例は、Switch コンポーザブルの最小実装です。

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Switch.kt

チェックボックスをオフにすると、この実装は次のようになります。

図 2. オフのスイッチ。

チェックボックスがオンの状態は次のようになります。

図 3. オンになっているスイッチ。

高度な実装

より高度なスイッチを実装する際に使用できる主なパラメータは次のとおりです。

• thumbContent: チェックボックスがオンのときに表示されるサムネイルの外観をカスタマイズするために使用します。
• colors: トラックとサムネイルの色をカスタマイズできます。

カスタム サムネイル

thumbContent パラメータに任意のコンポーザブルを渡して、カスタム サムネイルを作成できます。サムネイルにカスタム アイコンを使用するスイッチの例を次に示します。

@Composable
fun SwitchWithIconExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}
Switch.kt

この実装では、未チェックの外観は前のセクションの例と同じです。ただし、チェックすると、この実装は次のようになります。

図 4. カスタムのチェックアイコン付きのスイッチ。

カスタムの色

次の例は、colors パラメータを使用して、スイッチがオンになっているかどうかに応じてスイッチのスライダーとトラックの色を変更する方法を示しています。

@Composable
fun SwitchWithCustomColors() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = MaterialTheme.colorScheme.primary,
            checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,
            uncheckedThumbColor = MaterialTheme.colorScheme.secondary,
            uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer,
        )
    )
}
Switch.kt

これを実装すると次のようになります。

図 5. カスタム色のスイッチ。

参考情報

• マテリアル UI のドキュメント