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 글리머 디자인 사양에 맞게 내부 패딩과 텍스트 크기 조정을 자동으로 관리합니다.