Material Design之CardView的使用
本文介绍CardView这个控件的使用，CardView继承至FrameLayout类，是support-v7包下的一个类，使用时必须引入cardview依赖包，可在下载的sdk文件夹中找到。。。
使用CardView可以实现卡片式布局效果，非常好看，卡片还可以包含圆角、阴影、背景。CardView是一个ViewGroup，布局时包含其它的View从而实现优雅界面效果。
首先来看看个界面效果：
是不是很漂亮啊！其实使用起来很简单，把它作为一个普通的Layout使用即可。如下：
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardBackgroundColor="#ffffff"
app:cardCornerRadius="10dp"
app:cardElevation="8dp">
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="40dp"
android:text="CardView"
android:textSize="20sp" />
</android.support.v7.widget.CardView>
这个对应的效果就是刚刚图片上的第一个效果。
其它的亦是如此，就不多说了，这里为了看看CardView效果就只简单的加了一个TextView作为演示。
整个布局activity_main.xml：
<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"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardBackgroundColor="#ffffff"
app:cardCornerRadius="10dp"
app:cardElevation="8dp">
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="40dp"
android:text="CardView"
android:textSize="20sp" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/card_view2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardBackgroundColor="#303069"
app:cardCornerRadius="10dp"
app:cardElevation="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="40dp"
android:text="CardView"
android:textSize="20sp" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/card_view3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardBackgroundColor="#ffffff"
app:cardCornerRadius="8dp"
app:cardElevation="5dp">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="@mipmap/bg" />
</android.support.v7.widget.CardView>
</LinearLayout>
设置CardView的点击事件和其它控件一样：
CardView mCardView = (CardView) findViewById(R.id.card_view);
mCardView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"点击了CardView",Toast.LENGTH_LONG).show();
}
});
下面主要介绍一下在CardView中比较重要的常用属性：
app:cardElevation阴影的高度app:cardMaxElevation阴影最大高度app:cardBackgroundColor卡片的背景色app:cardCornerRadius卡片的圆角大小app:contentPadding卡片内容于边距的间隔app:contentPaddingBottomapp:contentPaddingTopapp:contentPaddingLeftapp:contentPaddingRightapp:contentPaddingStartapp:contentPaddingEnd
app:cardUseCompatPadding设置内边距，V21+的版本和之前的版本仍旧具有一样的计算方式app:cardPreventConrerOverlap在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠
contentPadding 这个意思我们来看一张效果图你就明白了:
设置：
app:contentPadding="20dp"效果：
cardUseCompatPadding
设置：
app:cardUseCompatPadding="true"效果：
我们从布局预览中可以看出，设置这个后布局往里面缩小了一点，即有一点填充。
好了，CardView就是那么简单！！！