안드로이드 CardView 사용하기

Overview

---

Android 7.0 부터는 CardView API가 기본적으로 제공합니다.

CardView는 RecyclerView 내의 레이아웃에 사용되는 컨테이너 입니다.

카드를 사용하면 간편하게 컨테이너의 스타일을 일관되게 유지하면서 뷰 그룹을 포함할 수 있습니다.

 

그림1. 카드 예

 

---

카드 만들기

종속성 추가(Add the dependencies)

CardView 위젯은 AndroidX의 일부입니다.

CardView를 사용하기 위해서는 build.gradle 파일의 AndroidX 라이브러리에서 CardView를 가져와야 합니다.

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

CardView를 사용하려면 레이아웃 파일에 추가해야 합니다. 다른 뷰를 포함하려면 CardView를 뷰 그룹으로 사용합니다. 

 

레이아웃이 다음과 같다고 가정 해 보겠습니다.

<androidx.cardview.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- Main Content View -->
    <androidx.constraintlayout.widget.ConstraintLayout>
        ...
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

 

CardView 사용자 정의

CardView카드가 플랫폼 전체에서 일관된 모양을 갖도록 기본 고도 및 모서리 반경을 제공합니다. 그러나 원하는 경우 이러한 값을 사용자 정의 할 수 있습니다. 카드의 배경색도 설정할 수 있습니다.

 

<androidx.cardview.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardBackgroundColor="#E6E6E6"
    card_view:cardCornerRadius="8dp"
    card_view:cardElevation="8dp">

    <!-- Main Content View -->
    <androidx.constraintlayout.widget.ConstraintLayout>
        ...
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

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

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

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

Ripple 이펙트 추가하기

기본적으로 CardView는 선택할 수 없으며 터치시 피드백을 표시하지 않습니다. 터치 피드백 애니메이션은 CardView를 터치 할때 시각적으로 피드백을 사용자에게 제공합니다. 이동작을 활성화하려면 다음 속성을 등록해야합니다.

<androidx.cardview.widget.CardView
  ...
  android:clickable="true"
  android:foreground="?android:attr/selectableItemBackground">
  ...
</androidx.cardview.widget.CardView>

android:foreground="?android:attr/selectableItemBackground" 속성을 CardView에 사용하면 Ripple 이펙트 효과를 추가 할 수 있습니다.

 

참고

• https://developer.android.com/reference/androidx/cardview/widget/CardView.html
• http://www.google.com/design/spec/components/cards.html#cards-usage