Exciter

生命不息、折腾不止

0%

Android-CardView的使用详解

本文完整源码下载地址:AndroidBasic

1.CardView简介

1.1 CardView介绍

CardView 简介
Google开发者网站上关于CardView的使用的简单介绍。
CardView可以轻松地在卡片内显示信息。这些卡片在整个平台都具有一致的外观,并且以默认高程位于所属视图组上方,因此系统会在其下方绘制阴影。卡片可用来轻松包含一组视图,同时为容器提供一致的样式。

1.2 Google官方Api地址

CardView API
Google开发者网站上的CardView相关Api,里边有详细的属性和方法以及继承关系介绍。

1.3 CardView属性介绍

属性 功能 值类型 对应的Java方法
cardBackgroundColor 背景色 int/ColorStateList setCardBackgroundColor(@ColorInt int color) setCardBackgroundColor(@Nullable ColorStateList color)
cardCornerRadius 圆角半径 float setRadius(float radius)
cardElevation 阴影大小 float setCardElevation(float elevation)
cardMaxElevation 阴影最大高度 float setMaxCardElevation(float maxElevation)
cardPreventCornerOverlap 为内容添加内边距防止与CardView角点重叠(为兼容5.0之前版本) boolean setPreventCornerOverlap(boolean preventCornerOverlap)
cardUseCompatPadding 填充内容设置内边距(为5.0之后版本添加相同的填充值) boolean setUseCompatPadding(boolean useCompatPadding)
contentPadding 内边距 dimen setContentPadding(@Px int left, @Px int top, @Px int right, @Px int bottom)
contentPaddingLeft 左侧内边距 dimen
contentPaddingTop 顶部内边距 dimen
contentPaddingRight 右侧内边距 dimen
contentPaddingBottom 底部内边距 dimen

2.CardView使用

2.1 引入CardView依赖

如果项目中没有引入CardView,那么引入以下依赖即可:

1
implementation "androidx.cardview:cardview:1.0.0"

2.2 创建CardViewActivity

新建一个CardViewActivity,用来展示CardView。

2.3 xml布局

Activity的xml布局如下,包含1个CardView和3个SeekBar,xml中已经配置了CardView常用的属性,3个SeekBar分别用来调整CardView的圆角、阴影和内间距:

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
<?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:orientation="vertical"
tools:context=".widget.cardview.CardViewActivity">

<include layout="@layout/layout_tool_bar" />

<androidx.cardview.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="15dp"
android:background="@android:color/transparent"
app:cardBackgroundColor="@android:color/holo_green_light"
app:cardCornerRadius="20dp"
app:cardElevation="20dp"
app:cardMaxElevation="30dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="false"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/card" />

</androidx.cardview.widget.CardView>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="15dp"
android:layout_marginTop="30dp">

<SeekBar
android:id="@+id/seek_bar_01"
android:layout_width="200dp"
android:layout_height="wrap_content" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="控制圆角大小" />

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="15dp"
android:layout_marginTop="30dp">

<SeekBar
android:id="@+id/seek_bar_02"
android:layout_width="200dp"
android:layout_height="wrap_content" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="控制阴影大小" />

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="15dp"
android:layout_marginTop="30dp">

<SeekBar
android:id="@+id/seek_bar_03"
android:layout_width="200dp"
android:layout_height="wrap_content" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="控制图片间距" />

</LinearLayout>

</LinearLayout>

2.4 在Activity中控制CardView的属性

在Activity中使用CardView属性对应的Java方法来控制CardView变化:

1
2
3
4
5
6
//改变圆角大小
mCardView.setRadius(progress);
//改变阴影大小
mCardView.setCardElevation(progress);
//改变内边距
mCardView.setContentPadding(progress, progress, progress, progress);

2.5 最终效果

2021042601

3.完整代码

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
package com.exciter.androidbasic.widget.cardview;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.cardview.widget.CardView;

import android.os.Bundle;
import android.widget.SeekBar;

import com.exciter.androidbasic.R;

public class CardViewActivity extends AppCompatActivity {

private CardView mCardView;

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

private void initView() {
Toolbar toolbar = findViewById(R.id.tool_bar);
toolbar.setTitle("CardView");
toolbar.setNavigationOnClickListener(v -> finish());
mCardView = findViewById(R.id.card_view);
SeekBar mSeekBar01 = findViewById(R.id.seek_bar_01);
SeekBar mSeekBar02 = findViewById(R.id.seek_bar_02);
SeekBar mSeekBar03 = findViewById(R.id.seek_bar_03);

mSeekBar01.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
mCardView.setRadius(progress);
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {

}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {

}
});
mSeekBar02.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
mCardView.setCardElevation(progress);
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {

}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {

}
});
mSeekBar03.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
mCardView.setContentPadding(progress, progress, progress, progress);
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {

}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {

}
});
}
}