我们知道，Google 在 2014 年 I/O大会上发布的一种新的设计规范——Material Design，这种设计规范给 Android UI 设计带来了很多的变化。比如，更加强调真实性、有立体感，由此引发的一系列针对阴影的UI设计。我相信，很多专注业务逻辑的Android程序员，拿着这样的一个UI效果，往往一头雾水。所以，我仅在此抛砖引玉，希望能够打开思路，更好的满足UI的要求。
好的，不多说废话，下面先来看看几种实现阴影的方式，先有个直观印象，后面挨个说明（文末有几种实现方式的效果对比图）：
1、layer-list方式
这种方式稍微复杂点，不过对shape熟悉的话，那也是分分钟的事。
- 首先需要自定义drawable文件——shadow_demo.xml，并在shape样式中由浅入深指定阴影的颜色、样式等。文件存放路径：res--drawable--shadow_demo.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 边框阴影 -->
<item>
<shape android:shape="rectangle">
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<stroke
android:width="3px"
android:color="#00FF2121" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<stroke
android:width="3px"
android:color="#10FF2121" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<stroke
android:width="3px"
android:color="#20FF2121" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<stroke
android:width="3px"
android:color="#30FF2121" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<stroke
android:width="3px"
android:color="#50FF2121" />
</shape>
</item>
<!-- 中心背景 -->
<item>
<shape
android:shape="rectangle"
android:useLevel="false">
<stroke
android:width="3px"
android:color="#64FF2121" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
</layer-list>- 然后当作View的背景阴影，即可实现阴影效果。
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="50dp"
android:gravity="center"
android:orientation="vertical"
tools:ignore="RtlCompat">
<com.tcl.uicompat.TCLTextView
style="@style/TextBody3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="layer-list实现"
tools:ignore="HardcodedText" />
<View
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="50dp"
android:background="@drawable/shadow_demo" />
</LinearLayout>2、.9图片
这个方式算是比较简单，和自定义的drawable差不多，UI切好图放做背景即可，就不多说了。
相比自定义的drawable，我们只是把作图的行为放到了UI切图部分而已，整体工作量并未减少。
3、Z轴elevation实现
这是最简单的实现方式，只需要xml布局中的一个elevation属性就可以做到，如果要做作动画阴影效果，可以使用TranslationZ动态海拔高度偏移高度，是一个偏移的距离。Z轴有如下公式：
Z = elevation + translationZ
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="100dp"
android:gravity="center"
android:orientation="vertical"
tools:ignore="RtlCompat">
<com.tcl.uicompat.TCLTextView
style="@style/TextBody3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Z轴elevation实现"
android:textColor="#FF000000"
tools:ignore="HardcodedText" />
<View
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="50dp"
android:background="@drawable/shadow_background_1"
android:elevation="10dp"
tools:targetApi="lollipop" />
</LinearLayout>shadow_background_1.xml文件存放路径：res--drawable--shadow_background_1.xml，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFE1E2EB" />
<corners android:radius="8px" />
</shape>不过使用Z轴实现阴影有几点需要注意：
- 如果View的父布局宽度是wrap_content或固定值，需要在顶层父布局中添加android:clipChildren="false"，避免阴影显示不全；
- elevation属性在API21以上才能使用，而且它的值不能设置太大，否则物极必反，导致不显示阴影；
- 视图的阴影一定是由有轮廓的视图投射出来的。简单来说，就是需要设置控件的背景，即 android:background 属性。我们可以选择图片作为背景，也可以使用shape定义一个 drawable 形状。
- elevation的阴影位置，与作用的View在界面的位置相关，下图可对比看看差别：
PS：使用完全一样的View，在界面不同位置，阴影不一样。相当于在Y为0，正上方Z轴的光源，向左、向右、向下照射而形成的阴影。
总的来说： Android原生实现的阴影是比较好的，推荐使用。但是有些特殊UI效果需要改变阴影位置和颜色、透明度，Z轴的方式目前是做不到（当然API28可以一试），所以需要更多的方式来实现阴影。
4、CardView包裹实现
我们知道CardView可以实现圆角和阴影，当然CardView不支持改变颜色、位置，因为实现方式的原因，如下见解如有误还望读者提出：
- API21之前使用的drawpath实现阴影，而硬件加速不支持drawpath，所以应该是开启了软解的，并写死了灰色，且不提供public api供外接访问。
- API21之后实现应该不用设置layertype，默认硬件加速就可以，因为使用的Z轴实现。
具体实现就不贴出了，有如下属性可以使用：
5、自定义ViewGroup实现
这种方式是顺着CardView的思路去实现的，因为CardView没有暴露出颜色、位置的API，那我们就可以自己去参照实现，依赖View提供的API——setShadowLayer()。
这种方式稍微复杂些，会涉及到自定义属性，自定义ViewGroup，但写好了就可以一劳永逸，值得试试。效果如图：
（1）自定义ShadowContainer文件，继承自ViewGroup：
package com.tcl.uicompat.util;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import com.tcl.uicompat.R;
/**
* Created by Agg on 2020/03/05.
* Tips: Implemented based on packaging.
* Reference: https://github.com/cjlemon/Shadow
*/
public class ShadowContainer extends ViewGroup {
private final float deltaLength;
private final float cornerRadius;
private final Paint mShadowPaint;
private boolean drawShadow;
public ShadowContainer(Context context) {
this(context, null);
}
public ShadowContainer(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ShadowContainer(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ShadowContainer);
int shadowColor = a.getColor(R.styleable.ShadowContainer_containerShadowColor, Color.RED);
float shadowRadius = a.getDimension(R.styleable.ShadowContainer_containerShadowRadius, 0);
deltaLength = a.getDimension(R.styleable.ShadowContainer_containerDeltaLength, 0);
cornerRadius = a.getDimension(R.styleable.ShadowContainer_containerCornerRadius, 0);
float dx = a.getDimension(R.styleable.ShadowContainer_deltaX, 0);
float dy = a.getDimension(R.styleable.ShadowContainer_deltaY, 0);
drawShadow = a.getBoolean(R.styleable.ShadowContainer_enable, true);
a.recycle();
mShadowPaint = new Paint();
mShadowPaint.setStyle(Paint.Style.FILL);
mShadowPaint.setAntiAlias(true);
mShadowPaint.setColor(shadowColor);
mShadowPaint.setShadowLayer(shadowRadius, dx, dy, shadowColor);
}
@Override
protected void dispatchDraw(Canvas canvas) {
if (drawShadow) {
/*
setShadowLayer()/setMaskFilter is not support hardware acceleration, so using LAYER_TYPE_SOFTWARE, but software layers isn't always good.
LAYER_TYPE_SOFTWARE: software layers should be avoided when the affected view tree updates often.
*/
if (getLayerType() != LAYER_TYPE_SOFTWARE) {
setLayerType(LAYER_TYPE_SOFTWARE, null);
}
View child = getChildAt(0);
int left = child.getLeft();
int top = child.getTop();
int right = child.getRight();
int bottom = child.getBottom();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
canvas.drawRoundRect(left, top, right, bottom, cornerRadius, cornerRadius, mShadowPaint);
} else {
Path drawablePath = new Path();
drawablePath.moveTo(left + cornerRadius, top);
drawablePath.arcTo(new RectF(left, top, left + 2 * cornerRadius, top + 2 * cornerRadius), -90, -90, false);
drawablePath.lineTo(left, bottom - cornerRadius);
drawablePath.arcTo(new RectF(left, bottom - 2 * cornerRadius, left + 2 * cornerRadius, bottom), 180, -90, false);
drawablePath.lineTo(right - cornerRadius, bottom);
drawablePath.arcTo(new RectF(right - 2 * cornerRadius, bottom - 2 * cornerRadius, right, bottom), 90, -90, false);
drawablePath.lineTo(right, top + cornerRadius);
drawablePath.arcTo(new RectF(right - 2 * cornerRadius, top, right, top + 2 * cornerRadius), 0, -90, false);
drawablePath.close();
canvas.drawPath(drawablePath, mShadowPaint);
}
}
super.dispatchDraw(canvas);
}
/**
* setMeasuredDimension(): store the modified width and modified height.
*
* @param widthMeasureSpec the original width
* @param heightMeasureSpec the original height
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (getChildCount() != 1) {
throw new IllegalStateException("Child View can have only one!!!");
}
int measuredWidth = getMeasuredWidth();
int measuredHeight = getMeasuredHeight();
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
View child = getChildAt(0);
MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();
int childBottomMargin = (int) (Math.max(deltaLength, layoutParams.bottomMargin) + 1);
int childLeftMargin = (int) (Math.max(deltaLength, layoutParams.leftMargin) + 1);
int childRightMargin = (int) (Math.max(deltaLength, layoutParams.rightMargin) + 1);
int childTopMargin = (int) (Math.max(deltaLength, layoutParams.topMargin) + 1);
int widthMeasureSpecMode;
int widthMeasureSpecSize;
int heightMeasureSpecMode;
int heightMeasureSpecSize;
if (widthMode == MeasureSpec.UNSPECIFIED) {
widthMeasureSpecMode = MeasureSpec.UNSPECIFIED;
widthMeasureSpecSize = MeasureSpec.getSize(widthMeasureSpec);
} else {
if (layoutParams.width == MarginLayoutParams.MATCH_PARENT) {
widthMeasureSpecMode = MeasureSpec.EXACTLY;
widthMeasureSpecSize = measuredWidth - childLeftMargin - childRightMargin;
} else if (MarginLayoutParams.WRAP_CONTENT == layoutParams.width) {
widthMeasureSpecMode = MeasureSpec.AT_MOST;
widthMeasureSpecSize = measuredWidth - childLeftMargin - childRightMargin;
} else {
widthMeasureSpecMode = MeasureSpec.EXACTLY;
widthMeasureSpecSize = layoutParams.width;
}
}
if (heightMode == MeasureSpec.UNSPECIFIED) {
heightMeasureSpecMode = MeasureSpec.UNSPECIFIED;
heightMeasureSpecSize = MeasureSpec.getSize(heightMeasureSpec);
} else {
if (layoutParams.height == MarginLayoutParams.MATCH_PARENT) {
heightMeasureSpecMode = MeasureSpec.EXACTLY;
heightMeasureSpecSize = measuredHeight - childBottomMargin - childTopMargin;
} else if (MarginLayoutParams.WRAP_CONTENT == layoutParams.height) {
heightMeasureSpecMode = MeasureSpec.AT_MOST;
heightMeasureSpecSize = measuredHeight - childBottomMargin - childTopMargin;
} else {
heightMeasureSpecMode = MeasureSpec.EXACTLY;
heightMeasureSpecSize = layoutParams.height;
}
}
measureChild(child, MeasureSpec.makeMeasureSpec(widthMeasureSpecSize, widthMeasureSpecMode), MeasureSpec.makeMeasureSpec(heightMeasureSpecSize, heightMeasureSpecMode));
int parentWidthMeasureSpec = MeasureSpec.getMode(widthMeasureSpec);
int parentHeightMeasureSpec = MeasureSpec.getMode(heightMeasureSpec);
int height = measuredHeight;
int width = measuredWidth;
int childHeight = child.getMeasuredHeight();
int childWidth = child.getMeasuredWidth();
if (parentHeightMeasureSpec == MeasureSpec.AT_MOST) {
height = childHeight + childTopMargin + childBottomMargin;
}
if (parentWidthMeasureSpec == MeasureSpec.AT_MOST) {
width = childWidth + childRightMargin + childLeftMargin;
}
if (width < childWidth + 2 * deltaLength) {
width = (int) (childWidth + 2 * deltaLength);
}
if (height < childHeight + 2 * deltaLength) {
height = (int) (childHeight + 2 * deltaLength);
}
if (height != measuredHeight || width != measuredWidth) {
setMeasuredDimension(width, height);
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
View child = getChildAt(0);
int measuredWidth = getMeasuredWidth();
int measuredHeight = getMeasuredHeight();
int childMeasureWidth = child.getMeasuredWidth();
int childMeasureHeight = child.getMeasuredHeight();
child.layout((measuredWidth - childMeasureWidth) / 2, (measuredHeight - childMeasureHeight) / 2, (measuredWidth + childMeasureWidth) / 2, (measuredHeight + childMeasureHeight) / 2);
}
@Override
protected ViewGroup.LayoutParams generateDefaultLayoutParams() {
return new MarginLayoutParams(MarginLayoutParams.WRAP_CONTENT, MarginLayoutParams.WRAP_CONTENT);
}
@Override
protected ViewGroup.LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
return new MarginLayoutParams(p);
}
@Override
public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
public void setDrawShadow(boolean drawShadow) {
if (this.drawShadow == drawShadow) {
return;
}
this.drawShadow = drawShadow;
postInvalidate();
}
}（2）自定义属性，在res--values--attrs.xml中添加如下内容：
<declare-styleable name="ShadowContainer">
<attr name="containerShadowColor" format="color" /><!--阴影颜色-->
<attr name="containerShadowRadius" format="dimension" /><!--阴影半径-->
<attr name="containerDeltaLength" format="dimension" /><!--子View到ShadowContainer的距离-->
<attr name="containerCornerRadius" format="dimension" /><!--子View背景的圆角大小-->
<attr name="deltaX" format="dimension" />
<attr name="deltaY" format="dimension" />
<attr name="enable" format="boolean" />
</declare-styleable>（3）layout中使用：
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="100dp"
android:gravity="center"
android:orientation="vertical"
tools:ignore="RtlCompat">
<com.tcl.uicompat.TCLTextView
style="@style/TextBody3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="自定义ViewGroup实现"
android:textColor="#FF000000"
tools:ignore="HardcodedText" />
<com.tcl.uicompat.util.ShadowContainer
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50px"
app:containerCornerRadius="8px"
app:containerDeltaLength="20px"
app:containerShadowColor="#ff808080"
app:containerShadowRadius="20px"
tools:ignore="PxUsage,RtlHardcoded">
<View
android:layout_width="354px"
android:layout_height="100px"
android:background="@drawable/shadow_background_1"
tools:ignore="PxUsage,RtlHardcoded"
tools:targetApi="lollipop" />
</com.tcl.uicompat.util.ShadowContainer>
<com.tcl.uicompat.TCLTextView
style="@style/TextBody3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100px"
android:text="向左向下偏移5px，颜色变为红色"
android:textColor="#FF000000"
tools:ignore="HardcodedText,PxUsage" />
<com.tcl.uicompat.util.ShadowContainer
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50px"
app:containerCornerRadius="8px"
app:containerDeltaLength="20px"
app:containerShadowColor="#ff800000"
app:containerShadowRadius="20px"
app:deltaX="-5px"
app:deltaY="5px"
tools:ignore="PxUsage,RtlHardcoded">
<View
android:layout_width="354px"
android:layout_height="100px"
android:background="@drawable/shadow_background_1"
tools:ignore="PxUsage,RtlHardcoded"
tools:targetApi="lollipop" />
</com.tcl.uicompat.util.ShadowContainer>
</LinearLayout>（4）特别注意：
- setLayerType开启了软解，通过bitmap缓存阴影，会耗内存，已在代码中注释。
- 使用的时候，被包裹的View不能有透明度，否则阴影会被显示出来。——这是个坑，需注意。
总结
总的来说，5种方式各有利弊，最推荐的还是Android原生的Z轴实现。
随着Android的发展，各种需求越来越多，我们在解决问题的同时需要知道别人解决此问题的原理，这样才能触类旁通。——硬性总结一把……^ - ^
附件：三种效果图对比
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
