카드

Card 컴포저블은 UI의 Material Design 컨테이너 역할을 합니다. 카드는 일반적으로 일관된 단일 콘텐츠를 표시합니다. 다음은 카드를 사용할 수 있는 몇 가지 예입니다.

  • 쇼핑 앱의 제품
  • 뉴스 앱의 뉴스 기사
  • 커뮤니케이션 앱의 메시지

Card를 다른 컨테이너와 구별하는 단일 콘텐츠를 묘사하는 데 중점을 둡니다. 예를 들어 Scaffold는 전체 화면에 일반적인 구조를 제공합니다. 카드는 일반적으로 더 큰 레이아웃 내의 더 작은 UI 요소이지만 Column 또는 Row와 같은 레이아웃 구성요소는 더 간단하고 더 일반적인 API를 제공합니다.

텍스트와 아이콘으로 채워진 돌출 카드
그림 1. 텍스트와 아이콘으로 채워진 카드의 예

기본 구현

Card는 Compose의 다른 컨테이너와 매우 유사하게 동작합니다. 내부에서 다른 컴포저블을 호출하여 콘텐츠를 선언합니다. 예를 들어 다음의 간단한 예에서 Card에 Text 호출이 어떻게 포함되어 있는지 생각해 보세요.

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

고급 구현

Card의 API 정의는 참조를 참고하세요. 구성요소의 모양과 동작을 맞춤설정할 수 있는 여러 매개변수를 정의합니다.

주목해야 할 주요 매개변수는 다음과 같습니다.

  • elevation: 구성요소에 그림자를 추가하여 배경 위로 올라간 것처럼 보이게 합니다.
  • colors: CardColors 유형을 사용하여 컨테이너와 모든 하위 요소의 기본 색상을 설정합니다.
  • enabled: 이 매개변수에 false를 전달하면 카드가 사용 중지된 것처럼 표시되고 사용자 입력에 응답하지 않습니다.
  • onClick: 일반적으로 Card는 클릭 이벤트를 허용하지 않습니다. 따라서 주목해야 할 기본 오버로드는 onClick 매개변수를 정의하는 오버로드입니다. Card 구현이 사용자의 눌림에 응답하도록 하려면 이 오버로드를 사용해야 합니다.

다음 예에서는 이러한 매개변수와 shape, modifier와 같은 다른 일반적인 매개변수를 사용하는 방법을 보여줍니다.

채워진 카드

다음은 채워진 카드를 구현하는 방법의 예입니다.

여기서 핵심은 colors 속성을 사용하여 음영 색상을 변경하는 것입니다.

@Composable
fun FilledCardExample() {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant,
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Filled",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

이 구현은 다음과 같이 표시됩니다.

카드가 Material 테마의 표면 변형 색상으로 채워집니다.
그림 2. 채워진 카드의 예

승격된 카드

다음 스니펫은 승격된 카드를 구현하는 방법을 보여줍니다. 전용 ElevatedCard 컴포저블을 사용합니다.

elevation 속성을 사용하여 고도의 모양과 그로 인한 그림자를 제어할 수 있습니다.

@Composable
fun ElevatedCardExample() {
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Elevated",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

이 구현은 다음과 같이 표시됩니다.

카드가 그림자와 함께 앱 배경 위로 올라갑니다.
그림 3. 상단 카드의 예시

윤곽선 카드

다음은 윤곽선이 있는 카드의 예입니다. 전용 OutlinedCard 컴포저블을 사용합니다.

@Composable
fun OutlinedCardExample() {
    OutlinedCard(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface,
        ),
        border = BorderStroke(1.dp, Color.Black),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Outlined",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

이 구현은 다음과 같이 표시됩니다.

카드에 검은색 가는 테두리가 표시됩니다.
그림 4. 윤곽선이 있는 카드의 예

제한사항

카드에는 기본 스크롤 또는 닫기 작업이 포함되어 있지 않지만 이러한 기능을 제공하는 컴포저블에 통합할 수 있습니다. 예를 들어 카드에서 스와이프하여 닫기를 구현하려면 SwipeToDismiss 컴포저블과 통합합니다. 스크롤과 통합하려면 verticalScroll와 같은 스크롤 수정자를 사용하세요. 자세한 내용은 스크롤 문서를 참고하세요.

추가 리소스