Jetpack Compose Glimmer에서 Icon 구성요소는 단색 아이콘을 렌더링하도록 특별히 설계되었습니다. Icon는 ImageVector, ImageBitmap 또는 Painter을 소스로 사용할 수 있습니다. Icon는 Text와 마찬가지로 주변 UI 테마에 따라 색조를 지능적으로 적용할 수 있습니다.
기본적으로 LocalIconSize에서 제공하는 크기로 설정되지만 맞춤 아이콘 크기를 설정할 수도 있습니다.
예: 큰 별표 아이콘이 있는 상자 만들기
@Composable
fun GlimmerIconSample() {
GlimmerTheme {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Icon(
painter = painterResource(id = R.drawable.ic_star),
contentDescription = "A star icon from Google Symbols",
modifier = Modifier.size(GlimmerTheme.iconSizes.large),
tint = GlimmerTheme.colors.primary
)
}
}
}
}
코드에 관한 핵심 사항
- 아이콘의 소스는
painterResource를 사용하여 로컬 XML 벡터 드로어블 (R.drawable.ic_star)을 로드합니다. 이는 외부 라이브러리 오버헤드 없이 Jetpack Compose Glimmer UI에 아이콘을 통합하는 권장 접근 방식을 보여줍니다. - 아이콘의 크기는 수정자를 사용하여
GlimmerTheme.iconSizes.large를 설정하여 맞춤설정되며, 이는 Jetpack Compose Glimmer의 사전 정의된 크기를 재정의하는 방법을 보여줍니다. - 아이콘의 색조 색상은 색조 매개변수를 사용하여
GlimmerTheme.colors.primary를 설정하여 맞춤설정되며, 시각적 일관성을 위해 단색 아이콘 색조가 적용됩니다.