android卡片布局win10,MaterialDesign学习篇(七)，CardView卡片式布局的使用

什么是CardView

CardView顾名思义就是一个卡片型的View，它是在Android5.0引入的一个控件，作为一个容器使用，它本身继承于FrameLayout，可以说它的使用和FrameLayout差不多，也是用来包裹一些子View，只不过它可以添加圆角和阴影的效果，经常在ListView或RecyclerView的item布局中作为容器使用，使内容看起来更加突出和显眼。

如何使用CardView

先看下效果，未使用CardView时:

使用CardView时的效果:

导入依赖

compile 'com.android.support:cardview-v7:26.0.0-alpha1'

布局文件中，使用CardView

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="10dp"

app:contentPadding="5dp"

app:cardElevation="5dp"

app:cardCornerRadius="5dp"

>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

>

android:layout_width="150dp"

android:layout_height="100dp"

android:background="@mipmap/book"

/>

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

android:orientation="vertical"

android:layout_marginLeft="5dp"

android:padding="5dp"

>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="特战先驱"

android:textSize="16sp"

android:textStyle="bold"

/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="战争是血淋淋的，战争是实实在在的，战争中的每一个军人都是有血有肉的。本小说恰恰注重于战术层面和细节问题，通过一个个有血有肉的军人，演绎出一段段可歌可泣的具体的战争故事！"

android:textSize="14sp"

android:lines="4"

android:ellipsize="end"

android:layout_marginTop="5dp"

/>

和使用FrameLayout一样，直接用CardView作为容器包裹，其中app:contentPadding="5dp"指定了卡片内容于边距的间隔为5dp，app:cardElevation="5dp"指定了卡片阴影的大小为5dp，app:cardCornerRadius="5dp"指定了卡片的圆角大小为5dp。是不是看起来有种卡片的形状，相比没有添加CardView,是不是显得比较好看。

CardView的一些属性说明

属性 说明

cardBackgroundColor 卡片的背景颜色

cardCornerRadius 卡片的圆角大小

cardElevation 阴影的大小

cardMaxElevation 阴影最大高度

cardUseCompatPadding 设置内边距，V21+的版本和之前的版本仍旧具有一样的计算方式

cardPreventCornerOverlap 在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠

contentPadding 卡片内容于边距的间隔

contentPaddingTop 卡片内容与顶部的边距

contentPaddingBottom 卡片内容与底部的边距

contentPaddingLeft 卡片内容与左边的边距

contentPaddingRight 卡片内容与右边的边距

本文对CardView做了简单的介绍，并演示了它的效果，需要源码的可以查看: