高级UI之CardView

发表于 | 分类于 | |

CardView是在Android 5.0推出的新控件，为了兼容之前的版本，将其放在了v7包里面，在现在扁平化设计潮流的驱使下，越来越多的软件使用到了CardView这一控件，那么这篇文章就来看看CardView怎么使用吧

CardView的特有属性

cardBackgroundColor 背景色
cardCornerRadius 边缘弧度数
cardElevation 高度
cardMaxElevation 最大高度
cardUseCompatPadding 设置内边距
cardPreventCornerOverlap 防止卡片内容和边角的重叠
contentPadding 内边距
contentPaddingLeft 内左边距
contentPaddingRight 内右边距
contentPaddingTop 内上边距
contentPaddingBottom 内下边距

CardView使用

由于CardView的使用比较简单，这里不再过多描述
使用前导入依赖

1
implementation 'com.android.support:cardview-v7:25.4.0'

文字

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
<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"
    tools:context=".MainActivity">

    <android.support.v7.widget.CardView
        android:layout_width="300dp"
        android:layout_height="200dp"
        app:cardBackgroundColor="@android:color/holo_green_light"
        app:cardCornerRadius="8dp"
        app:cardElevation="10dp"
        app:contentPadding="20dp"
		android:layout_margin="0dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/darker_gray"
            android:text="card view text"
            android:textColor="@android:color/white" />
    </android.support.v7.widget.CardView>

</LinearLayout>

效果如下

图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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"
    tools:context=".MainActivity">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="8dp"
        app:cardElevation="10dp"
        app:contentPadding="20dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@mipmap/ic_launcher" />
    </android.support.v7.widget.CardView>

</LinearLayout>

效果如下

适配注意点

  1. 边框圆角效果
    5.x 图片和布局都可以很好的呈现圆角效果，图片也变圆角了
    4.x 图不能变成圆角，如果要做成5.x一样的效果：通过加载图片的时候自己去处理成圆角

  2. 阴影效果

    1
    2
    app:cardCornerRadius="10dp"<!--圆角（半径值越大圆角就越明显）-->
    app:cardElevation="10dp" <!--阴影效果（值越大阴影效果越明显）-->

  3. 5.x上有Ripple水波纹效果（低版本自定义）

    1
    2
    android:foreground="?attr/selectableItemBackground"
    android:clickable="true"

  4. 5.x实现按下的互动效果下沉，松开弹起 - Z轴位移效果（低版本自定义）

    1
    2
    android:stateListAnimator="@drawable/translation"
    android:clickable="true"

  5. 可以设置内容的内边距

    1
    app:contentPadding="5dp"

细节：
5.x上面，边距阴影比较小，需要手动添加边距16dp
4.x上面，边距太大， 手动修改边距0dp（原因：兼容包里面设置阴影效果自动设置了margin来处理16dp）

translation.xml

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

    <item>
        <objectAnimator
           android:duration="@android:integer/config_shortAnimTime"
           android:propertyName="translationZ"
           android:valueTo="0dp"
           android:valueType="floatType" />
    </item>
</selector>

Donate comment here