CardView

简介

Android 5.0版本中新增了CardView,CardView继承自FrameLayout类，可以在一个卡片布局中一致性的显示内容，卡片可以包含圆角和阴影。也可以布局其他View。Google用一句话介绍了CardView:一个带圆角和阴影背景的FrameLayout。
请注意：CardView被包装为一种布局，并且经常在ListView和RecyclerView的Item布局中，作为一种容器使用。
在AndroidStudio配置android.support.v7包:
在Gradle中添加CardView包的依赖即可进行使用:
compile 'com.android.support:cardview-v7:21.0.+'

1.CardView常用属性
card_view:cardElevation 阴影的大小(设置z轴阴影)
card_view:cardMaxElevation 阴影最大高度(设置z轴最大高度值)
card_view:cardBackgroundColor 卡片的背景色
card_view:cardCornerRadius 卡片的圆角大小(半径)
card_view:contentPadding 卡片内容于边距的间隔
card_view:contentPaddingBottom 卡片内容与底部的边距
card_view:contentPaddingTop 卡片内容与顶部的边距
card_view:contentPaddingLeft 卡片内容与左边的边距
card_view:contentPaddingRight 卡片内容与右边的边距
card_view:contentPaddingStart 卡片内容于边距的间隔起始
card_view:contentPaddingEnd 卡片内容于边距的间隔终止
card_view:cardUseCompatPadding 设置内边距，V21+的版本和之前的版本仍旧具有一样的计算方式(是否使用CompadPadding)
card_view:cardPreventConrerOverlap 在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠(是否使用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)增加背景色和圆角的效果,注意我们此时使用background属性是没效果的：
<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)设置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="设置z轴阴影"
            android:textColor="#000000"
            android:textSize="20sp" />
</android.support.v7.widget.CardView>

4)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"
        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等视图应该有一个触摸抬起（lift-on-touch）的交互效果，也就是在三维立体空间上的Z轴发生位移，从而产生一个阴影加深的效果，与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写不写都行
        <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目录下创建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效果实现:
    即通过属性动画动态改变translationZ值，沿着Z轴，从0dp到6dp变化。然后将其赋值给 android:stateListAnimator 属性即可。由于 stateListAnimator 属性只适用于Lollipop及以上版本，为了隐藏xml中的版本警告，可以指定 tools:targetApi="lollipop" 。
    关于这个功能，需要补充说明一点。这里的 lift_on_touch.xml ，严格意义上来讲，属于anim资源，同时适用于API 21及以上版本，所以按道理上来讲应该将其放置在 res/anim-v21 目录下，然后使用 @anim/lift_on_touch 赋值给 stateListAnimator 属性，而不是例子中的 @drawable/lift_on_touch 方法。但是放置在 res/anim-v21 目录下会产生一个“错误”提示：
    XML file should be in either “animator” or “drawable”,not “anim”
    虽然这个“错误”不影响编译运行，但是对于追求完美主义的程序员们来说还是碍眼，所以本例中我选择将其放在了 res/drawable 目录下，大家可以自行斟酌使用。

下面是具体实现效果
主布局写

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", "我是标题" + i);
      map.put("data", "我是内容" + 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写

<?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>

重点是适配器

<?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设置z轴阴影效果图.png cv增加背景色和圆角的效果.png