Android卡片式列表展示的简单实现

立即下载用AI写一个

发布时间：2019-03-14

1人 | 浏览：4709次 | 收藏 |

技术：Android+cardView

运行环境：androidstudio

概述

在实现列表展示的时候，偶尔我们想在item下面加点阴影，让每个item看起来更立体些，那么这种效果的实现，让我联想到了卡片控件CardView,那么这篇文章就让我们来学习下CardView的基本使用吧

详细

###前言
在实现列表展示的时候，偶尔我们想在item下面加点阴影，让每个item看起来更立体些，那么这种效果的实现，让我联想到了卡片控件CardView,那么这篇文章就让我们来学习下CardView的基本使用吧。

今天涉及到的内容有：
1. ImageView 缩放属性的讲解
2. CardView的基本讲解
3. 具体代码实现
4. 项目结构图和效果图

####一.ImageView 缩放属性的讲解
由于实现的是图片列表的展示，于是使用到了ImageView这个控件，ImageView在设置图片的时候，涉及到图片缩放的问题，ImageView的scaleType分以下几种类型：
1. center：将图片按原本大小居中显示在控件上，若图片长/宽大于控件宽/高，则将图片中间位置显示到控件上。
2. centerCrop：将图片按比例缩放到控件上展示，图片的长/宽 大于或等于 控件宽/高
3. centerInside：将图片按比例缩放到控件上展示，图片的长/宽 小于或等于控件宽/高
4. fitCenter：将图片按比例缩放到控件宽度，居中显示
5. fitStart：将图片按比例缩放到控件宽度，靠近view顶部显示
6. fitEnd：将图片按比例缩放到控件宽度，靠近view底部显示
7. fitXY：不按比例缩放图片，目标是把图片塞满整个View，可能会导致图片变形

#####二. CardView的基本讲解
CardView继承自FrameLayout，源码如下：
```
public class CardView extends FrameLayout {
```
如此看来，CardView算是一个布局控件了。
######CardView引用
android v4或v7包引用如下：
```
implementation 'com.android.support:cardview-v7:25.3.1'
```
androidx 包引用如下：
```
implementation 'androidx.cardview:cardview:1.0.0-beta01'
```
######CardView属性介绍
- android:cardBackgroundColor 设置背景
- android:cardCornerRadius 设置圆角
- app:cardElevation 设置阴影大小
- app:cardMaxElevation 设置阴影的最大高度
- app:contentPadding 内容距离边界的距离
- app:contentPaddingXXX 设置局部的内边距，替换Padding的，在CardView中设置Padding是不起作用的。
- app:cardUseCompatPadding 如果您需要将CardView与其他视图对齐，可能在21以下，可以将此标志设置为true，CardView将在21之后的平台上添加相同的填充值。
- app:cardPreventCornerOverlap 是否裁剪边界以防止重叠

######CardView一般设置
```
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="20dp"
    android:layout_marginRight="10dp"
    app:cardCornerRadius="6dp"
    app:cardBackgroundColor="#ffffff">

<ImageView
        android:id="@+id/imv"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:scaleType="centerCrop"/>
</androidx.cardview.widget.CardView>
```
######CardView适配问题
这里主要涉及到两个属性:
```
app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false"
```
cardUseCompatPadding设置true可以保证所有版本的padding设置相同，系统默认是false，就会导致有些手机显示边界填充不满，
cardPreventCornerOverlap 是否裁剪边角，以保证边角是圆形的！在21以上的版本，默认是帮你裁剪好圆角的，但是21之前的版本是不会帮你裁剪的，会出现图片显示有棱角的情况，这时，需要根据情况自定义ImageView以实现部分圆角。
######CardView设置点击效果
点击效果的话，设置background不起效果，需要这样设置：
```
android:foreground="?android:attr/selectableItemBackground"
```
自定义背景的话，如下：
v21及以上
```
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#bdbdbd">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <size
                android:width="20dp"
                android:height="20dp" />
            <solid android:color="#f0f0f0" />
        </shape>

</item>
</ripple>
```
v21以下
```
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#42000000" />
            <size android:width="20dp" android:height="20dp" />
        </shape>
    </item>
    <item android:drawable="#00000000"
          android:state_pressed="false" />
</selector>
```
版本21以下必须使用通过透明度控制灰度的色值,如:#42000000

####三. 具体代码实现
具体代码，大家可以参考demo

####四. 项目结构图和效果图
![image.png](/contentImages/image/jianshu/6127340-5762eb41718a7de6.png)

![1.gif](/contentImages/image/jianshu/6127340-ca9ae8870b500d2f.gif)

![2.png](/contentImages/image/jianshu/6127340-e55452cd34ab7466.png)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

Android卡片式列表展示的简单实现

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子