Jetpack Compose Glimmer의 아이콘 버튼

적용 가능한 XR 기기
이 가이드에서는 이러한 유형의 XR 기기를 위한 환경을 빌드하는 방법을 설명합니다.
XR 기기 유형 알아보기 →
디스플레이 글라스
XR 기기 유형 알아보기 →

Jetpack Compose Glimmer에서 IconButton은 한 번의 탭으로 보조 작업을 노출하는 데 사용되는 대화형의 소형 구성요소입니다.

아이콘 버튼은 표준 버튼보다 작게 표시되지만 디스플레이 글라스에서 쉽게 상호작용할 수 있도록 물리적 경계를 유지합니다.

다른 사용 사례의 경우 표준 버튼과 전환 버튼도 있습니다.

Jetpack Compose Glimmer의 다양한 아이콘 버튼 스타일의 예 이 예에서는 사용 설정됨 (1), 포커스됨 (2), 눌림 (3), 사용 중지됨 (4), 사용 중지됨 및 포커스됨 (5)의 다섯 가지 아이콘 버튼 상태를 보여줍니다.

크기 및 측정기준

요소 측정기준

최소 컨테이너 크기

48 x 48 dp

내부 아이콘 크기

32 x 32 dp

기본 콘텐츠 패딩

GlimmerTheme.componentSpacingValues.small

주

Jetpack Compose Glimmer의 아이콘 버튼은 상태를 전달하기 위해 모양을 변경합니다.

  • 사용 설정됨: 기본 대화형 상태입니다.
  • 포커스됨: GlimmerTheme.depthEffectLevels.level1 및 포커스된 테두리 강조표시를 적용합니다.
  • 눌림: 반투명 흰색 오버레이를 표면에 적용합니다.
  • 사용 중지됨: 버튼이 대화형이 아니며 시각적 의견이 삭제됩니다.

아이콘 버튼 기본값

다음 기본값이 아이콘 버튼에 적용됩니다.

  • 도형: 기본값은 GlimmerTheme.shapes.large (일반적으로 원형)입니다.
  • 색상: 기본값은 GlimmerTheme.colors.surface입니다.
  • 콘텐츠 색상: 명시적으로 제공되지 않는 한 배경 색상에서 자동으로 계산됩니다.
  • 콘텐츠 패딩: 아이콘과 컨테이너 가장자리 사이의 기본 간격을 제공합니다.
  • 최소 크기: 버튼이 너무 작아 상호작용할 수 없게 되는 것을 방지하는 고정된 48.dp 값입니다.
  • 아이콘 크기: 기본값은 GlimmerTheme.iconSizes.small (32.dp)입니다.

예: 아이콘 버튼

다음 코드는 기본 특성을 가진 아이콘 버튼을 만듭니다.

@Composable
fun IconButtonSample() {
    IconButton(onClick = {}) { Icon(FavoriteIcon, "Localized description") }
}