Jetpack Compose Glimmer의 아이콘

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

Jetpack Compose Glimmer에서 Icon 구성요소는 단일 색상 아이콘을 렌더링하는 UI 요소입니다. 아이콘은 색조 및 크기 조정을 지능적으로 처리하므로 읽기 쉽고 시각적으로 일관되게 GlimmerTheme 유지됩니다.

크기

아이콘은 기본적으로 LocalIconSize에서 제공하는 크기로 설정되지만 제공된 세 가지 아이콘 크기를 사용하여 특정 크기를 설정할 수도 있습니다. 이러한 크기는 다음 컨텍스트에서 기본적으로 사용됩니다.

크기 토큰 기본 사용 정책

small

표준 목록 항목 또는 작은 칩의 경우

medium

독립형 아이콘 및 제목 칩의 경우

large

카드와 같은 강조 표시 구성요소의 경우

아이콘 소스

아이콘은 ImageVector, ImageBitmap 또는 Painter를 소스로 사용할 수 있습니다. 자체 아이콘을 정의할 때는 가능한 경우 ImageVector를 사용하여 디스플레이 글라스에서 모든 크기로 선명한 렌더링을 지원하세요.

색상 및 색조

  • 자동 색조: 아이콘은 상위 서페이스에서 제공하는 LocalContentColorLocalContentColor 를 기반으로 색상을 확인합니다(예: surface 또는 Button).
  • 수동 색조: tint 매개변수를 사용하여 특정 색상을 적용합니다.
  • 다색 애셋: 색조를 적용하지 않아야 하는 아이콘 (예: 다색 브랜드 로고)의 경우 tint = Color.Unspecified를 설정합니다.
  • 일반 이미지: 아이콘 크기 조정 및 색조 규칙을 따르지 않는 사진 또는 일반 이미지의 경우 표준 androidx.compose.foundation.Image를 대신 사용합니다.

예: 기본 아이콘

다음 코드는 기본 아이콘을 만듭니다.

@Composable
fun IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}

예: 색상이 있는 아이콘

다음 코드는 테마의 기본 색상을 사용하여 색상이 지정된 아이콘을 만듭니다.

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}

예: 크기가 다른 아이콘

다음 코드는 특정 크기로 수정된 아이콘을 만듭니다.

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}

코드 관련 핵심 사항

  • 아이콘의 크기는 GlimmerTheme.iconSizes 수정자를 사용하여 맞춤설정됩니다. 아이콘의 기본값은 GlimmerTheme.iconSizes.medium입니다. UI 전반에서 일관성을 유지하려면 값을 하드 코딩하는 대신 이러한 크기를 사용하세요.
  • 아이콘의 현지화된 contentDescription을 제공합니다. 아이콘이 순전히 장식용이 아닌 한 항상 이러한 설명을 제공하세요.