侧边栏壁纸
博主头像
Z同学博主等级

工作磨平激情前,坚持技术的热忱。 欢迎光临Z同学的技术小站。 分享最新的互联网知识。

  • 累计撰写 274 篇文章
  • 累计创建 55 个标签
  • 累计收到 74 条评论

Android CardView 的介绍与使用

Z同学
2022-03-01 / 0 评论 / 1 点赞 / 223 阅读 / 1,647 字
温馨提示:
本文最后更新于 2022-03-12,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

介绍

CardViewAndroid 5.0之后推出的布局效果,它可以实现布局的圆角效果,阴影效果。

CardView是继承FrameLayout实现的布局对象。所以我们可以将它当做一个layout使用。

例如下面这种列表的布局样式,可以说CardView是最佳选择方案了。

image-20220301120332852

导入

implementation 'androidx.cardview:cardview:1.0.0'

xml布局配置说明

cardBackgroundColor 设置背景颜色
cardCornerRadius 设置圆角边大小
cardElevation 阴影大小- 设置为0代表没有阴影
cardMaxElevation 最大的阴影大小
cardPreventCornerOverlap 在v20和之前的版本中添加内边距,这个属性是为了防止卡片内容和边角的重叠
cardUseCompatPadding 设置内边距,v21+的版本和之前的版本仍旧具有一样的计算方式
contentPadding 内边距
contentPaddingBottom  底部边距
contentPaddingLeft   左侧边距
contentPaddingRight  右侧边距
contentPaddingTop   顶部边距

简单示例如下:

image-20220301113848023

例如,我们给CardView 中添加图片。它会自动将图片切割为圆角。

image-20220301114259361

上面是通过给ImageView 添加背景颜色,可以看到右侧的效果图中,自动出现了圆角。

在API 21以前的版本中使用会有适配问题,但是现在估计不会还有api 21以前的手机需要适配了。那种情况可以忽略不计。

我们如果给ImageView 添加图片也会被CardView 自动切成圆角效果

image-20220301114745280

即使是来自网络的图片,通过src配置的图片也会被切成圆角显示。

点击动画

我们如果要定义CardView 的点击动画效果,例如放大等可以通过stateListAnimator进行定义:

下面就是使用objectAnimator创建的一个动画效果。

android:stateListAnimator="@anim/my_cardview"

//我们定义的my_cardview 
<?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="2dp"
            android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="0dp"
            android:valueType="floatType" />
    </item>
</selector>

而如果CardView中的UI效果复杂,我们可以在CardView下添加其他的Layout布局进行填充。一样不会影响到我们的圆角特性和阴影特性。

1

评论区