Jetpack Compose Glimmer의 카드

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

Jetpack Compose Glimmer에서 Card 구성요소는 관련 콘텐츠의 기본 컨테이너 역할을 하여 이해하기 쉬운 정보 단위의 명확한 시각적 경계를 만듭니다. 카드는 적응성이 뛰어나 기본 콘텐츠, 선택적 제목, 부제목, 선행 또는 후행 아이콘의 조합을 지원합니다. 카드는 기본적으로 사용 가능한 최대 너비를 채우고 포커스를 지정할 수 있으며 클릭 가능하도록 만들 수도 있습니다. 카드는 헤더 이미지가 맨 위에 있고 제목, 부제목, 본문 콘텐츠가 그 뒤에 오는 세로 배열을 지원합니다.

카드는 Jetpack Compose Glimmer 표면 시스템을 기반으로 빌드되므로 깊이 효과, 클리핑, 일관된 테두리 강조 표시와 같은 물리적 속성을 상속합니다.

그림 1. Jetpack Compose Glimmer의 다양한 카드 스타일의 예시

애너토미 및 슬롯

Jetpack Compose Glimmer 카드는 콘텐츠와 레이아웃을 맞춤설정할 수 있는 여러 전문 요소로 구성되어 있습니다.

슬롯 설명

헤더

이미지를 포함하도록 설계된 카드 상단 섹션입니다.

제목 및 부제목

이 텍스트 필드는 카드의 기본 라벨과 보조 라벨을 제공합니다. 제목이 부제 위에 배치됩니다.

앞부분 아이콘

카드 콘텐츠 영역의 시작 부분에 표시되는 선택적 아이콘 (일반적으로 Icon)입니다.

뒷부분 아이콘

카드 콘텐츠 영역 끝에 표시되는 선택적 아이콘입니다.

작업

Button과 같은 기본 상호작용 요소용 슬롯입니다.

기본 콘텐츠

기본 Text 또는 콘텐츠의 카드 핵심 본문입니다.

카드 기본값

카드에는 다음 기본값이 적용됩니다.

  • 너비: 카드는 디스플레이 글라스의 가독성을 최적화하기 위해 디스플레이의 사용 가능한 최대 너비를 채웁니다.
  • 최소 높이: 80.dp
  • 텍스트 세로 간격: 3.dp
  • 헤더 모양: 24.dp 모서리와 함께 RoundedCornerShape 사용
  • 콘텐츠 패딩: 기본값은 GlimmerTheme.componentSpacingValues.medium입니다. 이는 헤더 이미지와 콘텐츠 컨테이너 주변의 가장 바깥쪽 패딩에 영향을 미칩니다.
  • 도형: 기본값은 GlimmerTheme.shapes.medium입니다.

  • 텍스트 렌더링: 다음 슬롯에 GlimmerTheme.typography의 기본값을 사용합니다.

예: 기본 카드

다음 코드는 기본 카드를 만듭니다.

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}

예: 슬롯이 여러 개인 복잡한 카드

다음 코드는 여러 슬롯을 함께 사용하여 카드를 빌드하는 방법을 보여줍니다.

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}

코드에 관한 핵심 사항

  • header, title, leadingIcon, action과 같은 다양한 카드 요소를 활용하여 카드의 콘텐츠와 구조를 맞춤설정하는 방법을 보여줍니다.
  • 카드(또는 내부 작업)만 포커스 가능해야 하므로 작업과 함께 표준 Card 오버로드를 사용합니다. 카드 전체 표면을 대화형으로 만들어야 하는 경우 onClick와 함께 Card 오버로드를 대신 사용하세요.
  • 이 카드는 작업 슬롯을 사용하므로 카드 표면에 포커스를 둘 수 없고 포커스가 작업 버튼으로 향합니다.