Jetpack Compose Glimmer의 카드

적용 가능한 XR 기기
이 가이드는 이러한 유형의 XR 기기를 위한 환경을 빌드하는 데 도움이 됩니다.
XR 기기 유형 알아보기 →
디스플레이 안경
XR 기기 유형 알아보기 →

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

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

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

해부 및 슬롯

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

슬롯 설명

헤더

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

제목 및 부제목

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

앞부분 아이콘

카드의 콘텐츠 영역 시작 부분에 표시되는 선택적 아이콘 (Icon인 경우가 많음)입니다.

뒷부분 아이콘

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

기본 콘텐츠

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

카드 기본값

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

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

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

예: 기본 카드

다음 코드는 카드를 빌드하는 데 필요한 최소한의 코드를 보여줍니다.

Card { Text("This is a card") }

예: 슬롯이 여러 개인 카드

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

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}

코드 관련 핵심 사항

  • `title`, ` subtitle`, `leadingIcon`과 같은 다양한 카드 요소를 사용하여 카드의 콘텐츠와 구조를 맞춤설정하는 방법을 보여줍니다.
  • Card 오버로드를 onClick와 함께 사용하여 전체 카드 서피스를 대화형으로 만듭니다.

작업 카드

카드에 작업 버튼을 포함하려면 ActionCard를 사용합니다. 작업 카드에는 표준 카드와 동일한 요소가 있으며 하단 버튼을 정의하는 추가 action 매개변수도 포함됩니다.

그림 2. Jetpack Compose Glimmer의 ActionCard 예입니다.

예: 기본 작업 카드

이 코드는 ActionCard를 만드는 방법을 보여줍니다.

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}

예: 아이콘이 있는 작업 카드

이 코드는 아이콘이 있는 더 복잡한 ActionCard를 만드는 방법을 보여줍니다.

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}