【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的陰影模擬的是燈光打向螢屏，而最明顯的就是位于螢屏左上側和螢屏右下側，投影方向會不一樣的（這里以最明顯的視覺顯示），

就是系統默認的陰影效果有時候不能滿足設計需要的陰影效果可能，比較頭疼的地方，對于不同的需求，用不同的方案來實作，