android之CardView的使用

Google在android5.0的时候发布了一个新的控件CardView(卡片布局),其继承于FrameLayout，可以作为一个ViewGroup来使用。其实现的卡片效果可以是圆角的也可以添加阴影，使用非常的简单，下面来简单的教大家使用。

准备工作：

1、更新到最新的SDK，在sdk/extras/android/support/v7/中找到CardView文件夹

2、导入上一步找到的文件夹到eclipse，更改项目为library项目。

3、新建自己的工程，关联导入的CardView项目。

CardView中常用的属性：

app:cardBackgroundColor="#303069"，设置背景色

app:cardCornerRadius="8dp"，设置卡片的圆角半径

app:cardPreventCornerOverlap="true"，内容是否在边角的时候重叠，true为不重叠

app:cardElevation="8dp"，阴影的高度

在materia design中，常见到ripple效果(波纹)和Z轴阴影,那么Google是如何设计这些效果的呢？是这样的，Google认为手机屏幕显示就如同一个水池，手机屏幕的玻璃就相当于水面，按压屏幕的时候产生ripple效果，显示的物体在屏幕里面，也就是在水池底部，那么如果要显示阴影效果，只能把物体往上吸，这样光从上面射下去才会有阴影效果，所以Z轴的设置都是正的，要达到这个效果，自然要缩小视图的尺寸，这样就浪费了屏幕的显示区域，我们来设置不同的阴影高度，看下显示的效果：

cardElevation设置为8dp:

设置为1dp:

可以看到边距明显的缩小了。

下面就来实现上面的效果，并且给CardView添加点击监听。总共需要在两处设置，一个是布局文件，一个是代码。

布局文件：

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res/com.xinxue.cardviewdemo"
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="@dimen/cardView_height"
    app:cardBackgroundColor="#303069"
    app:cardCornerRadius="8dp"
    android:layout_gravity="center"
    app:cardPreventCornerOverlap="true"
    app:cardElevation="8dp"
    app:contentPadding="3dp" >

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY"
        android:src="@drawable/b1" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:padding="10dp"
        android:text="风景图"
        android:textColor="#ff0"
        android:textSize="15sp"
        android:textStyle="italic" />

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

代码中：

@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		cardView = (CardView) findViewById(R.id.cardView);
		cardView.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				Toast.makeText(MainActivity.this,"点到我啦~~~~~", Toast.LENGTH_LONG).show();
			}
		});
	}

来看下效果：

扫描关注我的微信公众号：

ok，下面提供Demo和library下载，直接把两个工程导入进去就可以运行啦~~~~·

最后附上demo：demo下载