Android阴影效果与CardView版本适配的细节问题

记录一下使用cardView来实现阴影效果时碰到的版本适配的解决方案。

一、背景

在API 21以前想要实现阴影效果一般要通过drawable或者.9图去手动实现，随着Material Design的出现，阴影效果也开始得到官方支持，这个时候使用android:elevation和android:translateZ可以很方便的实现阴影效果，同时也出现了CardView和FloatingActionButton这些自带阴影效果的support控件。

这里是一些使用过程中优缺点的体会：

1. 使用drawable或者.9图，优点是不用但心适配问题，不同API版本会有一致的效果，实现也相对简单。
   缺点主要是阴影效果相对来说还是有些僵硬，不如API21以上系统的阴影自然，其次是没有Z轴的概念。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="4dp" android:top="4dp">
        <shape>
            <solid android:color="#0F000000" />

            <corners android:radius="10dp"/>
        </shape>
    </item>

    <item android:bottom="4dp" android:right="4dp">
        <shape
            android:shape="rectangle">

            <solid android:color="@android:color/white"/>

            <corners android:radius="10dp"/>
        </shape>
    </item>
</layer-list>

Drawable阴影效果

2. 使用android:elevation和android:translateZ，这个优缺点很明显了，优点简单且效果好，缺点是只支持API21以上，而且support库也没有提供支持，ViewCompat中有相应的方法但是在api21以下并没有做任何处理。

3. 使用CardView或者FloatingActionButton这些自带阴影的控件。优点是阴影效果好且支持低版本。
   缺点则是API 21以上和以下的版本可能会有不同的视觉效果，比如简单的使用如下代码效果如图所示：

<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <androidx.cardview.widget.CardView
            android:id="@+id/card_item_challenges"
            android:layout_width="300dp"
            android:layout_height="110dp"
            android:layout_marginTop="30dp"
            app:cardUseCompatPadding="false"
            app:cardCornerRadius="5dp"
            app:cardBackgroundColor="@android:color/white">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="asfdasdfasdfasdfasdfsadfsdf"/>
        </androidx.cardview.widget.CardView>
        <com.xxx.ChallengesProcessView
            android:layout_width="150dp"
            android:layout_height="20dp"
            android:layout_alignRight="@id/card_item_challenges"
            android:layout_marginRight="14dp"
            android:layout_alignTop="@id/card_item_challenges"
            android:layout_marginTop="-8dp"
            app:processSize="5"
            app:totalSize="10"
            app:textSize="10sp"/>
</RelativeLayout>

左边API19，右边API22

二、CardView的阴影效果原理

//CardView的静态代码
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();
    }

cardView针对不同的API做了不同的处理，简单的看下实现原理如下

    //CardViewApi21Impl 的初始化方法
    @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);
        //通过setElevation属性实现阴影
        view.setElevation(elevation);
        setMaxElevation(cardView, maxElevation);
    }

    //CardViewApi17Impl
    @Override
    public void initStatic() {
        RoundRectDrawableWithShadow.sRoundRectHelper =
                new RoundRectDrawableWithShadow.RoundRectHelper() {
                    @Override
                    public void drawRoundRect(Canvas canvas, RectF bounds, float cornerRadius,
                            Paint paint) {
                        canvas.drawRoundRect(bounds, cornerRadius, cornerRadius, paint);
                    }
                };
    }

可以看到API21以上仍然使用系统的elevation属性。API21以下则通过canvas.drawRoundRect实现，具体的细节在RoundRectDrawableWithShadow这个Drawable中，这个类用来绘制一个带阴影的矩形，来作为CardView的background。

 //CardViewBaseImpl
 RoundRectDrawableWithShadow background = createBackground(context,   backgroundColor, radius, elevation, maxElevation);
 background.setAddPaddingForCorners(cardView.getPreventCornerOverlap());
 cardView.setCardBackground(background);
 updatePadding(cardView);

三、问题与解决方案

如上面效果图所示，可以看到不同API效果差别还是比较大的。

1. 阴影效果不明显。
   可以通过app:cardElevation调节阴影效果。

2. 如上面效果所示，本来该悬浮在CardView之上的控件显示在了下面。
   这从侧面也可以验证CardViewAPI21以上是通过Z轴来改变的，这个时候给要悬浮其上的添加Android:elevation属性即可保证一致的视觉效果。

3. cardView外层嵌套布局后API21以上阴影效果失效。
   添加app:cardUseCompatPadding="true"属性。

4. 添加完cardUseCompatPadding发现cardView的width和height改变了。
   我们知道通过drawable添加阴影，阴影会占为控件的一部分，设置cardUseCompatPadding为true后无论哪个API版本，阴影都会占控件的一部分，这个时候就要自己去处理边距问题了，预留一部分空间。

5. CardView如果设置了圆角，低版本会出现margin。
   添加app:cardPreventCornerOverlap="false"，使内容和圆角重叠，覆盖圆角。默认是true。

左边API19，右边API22