Plain's Blog

休想打败我的生活🔥

  1. 1. 介绍
  2. 2. 主要属性
  3. 3. 引用
  4. 4. 案例
  5. 5. 适配
    1. 5.1. Padding
    2. 5.2. 点击效果
  6. 6. 总结

介绍

CardView是Google在Android 5.0中加入的带有圆角背景和阴影的FrameLayout

它的继承结构是这样的

1
2
3
4
5
6
7
8
9
java.lang.Object

↳ android.view.View

↳ android.view.ViewGroup

↳ android.widget.FrameLayout

↳ android.support.v7.widget.CardView

主要属性

属性 作用 备注
cardBackgroundColor 设置背景色
cardCornerRadius 设置圆角半径
contentPadding 设置内部padding
cardElevation 设置阴影大小
cardUseCompatPadding padding兼容属性 默认为false, 用于5.0以上版本, true则添加额外的padding绘制阴影, 做到和5.0以下相同的效果
cardPreventCornerOverlap 防止内容和圆角重叠 默认为true, 用于5.0以下, 通过添加额外的padding, 达到效果

引用

implementation ‘com.android.support:cardview-v7:27.1.1’

后面版本号最好和项目appcompat的版本号一致

案例

让CardView作为ListView的item进行展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<FrameLayout 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.support.v7.widget.CardView
android:foreground="?attr/selectableItemBackground"
app:cardCornerRadius="10dp"
android:layout_margin="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">

...

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

</FrameLayout>

]

适配

Padding

由于CardView在5.0以上和5.0以下的显示效果不一致,我们可以通过cardUseCompatPadding让5.0的设备趋同与5.0以下设备,但是这样的显示效果不是最佳的,我们可以通过配置不同的value,来让系统选择padding的大小。

新建value-v21来存放5.0以上的间距

cardview

新建一个dimens.xml来存放间距

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--左右16dp-->
<dimen name="margin_item_l_r">16dp</dimen>
<!--上下8dp-->
<dimen name="margin_item_t_b">8dp</dimen>

</resources>

那么5.0以下设备设置多少间距合适呢, Google在官方文档给出了说明,原文如下

Before Lollipop, CardView adds padding to its content and draws shadows to that area. This padding amount is equal to maxCardElevation + (1 - cos45) * cornerRadius on the sides and maxCardElevation * 1.5 + (1 - cos45) * cornerRadius on top and bottom.

给出了一套公式来计算

左右间距为:maxCardElevation + (1 - cos45) * cornerRadius

上下间距为:maxCardElevation * 1.5 + (1 - cos45) * cornerRadius

maxCardElevation为最大阴影大小, 如cardElevation为4dp, 那么该属性就为8

cornerRadius为圆角大小, 如果设置的cornerRadius为8dp, 那么该属性为16

点击效果

CardView设置点击效果可以通过foreground设置

1
android:foreground="?attr/selectableItemBackground"

总结

学习了CardView的用法和属性,未来有要补充的在添加。

本文最后更新于 天前,文中所描述的信息可能已发生改变