Jetpack Compose Glimmer의 버튼

적용 가능한 XR 기기
이 안내는 이러한 유형의 XR 기기용 환경을 구축하는 데 도움이 됩니다.
XR 기기 유형 알아보기 →
AI 안경
XR 기기 유형 알아보기 →

Jetpack Compose Glimmer에서 Button 구성요소는 AI 안경 입력에 최적화된 대화형 구성요소로, 사용자의 작업을 안내하기 위해 포커스가 없는 상태, 포커스가 있는 상태, 누름 상태에 대한 명확한 시각적 피드백을 제공합니다.

그림 1. Jetpack Compose Glimmer의 다양한 버튼 스타일의 예

예: 버튼 변형

@Composable
fun GlimmerButtonExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        // Basic Button
        Button(onClick = { /* Do something */ }) {
            Text("Test Button 1")
        }

        // Button with a leading icon
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 2")
        }

        // Button with leading and trailing icons
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            },
            trailingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 3")
        }
    }
}

코드에 관한 핵심 사항

  • 버튼 아이콘은 최적화된 애셋 로딩을 위해 Icons.Default 라이브러리 종속 항목을 대체하여 painterResource을 사용하여 로컬 XML 벡터 드로어블(R.drawable.ic_favorite)을 소싱합니다.
  • leadingIcon 및 trailingIcon 매개변수는 아이콘 컴포저블을 버튼 레이아웃에 삽입하는 데 사용되며, 이는 Jetpack Compose Glimmer가 유연한 아이콘 위치 지정을 지원함을 보여줍니다.
  • 버튼은 명시적 크기 수정자 없이 표준 Jetpack Compose Glimmer 디자인 사양에 맞게 내부 패딩과 텍스트 크기 조정을 자동으로 관리하는 기본 크기 조정 구성을 사용합니다.