如何为Kotlin应用中的TextView实现发光效果

1. 基础阴影实现（快速简单） #

利用TextView自带的setShadowLayer方法，适合快速实现单色发光效果，调整参数即可匹配需求：

// 在Activity/Fragment中直接设置
yourTextView.setShadowLayer(
    15f, // 模糊半径，值越大发光范围越广
    0f,  // X轴偏移量，设0则发光均匀分布在文本周围
    0f,  // Y轴偏移量，同理设0为对称发光
    Color.parseColor("#FF6B81") // 发光颜色，替换为你需要的色彩
)

如果需要更柔和的层次感，这种方式无法实现多阴影，需要用自定义View补充。

2. 自定义View实现多层彩色发光 #

要实现图片里的渐变发光效果，可以自定义TextView，通过多层模糊文本叠加模拟发光层次：

class GlowTextView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : AppCompatTextView(context, attrs, defStyleAttr) {

    // 自定义发光颜色渐变列表
    private val glowColors = listOf(
        Color.parseColor("#FF6B81"),
        Color.parseColor("#FF8C61"),
        Color.parseColor("#FFD966")
    )
    private val baseGlowRadius = 20f

    override fun onDraw(canvas: Canvas) {
        // 先绘制多层模糊发光层，从外层到内层依次缩小模糊半径
        glowColors.forEachIndexed { index, color ->
            paint.color = color
            paint.maskFilter = BlurMaskFilter(
                baseGlowRadius * (1 - index * 0.3f), 
                BlurMaskFilter.Blur.OUTER
            )
            canvas.drawText(text.toString(), 0f, baseline.toFloat(), paint)
        }
        // 恢复画笔状态，绘制原文本
        paint.color = currentTextColor
        paint.maskFilter = null
        super.onDraw(canvas)
    }
}

布局中直接引用这个自定义View即可，可灵活调整颜色列表和模糊半径比例，适配不同发光效果。

3. 渐变Shader实现彩色发光 #

如果想要发光颜色是平滑渐变的，可配合Shader和模糊滤镜实现：

class GradientGlowTextView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : AppCompatTextView(context, attrs, defStyleAttr) {

    private val glowRadius = 18f
    private lateinit var gradientShader: Shader

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        // 创建横向渐变Shader，可改为径向渐变适配不同需求
        gradientShader = LinearGradient(
            0f, 0f, width.toFloat(), 0f,
            intArrayOf(Color.parseColor("#FF6B81"), Color.parseColor("#FFD966")),
            null,
            Shader.TileMode.CLAMP
        )
    }

    override fun onDraw(canvas: Canvas) {
        // 绘制渐变发光层
        paint.shader = gradientShader
        paint.maskFilter = BlurMaskFilter(glowRadius, BlurMaskFilter.Blur.NORMAL)
        canvas.drawText(text.toString(), 0f, baseline.toFloat(), paint)
        // 绘制原文本
        paint.shader = null
        paint.maskFilter = null
        paint.color = currentTextColor
        super.onDraw(canvas)
    }
}

注意事项 #

• 模糊半径不宜过大，否则会增加绘制开销，列表中使用建议添加缓存优化；
• 若用Jetpack Compose开发，可通过drawBehind先绘制带BlurEffect的文本作为发光层，再绘制原文本，思路和自定义View一致。

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