android低版本兼容阴影效果,Android阴影效果与CardView版本适配的细节问题

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

一、背景

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

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

使用drawable或者.9图，优点是不用但心适配问题，不同API版本会有一致的效果，实现也相对简单。

缺点主要是阴影效果相对来说还是有些僵硬，不如API21以上系统的阴影自然，其次是没有Z轴的概念。

android:shape="rectangle">

Drawable阴影效果

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

使用CardView或者FloatingActionButton这些自带阴影的控件。优点是阴影效果好且支持低版本。

缺点则是API 21以上和以下的版本可能会有不同的视觉效果，比如简单的使用如下代码效果如图所示：

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">

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">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:text="asfdasdfasdfasdfasdfsadfsdf"/>

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"/>

左边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效果差别还是比较大的。

阴影效果不明显。

可以通过app:cardElevation调节阴影效果。

如上面效果所示，本来该悬浮在CardView之上的控件显示在了下面。

这从侧面也可以验证CardViewAPI21以上是通过Z轴来改变的，这个时候给要悬浮其上的添加Android:elevation属性即可保证一致的视觉效果。

cardView外层嵌套布局后API21以上阴影效果失效。

添加app:cardUseCompatPadding="true"属性。

添加完cardUseCompatPadding发现cardView的width和height改变了。

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

CardView如果设置了圆角，低版本会出现margin。

添加app:cardPreventCornerOverlap="false"，使内容和圆角重叠，覆盖圆角。默认是true。

左边API19，右边API22