Jetpack Compose Glimmer의 아이콘

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

Jetpack Compose Glimmer에서 Icon 구성요소는 단색 아이콘을 렌더링하기 위한 UI 요소입니다. 아이콘은 틴트와 크기 조절을 지능적으로 처리하여 GlimmerTheme과 시각적으로 일관되고 가독성을 유지합니다.

크기

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

크기 토큰 기본 사용 정책

small

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

medium

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

large

카드와 같이 강조가 필요한 구성요소에 사용됩니다.

아이콘 소스

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

색상 및 색조

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

예: 서피스 내 기본 아이콘

다음 코드는 테마의 기본 색상을 사용하여 원형 표면 내부에 배치된 아이콘을 만듭니다.

@Composable
fun IconSampleUsage() {
    GlimmerLazyColumn(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item { IconSizesSample() }
        item {
            Icon(
                FavoriteIcon,
                "Localized description",
                Modifier.surface(
                        shape = CircleShape,
                        color = GlimmerTheme.colors.primary,
                        border = null,
                    )
                    .padding(12.dp),
            )
        }
    }
}

예: 크기가 다른 아이콘

다음 코드는 다양한 아이콘 크기를 보여줍니다.

@Composable
fun IconSizesSample() {
    val iconSizes = GlimmerTheme.iconSizes
    Column(
        verticalArrangement = Arrangement.spacedBy(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.small))
        // medium is also the default size, defining explicitly for clarity
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.medium))
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.large))
    }
}

코드에 관한 핵심 사항

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