论如何在Android中还原设计稿中的阴影
每当设计稿上注明需要添加阴影时，Android上总是显得比较棘手，因为Android的阴影实现方式与Web和iOS有所区别。
一般来说阴影通常格式是有：
X: 在X轴的偏移度
Y: 在Y轴偏移度
Blur: 阴影的模糊半径
Color: 阴影的颜色
何为阴影
但是在Android中却比较单一，只有一个度量单位：Elevation，作为在Android5.0的material2引入的概念，用一个图来形象的描绘一下，其实本质上就是虚拟的Z轴坐标。
那好，高度差有了，还差个光源，这样才能形成阴影，在material2中，光源不是单一的位于屏幕正上方的，而且有两组光源，分为主光源（Key light）和环境光源（Ambient light）如下图所示：
最终形成的效果是一种复合光源下更自然的阴影。
其中环境光源，在屏幕空间中没有实际的位置，但是主光源是有实际的位置的，具体的参数见：
frameworks/base/core/res/res/values/dimens.xml - Android Code Search
好，既然知道了阴影本身的机制，那下一步现在则是如何自定义控制阴影，这也是本文的目的。
从SDK 21开始，提供了Elevation可以实现类似于阴影的模糊半径的效果，但是毕竟尺度过于单一，往往有时候无法满足所需的效果，所以，还需要控制阴影的颜色。
在SDK 28之后，可以通过outlineSpotShadowColor和outlineAmbientShadowColor来分别设置Key light和Ambient light投射的阴影颜色，但是说实话，这两个属性基本用不到或者说比较鸡肋。
不过这里引入了一个概念：Outline。
四种常见方案
Elevation + Outline
Outline其实是View的边框（轮廓），通过OutlineProvider可以自定义一个View的Outline从而影响View本身在elevation下的投影，比如定义以实现一个圆角ImageView为例：
<ImageView
android:id="@+id/image"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@color/material_dynamic_primary90" />
image.clipToOutline = true
image.outlineProvider = object : ViewOutlineProvider() {
override fun getOutline(view: View?, outline: Outline?) {
view ?: return
outline?.setRoundRect(0, 0, view.width, view.height, 32f)
}
}
效果基本没啥问题：
同样的，既然View的轮廓变化了，阴影自然也会跟着随之变化，所以outline也可以改变阴影：
image.elevation = 32f
image.outlineAmbientShadowColor = Color.RED
image.outlineSpotShadowColor = Color.BLUE
image.clipToOutline = true
image.outlineProvider = object : ViewOutlineProvider() {
override fun getOutline(view: View?, outline: Outline?) {
view ?: return
outline?.setRoundRect(0, 0, view.width, view.height, 32f)
}
}
效果如下：（不过outlineAmbientShadowColor和outlineSpotShadowColor仅支持SDK 28及以上）
通常，到这一步通过调整elevation的数值和outline以及高版本可用的shadowColor大体上可以满足设计师的阴影需求。
而且通常来说shadowColor都是Color.Black以及alpha的区别，所以你也可以这样：
outlineProvider = object : ViewOutlineProvider() {
override fun getOutline(view: View?, outline: Outline?) {
view ?: return
outline?.alpha = 0.5f
outline?.setRoundRect(0, 0, view.width, view.height, 32f)
}
}
但是，还记着前面提到的两个光源吗？其中有一个光源是位于屏幕斜上方的，这就带来了另外一个问题，同一个View设置相同的Elevation在不同的Y轴坐标它的阴影效果是不一样的，如下图所示：
总之，阴影的Blur和Color参数勉强是可以得到满足的。
优点：原生的阴影效果
缺点：设置阴影的颜色需要SDK>=28，需要配合使用outline来实现对阴影的轮廓控制
下面我们先来引申一下Android中了解过的阴影实现方式。
LayerDrawable
我相信大家肯定见过这种实现方式，通过绘制一层层渐变色来模拟阴影，其实官方也有通过该方式实现的阴影:MaterialShapeDrawable，示例如下：
val drawable = MaterialShapeDrawable(
ShapeAppearanceModel.builder()
.setAllCornerSizes(16.dp)
.build()
)
drawable.fillColor = ColorStateList.valueOf(getColor(com.google.android.material.R.color.material_dynamic_primary90))
drawable.setShadowColor(Color.RED)
drawable.shadowVerticalOffset = 8.dp.toInt()
drawable.elevation = 32f
drawable.shadowCompatibilityMode = MaterialShapeDrawable.SHADOW_COMPAT_MODE_ALWAYS
image.background = drawable
效果如图：
只能说很一般，毕竟是模拟的阴影模糊效果，而且目前只支持Y轴的offset。
优点：几乎是开箱即用的Drawable且自带圆角
缺点：模拟的阴影效果，展示效果不够精细且效率不高
NinePatchDrawable
说实话想在Android上实现一个简单的阴影太折腾了，什么奇怪的技巧都来了，比如.9图，至于什么是.9图这里便不再过多介绍。
通过这个网站：Android Shadow Generator (inloop.github.io)
你可以直接生成一个CSS Style的阴影效果，几乎可以完美还原Figma的阴影效果，效果如下：
其实还是很还原的，但是它有一个致命的缺点，就是圆角，因为是一张图片，所以圆角的单位本质上是px而非Android上的dp，如果你需要一个带圆角弧度的阴影是达不到预期的。
优点：参数完全可控的阴影，可以做到1:1还原设计稿
缺点：因为是图片，所以阴影的圆角无法跟随像素密度缩放（非常致命的缺点）
Paint.setShadowLayer/BlurMaskFilter
这两个我之所以放在一起本质上是因为实现起来都是类似的，
如：
paint.setShadowLayer(radius, offsetX, offsetY, shadowColor)
// 或者使用maskFilter然后通过paint.color以及绘制的区域进行offset来变相控制阴影的Color及offset
paint.maskFilter = BlurMaskFilter(field, BlurMaskFilter.Blur.NORMAL)
相比之下更推荐使用setShadowLayer，最终效果如下，基本上没啥问题：
但是值得注意的是，其绘制的阴影本质上等价于BlurMaskFilter，是占位的，而且是需要留出空间来展示的，所以必要时需要对父布局设置android:clipChildren="false"或者预留出足够的空间。
优点：
1. 参数完全可控的阴影，可以做到1:1还原设计稿
2. 参数的自定义程度及可控性强
缺点：
1. 阴影占位，需要通过clipChildren=false来或者预留空间规避
2. 需要自定义View或者Drawable，写起来较为麻烦。
总的来说，上面介绍了4种可能常见的阴影实现方式，其中按我的经验来说，较为推荐采用Outline或者setShadowLayer的方式来实现，如果可以的话原生Elevation配合Outline基本可以满足大部分需求场景。
当然还有部分实现方式比如用RenderScriptBlur等等，我没提是因为是前几种方式较为复杂，性价比不高。
Paint.setShadowLayer 扩展内容
下面则重点讲一下Paint.setShadowLayer/BlurMaskFilter这种方式，为什么说这两种方式实现的阴影都是一致的呢？这个就需要深入到C++层。
首先直接跳到paint.setShadowLayer的native实现类：
frameworks/base/libs/hwui/jni/Paint.cpp
Paint.cpp - Android Code Search
static void setShadowLayer(CRITICAL_JNI_PARAMS_COMMA jlong paintHandle, jfloat radius,
jfloat dx, jfloat dy, jlong colorSpaceHandle,
jlong colorLong) {
SkColor4f color = GraphicsJNI::convertColorLong(colorLong);
sk_sp cs = GraphicsJNI::getNativeColorSpace(colorSpaceHandle);
Paint* paint = reinterpret_cast(paintHandle);
if (radius <= 0) {
paint->setLooper(nullptr);
}
else {
SkScalar sigma = android::uirenderer::Blur::convertRadiusToSigma(radius);
paint->setLooper(BlurDrawLooper::Make(color, cs.get(), sigma, {dx, dy}));
}
}
里面将我们传入的阴影radius参数转为Sigma并创建了BlurDrawLooper，我们来看看其实现
#include "BlurDrawLooper.h"
#include
namespace android {
BlurDrawLooper::BlurDrawLooper(SkColor4f color, float blurSigma, SkPoint offset)
: mColor(color), mBlurSigma(blurSigma), mOffset(offset) {}
BlurDrawLooper::~BlurDrawLooper() = default;
SkPoint BlurDrawLooper::apply(Paint* paint) const {
paint->setColor(mColor);
if (mBlurSigma > 0) {
paint->setMaskFilter(SkMaskFilter::MakeBlur(kNormal_SkBlurStyle, mBlurSigma, true));
}
return mOffset;
}
sk_sp BlurDrawLooper::Make(SkColor4f color, SkColorSpace* cs, float blurSigma,
SkPoint offset) {
if (cs) {
SkPaint tmp;
tmp.setColor(color, cs); // converts color to sRGB
color = tmp.getColor4f();
}
return sk_sp(new BlurDrawLooper(color, blurSigma, offset));
}
} // namespace android
内容不多，可以看到本质上还是利用了setMaskFilter来实现的。
然后还剩下一个点就是通过SkMaskFilter::MakeBlur生成的模糊是占位的，如果能知道模糊具体需要多大的空间，就可以方便的进行预留以免实际展示时阴影被裁剪。
MakeBlur最终返回的是一个SkBlurMaskFilterImpl对象，我们可以先看一下其父类SkMaskFilterBase的虚函数：重点关注computeFastBounds函数
SkMaskFilterBase.h - Android Code Search
/**
* The fast bounds function is used to enable the paint to be culled early
* in the drawing pipeline. This function accepts the current bounds of the
* paint as its src param and the filter adjust those bounds using its
* current mask and returns the result using the dest param. Callers are
* allowed to provide the same struct for both src and dest so each
* implementation must accommodate that behavior.
*
* The default impl calls filterMask with the src mask having no image,
* but subclasses may override this if they can compute the rect faster.
*/
virtual void computeFastBounds(const SkRect& src, SkRect* dest) const;
可以看到该函数的作用便是计算MaskFiter的bounds，看一下子类的SkBlurMaskFilterImpl的实现
void SkBlurMaskFilterImpl::computeFastBounds(const SkRect& src,
SkRect* dst) const {
// TODO: if we're doing kInner blur, should we return a different outset?
// i.e. pad == 0 ?
SkScalar pad = 3.0f * fSigma;
dst->setLTRB(src.fLeft - pad, src.fTop - pad,
src.fRight + pad, src.fBottom + pad);
}
其中fSigme便是最开始通过convertRadiusToSigma(radius)获取到的返回值，其计算方式如下：
SkBlurMask.cpp - Android Code Search
// This constant approximates the scaling done in the software path's
// "high quality" mode, in SkBlurMask::Blur() (1 / sqrt(3)).
// IMHO, it actually should be 1: we blur "less" than we should do
// according to the CSS and canvas specs, simply because Safari does the same.
// Firefox used to do the same too, until 4.0 where they fixed it. So at some
// point we should probably get rid of these scaling constants and rebaseline
// all the blur tests.
static const SkScalar kBLUR_SIGMA_SCALE = 0.57735f;
SkScalar SkBlurMask::ConvertRadiusToSigma(SkScalar radius) {
return radius > 0 ? kBLUR_SIGMA_SCALE * radius + 0.5f : 0.0f;
}
这样，我们可以得到一个模糊的近似Bound，虽然不是一个准确的值但是至少可以保证绘制的阴影不会被裁剪。
当然，如果无法预留Padding也可以通过clipChildren=false来实现。
总结
最后我也是针对setShadowLayer提供了一个自定义View的实现方式：
Lowae/Shadows: A simple and customizable library on Android to implement CSS style shadows (github.com)
感兴趣的可以尝试使用，有任何兼容性问题欢迎提issue~
（我十分清楚会有很多兼容性问题，没办法，这种Api就是这样，不，准确来说，Android就是这样）
所以，想在Android上1:1还原设计稿上的阴影是比较困难的，但是如果不去追求参数的还原只是寻求视觉的略显一致，那还是可以做到的，简单点的通过第一种方式(Elevation + Outline)，如果设置到阴影颜色或者offset这种便可以尝试最后一种方式(setShadowLayer)。