Android平台如何为透明ImageView添加与TextView一致的阴影效果

原生ImageView没有提供类似TextView的shadow系列XML属性，可根据你的技术栈选择对应实现方案：

传统View体系实现 #

方案1：自定义ImageView（效果和TextView阴影完全一致） #

核心通过BlurMaskFilter模拟阴影效果，注意必须关闭硬件加速才能生效：

1. 首先在res/values/attrs.xml中添加自定义属性：

<declare-styleable name="ShadowImageView">
    <attr name="shadowRadius" format="dimension"/>
    <attr name="shadowColor" format="color"/>
</declare-styleable>

2. 自定义ShadowImageView实现类：

class ShadowImageView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : AppCompatImageView(context, attrs, defStyleAttr) {
    private val shadowPaint = Paint(Paint.ANTI_ALIAS_FLAG)
    private var shadowRadius = 0f
    private var shadowColor = Color.TRANSPARENT

    init {
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.ShadowImageView)
        shadowRadius = typedArray.getDimension(R.styleable.ShadowImageView_shadowRadius, 0f)
        shadowColor = typedArray.getColor(R.styleable.ShadowImageView_shadowColor, Color.TRANSPARENT)
        typedArray.recycle()

        if (shadowRadius > 0) {
            // 必须关闭硬件加速，BlurMaskFilter才能生效
            setLayerType(LAYER_TYPE_SOFTWARE, null)
            shadowPaint.maskFilter = BlurMaskFilter(shadowRadius, BlurMaskFilter.Blur.NORMAL)
        }
    }

    override fun onDraw(canvas: Canvas) {
        // 先绘制阴影层
        shadowPaint.colorFilter = PorterDuffColorFilter(shadowColor, PorterDuff.Mode.SRC_IN)
        canvas.drawBitmap(drawable.toBitmap(), paddingLeft.toFloat(), paddingTop.toFloat(), shadowPaint)
        // 再绘制原始图标
        super.onDraw(canvas)
    }
}

3. 在XML中直接使用即可：

<com.yourpackage.ShadowImageView
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:src="@drawable/ic_arrow"
    app:shadowRadius="15dp"
    app:shadowColor="@color/textShadowColor"/>

方案2：CardView快速包裹（适合要求不高的场景） #

不想自定义View的话，直接用CardView包裹ImageView即可快速实现阴影：

<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardElevation="10dp"
    app:cardBackgroundColor="@android:color/transparent"
    app:cardCornerRadius="0dp">
    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_arrow"/>
</androidx.cardview.widget.CardView>

补充方案 #

如果你的箭头是矢量图标，也可以直接在矢量drawable的根节点添加android:shadowColor、android:shadowRadius属性，Android 9及以上系统支持直接渲染对应阴影。

Jetpack Compose实现 #

Compose的实现逻辑和iOS完全一致，直接调用shadow修饰符即可：

Row(Modifier.padding(16.dp)) {
    Image(
        painter = painterResource(id = R.drawable.ic_arrow),
        contentDescription = "箭头",
        modifier = Modifier
            .size(24.dp)
            .shadow(
                radius = 15.dp,
                color = colorResource(id = R.color.textShadowColor),
                offset = Offset(0f, 0f)
            )
    )
    Spacer(Modifier.width(8.dp))
    Text(
        text = "my text",
        modifier = Modifier.shadow(
            radius = 15.dp,
            color = colorResource(id = R.color.textShadowColor),
            offset = Offset(0f, 0f)
        )
    )
}

内容的提问来源于stack exchange，提问作者Gonki