Android
CardView

前書き

パラメーター

備考

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

CardView入門

CardViewはAndroidサポートライブラリのメンバーであり、カードのレイアウトを提供します。

プロジェクトに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属性は、CardViewの背景の背景色をカスタマイズするために使用されます（任意の色を指定できます）。
3. card_view:cardCornerRadius属性は、CardViewの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で画像を背景として使用する（Lollipopの以前のデバイスの問題）

CardViewでImage / Colorをバックグラウンドとして使用している間は、端にわずかな白いパディング（デフォルトのカードの色が白の場合）が発生することがあります。これは、カードビューのデフォルトの丸い角のために発生します。 Pre-lollipopデバイスのマージンを避ける方法は次のとおりです。

card_view:cardPreventCornerOverlap="false"属性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. このようなJavaでは、 cardView.setPreventCornerOverlap(false) 。

そうすることで、カードの端にある不要なパディングが取り除かれます。この実装に関連するいくつかの視覚的な例を示します。

API 21の画像背景を持つ1枚のカード （完全に細かい）

2属性を持たない API19の画像背景を持つカード （画像の周りにパディングがあることに注意してください）

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