（三十六）CardView 使用及源码分析

版权声明：本文为博主原创文章，未经博主允许不得转载。

本文纯个人学习笔记，由于水平有限，难免有所出错，有发现的可以交流一下。

一、使用

1.demo

CardView 的使用很简单，直接上个 demo 看一下。

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="com.xiaoyue.cardview.MainActivity">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="15dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/a"/>
    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

直接在布局文件中使用即可。

效果1：

这是在安卓 5.0 以上的系统，在安卓 5.0 以下的系统显示的效果不一样。

效果2：

在布局文件中，给 CardView 设置 app:cardCornerRadius （圆角）属性，但是实际生效的是 CardView 下的子控件 ImageView。

2.使用文字

对比上面两个效果图，可以发现，在 5.0 以下系统，CardView 下边沿有一个默认的 Padding，在 5.0 以上是没有的。

这时候如果使用文字的话会导致文字部分被遮挡住。

5.0 以上效果：

5.0 以下效果：

这时候就需要对 CardView 使用 contentPadding 进行边距的设置。

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="com.xiaoyue.cardview.MainActivity">

    <android.support.v7.widget.CardView
        android:layout_width="400dp"
        android:layout_height="200dp"
        app:cardCornerRadius="25dp"
        app:contentPadding="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:textSize="20dp"/>

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

</android.support.constraint.ConstraintLayout>

效果：

3.其他属性

 ● android:cardCornerRadius
  ○ 在xml文件中设置card圆角的大小

 ● CardView.setRadius
  ○ 在代码中设置card圆角的大小

 ● android:cardBackgroundColor
  ○ 在xml文件中设置card背景颜色

 ● android:elevation
  ○ 在xml文件中设置阴影的大小

 ● card_view:cardElevation
  ○ 在xml文件中设置阴影的大小

 ● card_view:cardMaxElevation
  ○ 在xml文件中设置阴影最大高度

 ● card_view:cardCornerRadius
  ○ 在xml文件中设置卡片的圆角大小

 ● card_view:contentPadding
  ○ 在xml文件中设置卡片内容于边距的间隔

 ● card_view:contentPaddingBottom
  ○ 在xml文件中设置卡片内容于下边距的间隔

 ● card_view:contentPaddingTop
  ○ 在xml文件中设置卡片内容于上边距的间隔

 ● card_view:contentPaddingLeft
  ○ 在xml文件中设置卡片内容于左边距的间隔

 ● card_view:contentPaddingRight
  ○ 在xml文件中设置卡片内容于右边距的间隔

 ● card_view:contentPaddingStart
  ○ 在xml文件中设置卡片内容于边距的间隔起始

 ● card_view:contentPaddingEnd
  ○ 在xml文件中设置卡片内容于边距的间隔终止

 ● card_view:cardUseCompatPadding
  ○ 在xml文件中设置内边距，V21+的版本和之前的版本仍旧具有一样的计算方式

 ● card_view:cardPreventConrerOverlap
  ○ 在xml文件中设置内边距，在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠

二、源码

public class CardView extends FrameLayout {

    private static final int[] COLOR_BACKGROUND_ATTR = {android.R.attr.colorBackground};
    private static final CardViewImpl IMPL;

    static {
        if (Build.VERSION.SDK_INT >= 21) {
            IMPL = new CardViewApi21Impl();
        } else if (Build.VERSION.SDK_INT >= 17) {
            IMPL = new CardViewApi17Impl();
        } else {
            IMPL = new CardViewBaseImpl();
        }
        IMPL.initStatic();
    }
    ...

    private final CardViewDelegate mCardViewDelegate = new CardViewDelegate() {
        ...
    }
}

首先，CardView 继承于 FrameLayout ，拥有 FrameLayout 的特性。CardView 跟 AppCompat 使用了一样的机制，根据版本进行判断，去实例化不同的实现类，以及使用代理进行对象的操作。

这边从设置圆角开始分析，为什么属性添加在 CardView 却作用于 CardView 下的子控件。

CardView 的构造函数调用了初始化方法 initialize（）。

initialize：

    private void initialize(Context context, AttributeSet attrs, int defStyleAttr) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CardView, defStyleAttr,
                R.style.CardView);
        ...

        IMPL.initialize(mCardViewDelegate, context, backgroundColor, radius,
                elevation, maxElevation);
    }

initialize 进行了 xml 设置的属性获取，最终调用 CardViewImpl 的 initialize 方法，上面说了，CardViewImpl 会根据版本去实例化不同的实现类。

CardViewApi21Impl

class CardViewApi21Impl implements CardViewImpl {

    @Override
    public void initialize(CardViewDelegate cardView, Context context,
                ColorStateList backgroundColor, float radius, float elevation, float maxElevation) {
        final RoundRectDrawable background = new RoundRectDrawable(backgroundColor, radius);
        cardView.setCardBackground(background);

        View view = cardView.getCardView();
        view.setClipToOutline(true);
        view.setElevation(elevation);
        setMaxElevation(cardView, maxElevation);
    }
    ...
}

在安卓 5.0 以上的时候，实例化了 CardViewApi21Impl 对象，CardViewApi21Impl 的 initialize 方法有一个 RoundRectDrawable ，并把这个设置为 CardView 的 Background。我们看一下 RoundRectDrawable 。

RoundRectDrawable ：

class RoundRectDrawable extends Drawable {

    ...
    @Override
    public void draw(Canvas canvas) {
        final Paint paint = mPaint;

        final boolean clearColorFilter;
        if (mTintFilter != null && paint.getColorFilter() == null) {
            paint.setColorFilter(mTintFilter);
            clearColorFilter = true;
        } else {
            clearColorFilter = false;
        }

        canvas.drawRoundRect(mBoundsF, mRadius, mRadius, paint);

        if (clearColorFilter) {
            paint.setColorFilter(null);
        }
    }
        ...
        /**
     * Ensures the tint filter is consistent with the current tint color and
     * mode.
     */
    private PorterDuffColorFilter createTintFilter(ColorStateList tint, PorterDuff.Mode tintMode) {
        if (tint == null || tintMode == null) {
            return null;
        }
        final int color = tint.getColorForState(getState(), Color.TRANSPARENT);
        return new PorterDuffColorFilter(color, tintMode);
    }
}

RoundRectDrawable 的 draw 方法设置了一个 setColorFilter，这个 ColorFilter 是通过 createTintFilter 获取到的，然后调用 canvas.drawRoundRect 就会跟原先的背景进行混合，tintMode 就是混合模式 PorterDuff.Mode.SRC_IN。所以会产生图片是圆角的效果。
（混合模式具体链接：http://blog.csdn.net/qq_18983205/article/details/72810681）

再查看 CardViewApi17Impl ，这个实现类没有 RoundRectDrawable 这个东西，所以不能使图片变成圆角。