【CustomView】Android阴影的实现方式（ShadowLayer）

### android系统默认的阴影，对于阴影详细的说明，请参阅： 3D 空间中的对象

如果系统默认的阴影不满足设计的效果，我们需要手动实现：

大致有以下几种方式：

1. 系统默认的阴影：

android:elevation="2dp"  // 给View设置高度

简单，样式系统自带，但不能设置阴影方向和颜色

 

2. .9-patch文件，这也是比较方便的实现方式：

相对简单，可以由设计提供，整个应用中可以和设计稿完美契合

 

3. 使用layer-list实现阴影：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="0dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/shadow_color_shadow" />
            <corners android:radius="@dimen/dp_35" />
        </shape>
    </item>

    <item
        android:bottom="@dimen/dp_2"
        android:right="@dimen/dp_2">
        <shape android:shape="rectangle">
            <solid android:color="@color/shadow_color_shadow" />
            <corners android:radius="@dimen/dp_35" />
        </shape>
    </item>

    <item
        android:bottom="@dimen/dp_3"
        android:right="@dimen/dp_3">
        <shape android:shape="rectangle">
            <corners android:radius="@dimen/dp_35" />
            <solid android:color="@color/primary_purple" />
        </shape>
    </item>
</layer-list>

对于阴影的准确效果有点差强人意吧，毕竟是由一层一层堆叠起来的

 

4. 使用setShadowLayer()实现阴影：（也是这篇最主要写的）

setLayerType(LAYER_TYPE_SOFTWARE, null) // 在运行时为单个视图禁用硬件加速

paint.setShadowLayer(
            innerShadowBlur,
            innerShadowX,
            innerShadowY,
            resources.getColor(R.color.bg_shadows_color)
        )

canvas.drawRoundRect(
            frame,
            innerCornerRadius,
            innerCornerRadius,
            paint
        )

完全自定义，可以根据View自身的需求来设置阴影的颜色和形状，实现起来比较耗时且对单独的View在运行时阶段禁用硬件加速

*** 以上是主要的方法，这里贴上示例代码，自定义ShadowLayerTextView实现阴影效果：

class ShadowLayerTextView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = -1
) : androidx.appcompat.widget.AppCompatTextView(context, attrs, defStyleAttr) {

    private val innerShadowX: Float
    private val innerShadowY: Float
    private val innerShadowBlur: Float
    private val innerCornerRadius: Float

    private val innerPaddingX: Float
    private val innerPaddingY: Float

    private val paint by lazy {
        Paint().apply {
            style = Paint.Style.FILL
            strokeCap = Paint.Cap.ROUND
            isAntiAlias = true
        }
    }

    private val frame by lazy {
        RectF(0f, 0f, 0f, 0f)
    }

    init {
        setLayerType(LAYER_TYPE_SOFTWARE, null) // 在运行时为单个视图禁用硬件加速

        val attributes = context.obtainStyledAttributes(attrs, R.styleable.ShadowLayerView, 0, 0)
        val innerBackgroundColor = attributes.getResourceId(
            R.styleable.ShadowLayerView_innerBackgroundColor,
            R.color.colorPrimary
        )
        innerCornerRadius = attributes.getDimension(
            R.styleable.ShadowLayerView_innerCornerRadius,
            30.toDp()
        )
        innerShadowX = attributes.getDimension(
            R.styleable.ShadowLayerView_innerShadowX,
            2.toDp()
        )
        innerShadowY = attributes.getDimension(
            R.styleable.ShadowLayerView_innerShadowY,
            2.toDp()
        )
        innerShadowBlur = attributes.getDimension(
            R.styleable.ShadowLayerView_innerShadowBlur,
            4.toDp()
        )
        attributes.recycle()

        setInnerBackgroundColor(innerBackgroundColor)

        // 因为有额外的阴影，会影响居中的效果
        innerPaddingX = innerShadowX * 2
        innerPaddingY = innerShadowY * 2
        setPadding(
            paddingLeft + innerPaddingX.toInt(),
            paddingTop,
            paddingRight,
            paddingBottom + innerPaddingY.toInt()
        )
    }

    private fun setInnerBackgroundColor(color: Int) {
        paint.setShadowLayer(
            innerShadowBlur,
            innerShadowX,
            innerShadowY,
            if (color == R.color.transparent) {
                resources.getColor(R.color.transparent)
            } else {
                resources.getColor(R.color.bg_shadows_color)
            }
        )
        paint.color = resources.getColor(color)

        paint.setShadowLayer(
            innerShadowBlur,
            innerShadowX,
            innerShadowY,
            resources.getColor(R.color.bg_shadows_color)
        )
    }

    override fun onDraw(canvas: Canvas) {
        frame.right = canvas.width - innerPaddingX
        frame.bottom = canvas.height - innerPaddingY
        canvas.drawRoundRect(
            frame,
            innerCornerRadius,
            innerCornerRadius,
            paint
        )//需要在绘制TextView之前绘制阴影
        super.onDraw(canvas)
    }
}

 R.styleable.ShadowLayerView 文件：(ShadowLayerView.xml)

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <color name="bg_shadows_color">#331e051f</color>  // View阴影颜色

    <declare-styleable name="ShadowLayerView">
        <attr name="innerBackgroundColor" format="color" />  // View背景色
        <attr name="innerCornerRadius" format="dimension" /> // View圆角
        <attr name="innerShadowX" format="dimension" />      // View阴影的X偏移量 
        <attr name="innerShadowY" format="dimension" />      // View阴影的Y偏移量 
        <attr name="innerShadowBlur" format="dimension" />   // View阴影模糊半径 
    </declare-styleable>

示例使用：

<com.finn.materialcomponents.view.ShadowLayerTextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:textColor="@color/colorWhite"
        android:textSize="16sp"
        android:gravity="center"
        android:layout_marginTop="34dp"
        android:layout_marginStart="50dp"
        android:paddingHorizontal="30dp"
        android:text="show shadow"
        app:innerBackgroundColor="@color/colorPrimary"
        app:innerCornerRadius="8dp"
        app:innerShadowX="2dp"
        app:innerShadowBlur="4dp"
        />

 阴影效果：

 

cc：关于阴影投影的方向也是比较有意思，因为Android的阴影模拟的是灯光打向屏幕，而最明显的就是位于屏幕左上侧和屏幕右下侧，投影方向会不一样的（这里以最明显的视觉效果举例）。

 

>>>>>>>>>>>
🌟 某些情况下，系统默认的阴影效果有时候不能满足设计需要的阴影效果，这也是比较头疼的地方，我们需要对不同的需求，用不同的方案来实现。