Jetpack Compose Glimmer의 전환 버튼

적용 가능한 XR 기기

이 안내는 이러한 유형의 XR 기기용 환경을 구축하는 데 도움이 됩니다.

XR 기기 유형 알아보기 →

XR 기기 유형 알아보기 →

Jetpack Compose Glimmer에서 ToggleButton는 선택된 상태에 따라 모양이 변경되는 대화형 구성요소입니다. 전환 버튼은 디스플레이 안경에 최적화되어 모양과 색상에서 명확한 시각적 전환을 제공합니다. 이러한 전환은 작업 또는 설정이 활성화된 시점을 나타냅니다.

전환 버튼을 사용하여 사용 설정 또는 사용 중지로 전환할 수 있는 작업을 표시합니다. 아이콘 전용 전환 버튼과 달리 전환 버튼은 주로 텍스트 콘텐츠를 표시하지만 추가 컨텍스트를 위한 선택적 아이콘 슬롯을 지원합니다.

다른 사용 사례의 경우 표준 버튼과 아이콘 버튼도 있습니다.

분석

전환 버튼은 상태 간에 변환되는 컨테이너와 선택적 아이콘이 있는 라벨로 구성됩니다.

크기

표준 버튼과 마찬가지로 전환 버튼은 두 가지 크기 변형을 지원합니다.

전환 버튼 기본값

기본적으로 전환 버튼은 ToggleButtonDefaults.animateShape를 사용합니다. 이렇게 하면 다음 상태 간에 원활한 전환이 이루어집니다.

• 선택 해제됨: GlimmerTheme.shapes.large (일반적으로 CircleShape).
• 확인됨: ToggleButtonDefaults.CheckedShape (20.dp 모서리가 있는 RoundedCornerShape).

ToggleButtonColors 클래스는 다음 상태의 색상 해상도를 관리합니다.

• 선택 안함: 기본값은 GlimmerTheme.colors.surface입니다.
• Checked: 기본값은 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