簡(jiǎn)介

Android 5.0版本中新增了CardView,CardView繼承自FrameLayout類(lèi)，可以在一個(gè)卡片布局中一致性的顯示內(nèi)容，卡片可以包含圓角和陰影椿息。也可以布局其他View。Google用一句話(huà)介紹了CardView:一個(gè)帶圓角和陰影背景的FrameLayout。
請(qǐng)注意：CardView被包裝為一種布局铺然，并且經(jīng)常在ListView和RecyclerView的Item布局中，作為一種容器使用酒甸。
在AndroidStudio配置android.support.v7包:
在Gradle中添加CardView包的依賴(lài)即可進(jìn)行使用:
compile 'com.android.support:cardview-v7:21.0.+'

1.CardView常用屬性
card_view:cardElevation 陰影的大小(設(shè)置z軸陰影)
card_view:cardMaxElevation 陰影最大高度(設(shè)置z軸最大高度值)
card_view:cardBackgroundColor 卡片的背景色
card_view:cardCornerRadius 卡片的圓角大小(半徑)
card_view:contentPadding 卡片內(nèi)容于邊距的間隔
card_view:contentPaddingBottom 卡片內(nèi)容與底部的邊距
card_view:contentPaddingTop 卡片內(nèi)容與頂部的邊距
card_view:contentPaddingLeft 卡片內(nèi)容與左邊的邊距
card_view:contentPaddingRight 卡片內(nèi)容與右邊的邊距
card_view:contentPaddingStart 卡片內(nèi)容于邊距的間隔起始
card_view:contentPaddingEnd 卡片內(nèi)容于邊距的間隔終止
card_view:cardUseCompatPadding 設(shè)置內(nèi)邊距魄健，V21+的版本和之前的版本仍舊具有一樣的計(jì)算方式(是否使用CompadPadding)
card_view:cardPreventConrerOverlap 在V20和之前的版本中添加內(nèi)邊距，這個(gè)屬性為了防止內(nèi)容和邊角的重疊(是否使用PreventCornerOverlap)

使用

1)普通使用效果
<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="70dp"
            android:layout_margin="10dp"
            android:gravity="center_horizontal|center_vertical"
            android:padding="10dp"
            android:text="普通使用效果"
            android:textColor="#000000"
            android:textSize="20sp" />
</android.support.v7.widget.CardView>

2)增加背景色和圓角的效果,注意我們此時(shí)使用background屬性是沒(méi)效果的：
<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:cardBackgroundColor="@color/colorPrimary"
        app:cardCornerRadius="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="70dp"
            android:layout_margin="10dp"
            android:gravity="center_horizontal|center_vertical"
            android:padding="10dp"
            android:text="添加背景色及圓角"
            android:textColor="#000000"
            android:textSize="20sp" />
</android.support.v7.widget.CardView>

3)設(shè)置z軸陰影
<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardCornerRadius="10dp"
        app:cardElevation="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="70dp"
            android:layout_margin="10dp"
            android:gravity="center_horizontal|center_vertical"
            android:padding="10dp"
            android:text="設(shè)置z軸陰影"
            android:textColor="#000000"
            android:textSize="20sp" />
</android.support.v7.widget.CardView>

4)Ripple效果:點(diǎn)擊時(shí)的漣漪效果
<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:clickable="true"
        android:foreground="?attr/selectableItemBackground"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardCornerRadius="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="70dp"
            android:layout_margin="10dp"
            android:gravity="center_horizontal|center_vertical"
            android:padding="10dp"
            android:text="Ripple效果"
            android:textColor="#000000"
            android:textSize="20sp" />
</android.support.v7.widget.CardView>

5)lift_on_touch:Cards插勤、Button等視圖應(yīng)該有一個(gè)觸摸抬起（lift-on-touch）的交互效果沽瘦，也就是在三維立體空間上的Z軸發(fā)生位移革骨，從而產(chǎn)生一個(gè)陰影加深的效果，與Ripple效果共同使用.
<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:clickable="true"
        android:foreground="?attr/selectableItemBackground"
        android:stateListAnimator="@drawable/lift_on_touch"
        app:cardBackgroundColor="@color/cardview_light_background"
        app:cardCornerRadius="10dp"
        tools:targetApi="LOLLIPOP">//tools:targetApi寫(xiě)不寫(xiě)都行
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="70dp"
            android:layout_margin="10dp"
            android:gravity="center_horizontal|center_vertical"
            android:padding="10dp"
            android:text="lift_on_touch"
            android:textColor="#000000"
            android:textSize="20sp" />
</android.support.v7.widget.CardView>

  @drawable/lift_on_touch:在res/drawable目錄下創(chuàng)建lift_on_touch.xml文件,代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_pressed="true">
        <set>
            <objectAnimator 
                android:duration="@android:integer/config_shortAnimTime" 
                android:propertyName="translationZ" 
                android:valueTo="6dp" 
                android:valueType="floatType" />
        </set>
    </item>
    <item>
        <set>
            <objectAnimator 
                android:duration="@android:integer/config_shortAnimTime" 
                android:propertyName="translationZ" 
                android:valueTo="0" 
                android:valueType="floatType" />
        </set>
    </item>
</selector>

注意

lift-on-touch效果實(shí)現(xiàn):
    即通過(guò)屬性動(dòng)畫(huà)動(dòng)態(tài)改變translationZ值析恋，沿著Z軸良哲，從0dp到6dp變化。然后將其賦值給 android:stateListAnimator 屬性即可助隧。由于 stateListAnimator 屬性只適用于Lollipop及以上版本筑凫，為了隱藏xml中的版本警告，可以指定 tools:targetApi="lollipop" 并村。
    關(guān)于這個(gè)功能巍实，需要補(bǔ)充說(shuō)明一點(diǎn)。這里的 lift_on_touch.xml 橘霎，嚴(yán)格意義上來(lái)講蔫浆，屬于anim資源，同時(shí)適用于API 21及以上版本姐叁，所以按道理上來(lái)講應(yīng)該將其放置在 res/anim-v21 目錄下瓦盛，然后使用 @anim/lift_on_touch 賦值給 stateListAnimator 屬性，而不是例子中的 @drawable/lift_on_touch 方法外潜。但是放置在 res/anim-v21 目錄下會(huì)產(chǎn)生一個(gè)“錯(cuò)誤”提示：
    XML file should be in either “animator” or “drawable”,not “anim”
    雖然這個(gè)“錯(cuò)誤”不影響編譯運(yùn)行原环，但是對(duì)于追求完美主義的程序員們來(lái)說(shuō)還是礙眼，所以本例中我選擇將其放在了 res/drawable 目錄下处窥，大家可以自行斟酌使用嘱吗。

下面是具體實(shí)現(xiàn)效果
主布局寫(xiě)

package com.example.mycardview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.BaseAdapter;
import android.widget.ListView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.HashMap;

public class MainActivity extends AppCompatActivity {

  ListView listView;
  ArrayList<HashMap<String, String>> arrayList = new ArrayList<>();

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
//    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);
    init();
  }

  void init() {
    for (int i = 0; i < 20; i++) {
      HashMap<String, String> map = new HashMap<>();
      map.put("title", "我是標(biāo)題" + i);
      map.put("data", "我是內(nèi)容" + i);
      arrayList.add(map);
    }
    listView = (ListView) findViewById(R.id.listview);
    listView.setAdapter(new MyAdapter());
  }

  class MyAdapter extends BaseAdapter {

    @Override
    public int getCount() {
      return arrayList.size();
    }

    @Override
    public Object getItem(int i) {
      return arrayList.get(i);
    }

    @Override
    public long getItemId(int i) {
      return 0;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
      View v = View.inflate(MainActivity.this,R.layout.adapter,null);
      TextView txTitle = v.findViewById(R.id.textView);
      txTitle.setText(arrayList.get(i).get("title"));
      TextView txData = v.findViewById(R.id.textView2);
      txData.setText(arrayList.get(i).get("data"));
      return v;
    }
  }
}

主xml寫(xiě)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.mycardview.MainActivity">

  <ListView
    android:id="@+id/listview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>

重點(diǎn)是適配器

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="100dp"
  android:orientation="vertical"
  tools:gravity="center_vertical">
  <android.support.v7.widget.CardView
    android:clickable="true"
    android:foreground="?attr/selectableItemBackground"
    android:stateListAnimator="@drawable/lift_on_touch"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:background="@drawable/back"
    app:cardBackgroundColor="@color/colorAccent"
    app:cardCornerRadius="15dp">

    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="horizontal">
      <ImageView
        android:id="@+id/imageView"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:srcCompat="@mipmap/ic_launcher" />
      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:orientation="vertical"
        tools:gravity="center_vertical">
        <TextView
          android:id="@+id/textView2"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="TextView"
          android:textSize="30sp" />
        <TextView
          android:id="@+id/textView"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="TextView"
          android:textSize="18sp" />
      </LinearLayout>
    </LinearLayout>
  </android.support.v7.widget.CardView>
</LinearLayout>

cardview和RecylerView效果圖.png

cv設(shè)置z軸陰影效果圖.png

cv增加背景色和圓角的效果.png