Jetpack Compose Glimmer에서 Card 구성요소는 관련 정보를 단일 단위로 그룹화하고 표시하도록 설계되었습니다. 카드는 적응성이 뛰어나 기본 콘텐츠, 선택적 제목 및 부제목, 선행 또는 후행 아이콘의 조합을 지원합니다. 카드는 기본적으로 AI 안경 디스플레이의 최대 전체 너비를 채우고 포커스를 지정할 수 있으며 클릭 가능하도록 만들 수도 있습니다.
카드 구조 및 슬롯
Jetpack Compose Glimmer 카드는 여러 전문 요소로 구성되어 있어 콘텐츠와 레이아웃을 맞춤설정할 수 있습니다.
헤더: 이미지를 포함하도록 설계된 카드 상단 섹션입니다.
제목 및 부제목: 이 텍스트 필드는 카드의 기본 및 보조 라벨을 제공합니다.
선행 아이콘: 카드 콘텐츠 영역의 시작 부분에 표시되는 선택적 아이콘입니다.
후행 아이콘: 카드 콘텐츠 영역 끝에 표시되는 선택적 아이콘입니다.
작업: 버튼과 같은 기본 상호작용 요소용 슬롯입니다. 이를 통해 사용자는 카드에서 직접 작업을 실행할 수 있습니다. 슬롯은 카드 컴포저블의 별도 오버로드에서 사용할 수 있습니다.
기본 콘텐츠: 기본 텍스트 또는 기타 콘텐츠를 배치하는 카드의 핵심 본문입니다.
기본 예: 기본 카드 만들기
다음과 같이 코드를 거의 사용하지 않고 매우 기본적인 카드를 만들 수 있습니다.
Card { Text("This is a card") }
자세한 예: 복잡한 카드 표시하기
다음 코드는 여러 슬롯을 함께 사용하여 카드를 빌드하는 방법을 보여줍니다. Card를 TitleChip과 페어링하는 방법도 보여줍니다.
@Composable
fun SampleGlimmerCard() {
val myHeaderImage = painterResource(id = R.drawable.header_image)
Column(horizontalAlignment = Alignment.CenterHorizontally) {
TitleChip { Text("Title Chip") }
Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
Card(
action = {
Button(onClick = {}) {
Text("Action Button")
}
},
header = {
Image(
painter = myHeaderImage,
contentDescription = "Header image for the card",
contentScale = ContentScale.FillWidth
)
},
title = { Text("Card Title") },
subtitle = { Text("Card Subtitle") },
leadingIcon = { FavoriteIcon, "Localized description" },
trailingIcon = { FavoriteIcon, "Localized description" }
) {
Text("A Jetpack Compose Glimmer Card using all available slots")
}
}
}
코드에 관한 핵심 사항
header,title,subtitle,leadingIcon,action과 같은 다양한 카드 요소를 활용하여 카드의 콘텐츠와 구조를 맞춤설정하는 방법을 보여줍니다.TitleChip을 배치하고Spacer를 사용하는 방법을 보여주는 예시입니다.