Android Studio中如何实现模糊效果、文字边缘发光及图片卡片边框效果？

一、实现模糊效果 #

1. Android 12+ 原生快速实现（推荐） #

如果应用最低API级别是31（Android 12），直接用系统API就能给View加模糊背景：

// 代码中设置
yourView.background = getDrawable(R.drawable.your_background)
yourView.setBackgroundBlurRadius(20f) // 数值越大模糊程度越高

或者XML配置：

<View
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/your_bg"
    android:backgroundBlurRadius="20dp" />

2. 兼容低版本：RenderScript实现模糊 #

针对Android 12以下版本，用RenderScript处理图片模糊：

fun blurBitmap(bitmap: Bitmap, context: Context, radius: Float): Bitmap {
    val renderScript = RenderScript.create(context)
    val input = Allocation.createFromBitmap(renderScript, bitmap)
    val output = Allocation.createTyped(renderScript, input.type)
    val script = ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript))
    script.setInput(input)
    script.setRadius(radius)
    script.forEach(output)
    output.copyTo(bitmap)
    renderScript.destroy()
    return bitmap
}

调用时传入目标图片，得到模糊后的Bitmap再设置给View即可。

二、文字边缘发光效果 #

1. 简单实现：TextView阴影属性 #

直接在XML或代码中设置shadowLayer：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="发光文字"
    android:textSize="24sp"
    android:textColor="#ffffff"
    android:shadowColor="#ff00ff"
    android:shadowDx="0"
    android:shadowDy="0"
    android:shadowRadius="10" /> <!-- 半径越大，发光范围越广 -->

代码中设置：

textView.setShadowLayer(10f, 0f, 0f, Color.parseColor("#ff00ff"))

2. 自定义Shader实现细腻发光 #

如果需要多层发光等复杂效果，自定义TextView：

class GlowTextView(context: Context, attrs: AttributeSet?) : AppCompatTextView(context, attrs) {
    override fun onDraw(canvas: Canvas?) {
        val paint = paint
        // 先绘制发光层
        paint.maskFilter = BlurMaskFilter(15f, BlurMaskFilter.Blur.OUTER)
        setTextColor(Color.parseColor("#ff00ff"))
        super.onDraw(canvas)
        // 再绘制原文字
        paint.maskFilter = null
        setTextColor(Color.parseColor("#ffffff"))
        super.onDraw(canvas)
    }
}

XML中直接使用这个自定义View即可。

三、图片卡片的边框+发光效果 #

方法1：LayerDrawable叠加发光层与边框层 #

创建三个Drawable文件：

1. card_glow.xml（发光层）：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ff00ff" />
    <corners android:radius="16dp" />
</shape>

2. card_border.xml（边框层）：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="2dp" android:color="#ffffff" />
    <solid android:color="@android:color/transparent" />
    <corners android:radius="16dp" />
</shape>

3. card_combined.xml（组合层）：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 发光层，通过padding实现向外扩散效果 -->
    <item android:drawable="@drawable/card_glow" android:left="8dp" android:top="8dp" android:right="8dp" android:bottom="8dp"/>
    <!-- 图片裁剪层，保证图片圆角与卡片一致 -->
    <item>
        <shape>
            <corners android:radius="16dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <!-- 边框层 -->
    <item android:drawable="@drawable/card_border" />
</layer-list>

将组合Drawable设为ImageView背景，同时设置图片和padding：

<ImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:src="@drawable/your_card_image"
    android:background="@drawable/card_combined"
    android:padding="8dp"
    android:scaleType="centerCrop" />

方法2：Android 12+ OutlineProvider实现发光 #

Android 12+可直接给View设置发光轮廓：

val imageView = findViewById<ImageView>(R.id.card_image)
imageView.outlineProvider = object : ViewOutlineProvider() {
    override fun getOutline(view: View?, outline: Outline?) {
        outline?.setRoundRect(0, 0, view!!.width, view.height, 16f) // 圆角半径
    }
}
imageView.clipToOutline = true
imageView.outlineAmbientShadowColor = Color.parseColor("#ff00ff") // 环境光阴影色
imageView.outlineSpotShadowColor = Color.parseColor("#ff00ff") // 点光源阴影色
imageView.elevation = 20f // 阴影高度，影响发光范围

同时给ImageView加边框，只需用带stroke的shape作为背景即可。

内容的提问来源于stack exchange，提问作者SERGIO LUIS MOSTACERO VILLAFAN