简介
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
