如何实现类似指定网站的TextView霓虹效果？现有代码效果不佳求优化

你的当前代码仅使用原生shadow属性，这种方式的发光效果单一，很难还原专业霓虹招牌的层次感和通透感。以下是几个针对性的优化方案：

1. 用LayerDrawable实现多层渐变发光 #

原生shadow只能添加一层阴影，而霓虹效果需要由内到外的渐变发光。可以通过LayerDrawable叠加多层模糊效果来模拟：

首先在res/drawable下创建neon_text_bg.xml：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 最外层弱发光 -->
    <item>
        <shape>
            <solid android:color="#FF3333" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    <item android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp">
        <shape>
            <solid android:color="#FF5555" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    <!-- 内层强发光 -->
    <item android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp">
        <shape>
            <solid android:color="#FF7777" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    <!-- 文字载体层 -->
    <item android:bottom="6dp" android:left="6dp" android:right="6dp" android:top="6dp">
        <shape>
            <solid android:color="#FFF0F0" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

然后修改TextView的背景和文字颜色：

<TextView
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="20dp"
    android:background="@drawable/neon_text_bg"
    android:text="@string/app_name"
    android:textColor="#FF2222"
    android:textSize="40sp"
    android:textStyle="bold" />

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

如果需要更贴近霓虹的通透发光效果，可以自定义View，通过BlurMaskFilter和RadialGradient实现：

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

    private val glowPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.parseColor("#FF3333")
        maskFilter = BlurMaskFilter(20f, BlurMaskFilter.Blur.OUTER)
    }

    override fun onDraw(canvas: Canvas?) {
        // 先绘制发光层
        canvas?.drawText(text.toString(), 0f, baseline.toFloat(), glowPaint)
        // 再绘制原文字
        super.onDraw(canvas)
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        glowPaint.shader = RadialGradient(
            width/2f, height/2f, width/2f,
            Color.parseColor("#FF3333"),
            Color.TRANSPARENT,
            Shader.TileMode.CLAMP
        )
    }
}

布局中直接使用这个自定义View：

<com.yourpackage.NeonTextView
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="15dp"
    android:text="@string/app_name"
    android:textColor="#FFF0F0"
    android:textSize="40sp"
    android:textStyle="bold" />

3. 细节调整增强质感 #

• 颜色选择：文字颜色避免纯白，改用带荧光感的浅色调（如#FFF0F0），发光颜色用高饱和的霓虹色（如#FF2222）；
• 字体选择：使用粗体无衬线字体（如android:fontFamily="sans-serif-black"），强化霓虹招牌的硬朗感；
• 半径优化：如果坚持用原生shadow，把shadowRadius降到15-20dp，同时添加android:shadowAlpha="0.8"（API 28+）提升通透感，避免模糊过度。

4. 可选：添加动态闪烁效果 #

用ValueAnimator实现发光强度的动态变化，模拟霓虹灯管的闪烁：

val animator = ValueAnimator.ofFloat(0.5f, 1f).apply {
    duration = 1500
    repeatMode = ValueAnimator.REVERSE
    repeatCount = ValueAnimator.INFINITE
    addUpdateListener {
        glowPaint.alpha = (it.animatedValue as Float * 255).toInt()
        tv.invalidate()
    }
}
animator.start()

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