Jetpack Compose Glimmer의 전환 버튼

해당 XR 기기

이 가이드에서는 이러한 유형의 XR 기기를 위한 환경을 빌드하는 방법을 설명합니다.

XR 기기 유형 알아보기 →

XR 기기 유형 알아보기 →

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

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

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

분석

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

크기

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

전환 버튼 기본값

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

• 체크되지 않음: GlimmerTheme.shapes.large (일반적으로 CircleShape).
• 체크됨: ToggleButtonDefaults.CheckedShape (RoundedCornerShape 모서리가 있는 20.dp).

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

• 체크되지 않음: 기본값은 GlimmerTheme.colors.surface입니다.
• 체크됨: 기본값은 GlimmerTheme.colors.surface입니다.

애니메이션

전환 버튼은 애니메이션에 다음 기본값을 사용합니다.

• animateShape: Shape을(를) 제공합니다. 이 은(는) 스프링 애니메이션 사양(stiffness = 600f)을 사용하여 모서리 크기를 보간합니다.
• 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) }

    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(
                if (checked) FavoriteIcon else OutlinedFavoriteIcon,
                contentDescription = "Toggle favorite"
            )
        },
        onCheckedChange = { checked = it }
    ) {
        Text(if (checked) "On" else "Off")
    }
}
ToggleButtonSamples.kt