スイッチ

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

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

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

ライトモードとダークモードの Switch コンポーネントの例。
図 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.オフのスイッチ。

オンの場合、次のようになります。

オンになっている基本的な Switch。
図 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

この実装では、オフの外観は前のセクションの例と同じです。ただし、オンの場合、この実装は次のようになります。

thumbContent パラメータを使用して、チェックされたときにカスタム アイコンを表示するスイッチ。
図 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

この実装は次のようになります。

colors パラメータを使用して、サムとトラックの両方のカスタムカラーを表示するスイッチ。
図 5.カスタムカラーのスイッチ。

参考情報