Android
CardView

소개

매개 변수

비고

dependencies{
    compile 'com.android.support:cardview-v7:25.2.0'
}

CardView 시작하기

CardView 는 Android Support Library의 회원이며 카드 레이아웃을 제공합니다.

프로젝트에 CardView 를 추가하려면 build.gradle 종속성에 다음 행을 추가하십시오.

compile 'com.android.support:cardview-v7:25.1.1'

최신 버전 번호는 여기 에서 찾을 수 있습니다.

레이아웃에서 다음을 추가하여 카드를 얻을 수 있습니다.

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

        <!-- one child layout containing other layouts or views -->     

</android.support.v7.widget.CardView>

그 안에 다른 레이아웃을 추가하면 카드에 포함됩니다.

또한 CardView는 모든 UI 요소로 채워지고 코드 에서 조작 될 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/card_view"
    android:layout_margin="5dp"
    card_view:cardBackgroundColor="#81C784"
    card_view:cardCornerRadius="12dp"
    card_view:cardElevation="3dp"
    card_view:contentPadding="4dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp" >

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/item_image"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="16dp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/item_title"
            android:layout_toRightOf="@+id/item_image"
            android:layout_alignParentTop="true"
            android:textSize="30sp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/item_detail"
            android:layout_toRightOf="@+id/item_image"
            android:layout_below="@+id/item_title"
            />

    </RelativeLayout>
</android.support.v7.widget.CardView>

CardView 사용자 정의하기

CardView는 카드가 플랫폼 전반에서 일관된 모양을 갖도록 기본 높이와 모서리 반경을 제공합니다.

xml 파일에서 다음 속성을 사용하여 이러한 기본값을 사용자 정의 할 수 있습니다.

1. card_view:cardElevation 속성은 CardView에 표고를 추가합니다.
2. card_view:cardBackgroundColor 속성은 card_view:cardBackgroundColor 배경의 배경색을 사용자 정의하는 데 사용됩니다 (색상을 지정할 수 있음).
3. card_view:cardCornerRadius 속성은 card_view:cardCornerRadius 4 가장자리를 커브하는 데 사용됩니다.
4. card_view:contentPadding 속성은 카드와 카드 사이에 패딩을 추가합니다.

참고 : card_view는 상위 부모 레이아웃보기에 정의 된 네임 스페이스입니다. xmlns : card_view = " http://schemas.android.com/apk/res-auto "

예를 들면 다음과 같습니다.

<android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardElevation="4dp"
        card_view:cardBackgroundColor="@android:color/white"
        card_view:cardCornerRadius="8dp"
        card_view:contentPadding="16dp">

        <!-- one child layout containing other layouts or views -->     

</android.support.v7.widget.CardView>

다음을 사용하여 프로그래밍 방식으로 수행 할 수도 있습니다.

card.setCardBackgroundColor(....);
card.setCardElevation(...);
card.setRadius(....);
card.setContentPadding();

추가 등록 정보는 공식 javadoc 을 확인하십시오.

리플 애니메이션 추가

CardView에서 리플 애니메이션을 사용하려면 다음 속성을 추가하십시오.

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

CardView에서 이미지를 배경으로 사용 (사전 롤리팝 장치 문제)

CardView에서 Image / Color를 배경으로 사용할 때 가장자리에 약간의 흰색 패딩 (기본 카드 색이 흰색 인 경우)이 생길 수 있습니다. 이것은 카드보기의 기본 둥근 모서리로 인해 발생합니다. Pre-lollipop 기기에서 이러한 여백을 피하는 방법은 다음과 같습니다.

card_view:cardPreventCornerOverlap="false" 속성을 사용해야합니다. 1). XML에서 다음 스 니펫을 사용하십시오.

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    card_view:cardPreventCornerOverlap="false"
    android:layout_height="wrap_content"> 
      <ImageView
            android:id="@+id/row_wallet_redeem_img"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"
            android:src="@drawable/bg_image" />

</android.support.v7.widget.CardView>

2. 자바처럼이 cardView.setPreventCornerOverlap(false) .

이렇게하면 카드의 가장자리에있는 원하지 않는 패딩이 제거됩니다. 다음은이 구현과 관련된 몇 가지 시각적 예제입니다.

API 21의 이미지 배경이있는 1 개의 카드 (완벽하게 괜찮음)

2 속성없이 API 19의 이미지 배경이있는 카드 (이미지 주위의 여백에주의하십시오)

3 속성 cardView.setPreventCornerOverlap(false) 를 사용하는 API 19의 이미지 배경이있는 고정 카드 (문제가 수정 됨)

또한이 문서 에 대한 자세한 내용은 여기를 참조하십시오.
원래 SOF 게시물은 여기에

TransitionDrawable을 사용하여 CardView 배경색 애니메이션 만들기

public void setCardColorTran(CardView card) {
    ColorDrawable[] color = {new ColorDrawable(Color.BLUE), new ColorDrawable(Color.RED)};
    TransitionDrawable trans = new TransitionDrawable(color);
    if(Build.VERSION.SDK_INT > Build.VERSION_CODES.ICE_CREAM_SANDWICH_MR1) {
        card.setBackground(trans);
    } else {
        card.setBackgroundDrawable(trans);
    }
    trans.startTransition(5000);
}