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:

android之CardView的使用_第1张图片

设置为1dp:

android之CardView的使用_第2张图片

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


下面就来实现上面的效果,并且给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();
			}
		});
	}

来看下效果:

android之CardView的使用_第3张图片

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

最后附上demo:demo下载



你可能感兴趣的:(CardView)