CardView

本文谨供个人学习使用,文章内容多摘自参考链接中的文章。

CardView卡片视图

Android L(Android 5.0)开始,Google给开发者带来了一个可实现立体感的控件-CardView,从本质上看,CardView是在FrameLayout的基础上添加了圆角和阴影效果。CardView作为一种容器,并且经常在ListView和RecyclerView的Item布局中,可使item都有圆角及阴影的效果,满足MD设计规范。在开发中如果需要实现阴影,圆角,3D什么的效果,可以试试cardview,当然通过layerlist结合selector也可以实现很好的交互。

说到底,CardView也是一个容器类布局,只是它提供了卡片这样一种形式。开发者可以定义卡片的大小与视图高度,并设置圆角的角度。

在高版本中使用CardView是很舒服的,很容易实现各种效果,但是在低版本上兼容性不是很好。

继承

此处输入图片的描述

属性

1
2
3
4
5
6
7
8
9
10
11
app:cardBackgroundColor-- 背景色
app:cardCornerRadius-- 边缘弧度数
app:cardElevation-- 高度
app:cardMaxElevation-- 最大高度
app:cardUseCompatPadding-- 设置内边距,v21+的版本和之前的版本仍旧具有一样的计算方式
app:cardPreventCornerOverlap-- 在v20和之前的版本中添加内边距,这个属性是为了防止卡片内容和边角的重叠
app:contentPadding-- 卡片边界距离内部的距离
app:contentPaddingLeft-- 卡片边界距离左边的距离
app:contentPaddingTop-- 卡片边界距离顶边的距离
app:contentPaddingRight-- 卡片边界距离右边的距离
app:contentPaddingBottom-- 卡片边界距离底边的距离

此处输入图片的描述

1、设置背景颜色
app:cardBackgroundColor=” “

2、设置padding
app:contentPadding=” “app:contentPaddingTop=” “app:contentPaddingBottom=” “app:contentPaddingLeft=” “app:contentPaddingRight=” “

Tips:上面是CardView设置背景颜色和padding的方式,如果你直接通过android:padding=” “ 和android:background=” “设置,是无效的.

3、设置Z轴的最大高度
app:cardMaxElevation=” “

4、点击之后的涟漪效果
android:clickable=”true”
android:foreground=”?android:attr/selectableItemBackground”
Tips:如果你给CardView设置了点击事件,就不需要设置android:clickable=”true”了

如果你的CardView是可点击的,可以通过foreground属性使用系统定义好的RippleDrawable: selectableItemBackground,从而达到在5.0及以上版本系统中实现点击时的涟漪效果(Ripple)。

这个涟漪效果在5.0以上版本中才能展示,在低版本上是一个普通的点击变暗的效果.

关于Z轴的概念

Android5.0 引入了Z轴的概念,可以让组件呈现3D效果。看下面这幅图:

此处输入图片的描述

图中的FAB(FloatingActionButton)很明显是浮在界面上的,这就是Z轴的效果。Z属性可以通过elevation和translationZ进行修改Z= elevation+translationZ
android:elevation=” “ 设置该属性使控件有一个阴影,感觉该控件像是“浮”起来一样,达到3D效果

android:translationZ=”” 设置该组件阴影在Z轴(垂直屏幕方向)上的位移

5.0之前,我们如果想给View添加阴影效果,以体现其层次感,通常的做法是给View设置一个带阴影的背景图片。在5.0之后,我们只需要简单的修改View的Z属性,就能让其具备阴影的层次感,不过要求版本至少5.0 Lollipop,也就是API21。

Android Design Support Librarysupport-v7中一些组件已经封装好了Z属性,不需要5.0 就可以使用。

FloatingActionButton就可以通过app:elevation=””使用Z属性,CardView可以通过app:cardElevation=” “ 来使用。关于Z轴的更多介绍,可以观看官方:定义阴影与裁剪视图

基本使用

1.在应用的build.gradle中添加支持库,版本就看自己的了

1
compile 'com.android.support:support-v4:25.3.1'

2.布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<?xml version="1.0" encoding="utf-8"?>
<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:gravity="center_horizontal"
android:orientation="vertical"
tools:context="com.materialdesignui.cardview.CardViewActivity">

<android.support.v7.widget.CardView
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<TextView
android:text="普通狀態cardview"
android:gravity="center"
android:padding="5dp"
android:layout_width="wrap_content"
android:layout_height="25dp"/>

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

<android.support.v7.widget.CardView
android:layout_marginTop="20dp"
app:cardCornerRadius="7dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<TextView
android:text="圆角狀態cardview"
android:gravity="center"
android:padding="5dp"
android:layout_width="wrap_content"
android:layout_height="25dp"/>

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

<android.support.v7.widget.CardView
android:layout_marginTop="20dp"
app:cardElevation="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<TextView
android:text="阴影狀態cardview"
android:gravity="center"
android:padding="5dp"
android:layout_width="wrap_content"
android:layout_height="25dp"/>

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

<android.support.v7.widget.CardView
android:layout_marginTop="20dp"
app:contentPadding="15dp"
app:cardBackgroundColor="@android:color/holo_orange_light"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<TextView
android:text="内边距狀態cardview"
android:background="@android:color/white"
android:gravity="center"
android:padding="5dp"
android:layout_width="wrap_content"
android:layout_height="25dp"/>

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

<android.support.v7.widget.CardView
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<ImageView
android:src="@drawable/tab_01"
android:layout_width="100dp"
android:layout_height="100dp"/>

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

<android.support.v7.widget.CardView
android:layout_marginTop="20dp"
android:clickable="true"
app:cardElevation="10dp"
app:cardCornerRadius="10dp"
android:foreground="?attr/selectableItemBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<ImageView
android:src="@drawable/tab_01"
android:layout_width="100dp"
android:layout_height="100dp"/>

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

3.效果如下:
此处输入图片的描述

这里需要说下,点击cardview所产生的水波纹效果,CardView 加上android:foreground=”?attr/selectableItemBackground” 这个属性会在 Lollipop 上自动加上 Ripple 效果,在旧版本则是一个变深/变亮的效果。

结合recyclerview

效果,单击也设置了水波纹的效果

此处输入图片的描述

布局:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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="wrap_content"
android:orientation="vertical">

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:clickable="true"
android:foreground="?attr/selectableItemBackground"
app:cardCornerRadius="10dp"
app:cardElevation="15dp">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:id="@+id/iv"
android:src="@drawable/tab_03"
android:layout_width="108dp"
android:layout_height="108dp"
android:padding="12dp"
android:scaleType="centerCrop"/>

<TextView
android:id="@+id/tv_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="36dp"
android:layout_toRightOf="@id/iv"
android:gravity="center"
android:padding="3dp"
android:text=""/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>

activity:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class CardRecyclerActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_card_recycler);

RecyclerView mRv = (RecyclerView) findViewById(R.id.rv_card);
mRv.setLayoutManager(new LinearLayoutManager(this));
mRv.setAdapter(new CardRecAdapter());

}

}

adapter:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
public class CardRecAdapter extends RecyclerView.Adapter<CardRecAdapter.ViewHolder> {

private List<String> mList;

public CardRecAdapter() {
this.mList = new ArrayList<>();
for (int i = 1; i <= 60; i++) {
mList.add("测试中的数据。。。" + i);
}
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_card, parent, false);
return new ViewHolder(view);
}

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
holder.render(mList.get(position));
}

@Override
public int getItemCount() {
return mList.size();
}

public class ViewHolder extends RecyclerView.ViewHolder{

private TextView mTv;

public ViewHolder(View itemView) {
super(itemView);
mTv = (TextView) itemView.findViewById(R.id.tv_card);
}

public void render(String text){
mTv.setText(text);
}
}
}

注意点

  1. CardView从本质上属于FrameLayout,而CardView通常包含了较多的内容元素,为了方便地排版布局中的各个元素,一般借助于其他基本布局容器,比如这里我们使用了一个 RelativeLayout 作为CardView的唯一Child。

  2. 在Android 5.0之前的版本中设置了app:cardElevation=””后CardView会自动留出空间供阴影显示,而5.0之后的版本中没有预留空间。这也导致了以Lollipop为分界线的不同系统上CardView的尺寸大小不同。所以给CardView设置 Margin时需要兼容一下,否则在低版本上每个卡片之间的距离会特别大,浪费屏幕空间.
    此处输入图片的描述

为了解决这个问题,有两种方法:

第一种,使用不同API版本的dimension资源适配(也就是借助values和values-21文件夹中不同的dimens.xml文件);

1
2
3
4
5
6
7
1.创建 /res/value 和 /res/value-v21 资源文件夹于项目对应 Module 目录下,前者放置旧版本/通用的资源文件(了解的可以跳过),后者放置 21 及更高 SDK 版本的资源文件。

2.在 value 内的 dimen.xml 创建一个 Dimension (<dimen> 属性),随便命个名(如 xxx_card_margin)并填入数值 0dp。

3.接着在 value-v21 文件夹内的 dimen.xml 创建名字相同的 Dimension,并填入你期望的预留边距(一般和 CardElevation 阴影大小相同)

4.最后,在你布局中的 CardView 中设置 android:layout_margin="@dimen/card_margin"

第二种,就是使用 setUseCompatPadding属性,设置为true(默认值为false),让CardView在不同系统中使用相同的padding值。

**3.**实现水波纹的动画选择器,创建一个 TranslationZ的变换动画放在/res/anim,自己取一个名(如 touch_raise.xml),加入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="true">
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="@dimen/touch_raise"
android:valueType="floatType" />
</item>
<item>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="0dp"
android:valueType="floatType" />
</item>
</selector>

android:stateListAnimator="@anim/touch_raise"。

参考链接:

CardView使用详解

CardView的使用(关于文中的圆角效果没看懂)

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器