카드

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,
        )
    }
}

이 구현은 다음과 같습니다.

카드는 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,
        )
    }
}

이 구현은 다음과 같습니다.

카드는 그림자와 함께 앱 배경 위에 표시됩니다.
그림 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,
        )
    }
}

이 구현은 다음과 같습니다.

카드가 얇은 검은색 테두리로 둘러싸여 있습니다.
그림 4. 윤곽선이 있는 카드의 예

제한사항

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

추가 리소스