카드

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

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

카드는 머티리얼 테마의 노출 영역 변형 색상으로 채워집니다.
그림 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와 같은 스크롤 수정자를 사용하세요. 자세한 내용은 스크롤 문서를 참고하세요.

추가 리소스