카드 기반 레이아웃 만들기

앱에서는 데이터를 비슷한 스타일의 컨테이너에 표시해야 할 때가 많습니다. 이러한 컨테이너는 각 항목의 정보를 보관하기 위해 목록에서 자주 사용됩니다. 시스템은 플랫폼 전반에서 일관된 모양인 카드에 정보를 표시하는 쉬운 방법으로 CardView API를 제공합니다. 이러한 카드는 시스템이 카드 아래 그림자를 그릴 수 있도록 카드가 포함된 뷰 그룹 위에 기본 고도를 설정합니다. 카드를 사용하면 간편하게 컨테이너의 스타일을 일관되게 유지하면서 뷰 그룹을 포함할 수 있습니다.

그림 1. 카드 예

종속성 추가

CardView 위젯은 AndroidX의 일부입니다. 프로젝트에서 이 위젯을 사용하려면 앱 모듈의 build.gradle 파일에 다음 종속 항목을 추가하세요.

Groovy

dependencies {
    implementation "androidx.cardview:cardview:1.0.0"
}

Kotlin

dependencies {
    implementation("androidx.cardview:cardview:1.0.0")
}

카드 만들기

CardView를 사용하려면 레이아웃 파일에 추가해야 합니다. 다른 뷰를 포함하려면 CardView를 뷰 그룹으로 사용합니다. 이 예에서 CardView는 단일 TextView를 포함하여 사용자에게 일부 정보를 표시합니다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    ... >
    <!-- A CardView that contains a TextView -->
    <androidx.cardview.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

카드는 기본 고도로 화면에 그려지며, 시스템은 카드 아래에 그림자를 그립니다. card_view:cardElevation 속성을 사용하여 카드에 맞춤 고도를 제공할 수 있습니다. 고도가 커지면 그림자가 진하게 그려지고 고도가 낮아지면 그림자가 연하게 그려집니다. CardView는 Android 5.0(API 수준 21) 이상에서 실제 고도와 동적 그림자를 사용하고 그 이전 버전에서는 프로그래매틱 방식으로 그림자를 구현합니다.

다음 속성을 사용하여 CardView 위젯의 모양을 맞춤설정합니다.

레이아웃에서 모서리 반경을 설정하려면 card_view:cardCornerRadius 속성을 사용합니다.
코드에서 모서리 반경을 설정하려면 CardView.setRadius 메서드를 사용합니다.
카드의 배경색을 설정하려면 card_view:cardBackgroundColor 속성을 사용합니다.

자세한 내용은 CardView의 API 참조를 확인하세요.