전환

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. 선택되지 않은 스위치

선택된 경우의 모양은 다음과 같습니다.

선택된 기본 스위치입니다.
그림 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. 맞춤 선택 아이콘이 있는 스위치

사용자 지정 색상

다음 예는 스위치가 선택되었는지 여부를 고려하여 색상 매개변수를 사용하여 스위치의 엄지와 트랙 색상을 변경하는 방법을 보여줍니다.

@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. 사용자 지정 색상이 있는 스위치

추가 리소스