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>

代码中：

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

来看下效果：

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

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

最后附上demo：demo下载