如何通过编程方式为Android TextView字符串添加CSS样式

原生Android的TextView控件不支持直接解析完整Web端CSS规则，尤其是CSS动画属性，你可以根据使用场景选择以下两种实现方案：

方案一：WebView加载HTML+CSS（1:1还原CSS效果） #

如果你的文本内容本身是富文本/HTML格式，直接用WebView包裹对应CSS代码加载即可，完全复用你提供的发光样式，不需要额外写原生逻辑：

// 拼接完整HTML内容，直接嵌入提供的CSS代码
String glowHtml = "<!DOCTYPE html>\n" +
        "<html>\n" +
        "<head>\n" +
        "<meta charset=\"utf-8\">\n" +
        "<style>\n" +
        "body{background:#000;margin:0;padding:0;}\n" +
        ".glow {   \n" +
        "  font-size: 80px;   \n" +
        "  color: #fff;   \n" +
        "  text-align: center;\n" +
        "  -webkit-animation: glow 1s ease-in-out infinite alternate;  \n" +
        "  -moz-animation: glow 1s ease-in-out infinite alternate;   \n" +
        "  animation: glow 1s ease-in-out infinite alternate; \n" +
        "}\n" +
        "@-webkit-keyframes glow {   \n" +
        "  from {\n" +
        "    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;  \n" +
        "  }\n" +
        "  to {\n" +
        "    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6; \n" +
        "  } \n" +
        "}\n" +
        "</style>\n" +
        "</head>\n" +
        "<body>\n" +
        "<p class=\"glow\">这里替换成你要显示的文字</p>\n" +
        "</body>\n" +
        "</html>";

// 初始化WebView加载内容
WebView webView = findViewById(R.id.web_view);
webView.setBackgroundColor(Color.BLACK);
// 关闭硬件加速避免渲染异常
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
webView.loadDataWithBaseURL(null, glowHtml, "text/html", "utf-8", null);

• 适配注意点：WebView默认背景是透明的，记得把背景设置成深色才能看清白色发光文字效果
• 优缺点：效果和Web端完全一致，开发成本低；但WebView内存开销更高，不适合列表等大量控件复用的场景

方案二：纯原生TextView实现（无WebView依赖） #

如果不想引入WebView，需要把CSS效果拆解为Android原生属性+动画实现：

1. 首先配置静态基础属性，对应CSS里的字体大小、颜色、对齐、基础发光：

   TextView glowTv = findViewById(R.id.glow_tv);
   // 对应CSS font-size:80px
   glowTv.setTextSize(TypedValue.COMPLEX_UNIT_PX, 80);
   // 对应CSS color:#fff
   glowTv.setTextColor(Color.WHITE);
   // 对应CSS text-align:center
   glowTv.setGravity(Gravity.CENTER);
   // 必须关闭硬件加速，否则setShadowLayer发光效果不生效
   glowTv.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
   

2. 编写属性动画实现呼吸发光效果，对应CSS里的keyframe动画规则：

   // 动画插值器对应CSS ease-in-out
   AccelerateDecelerateInterpolator interpolator = new AccelerateDecelerateInterpolator();
   // 颜色估值器，实现两种发光颜色的平滑过渡
   ArgbEvaluator colorEvaluator = new ArgbEvaluator();
   int colorStart = Color.parseColor("#e60073");
   int colorEnd = Color.parseColor("#ff4da6");
   
   ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f);
   // 动画时长1s，对应CSS 1s
   animator.setDuration(1000);
   // 无限循环+反向播放，对应CSS infinite alternate
   animator.setRepeatCount(ValueAnimator.INFINITE);
   animator.setRepeatMode(ValueAnimator.REVERSE);
   animator.setInterpolator(interpolator);
   animator.addUpdateListener(animation -> {
       float fraction = animation.getAnimatedFraction();
       // 动态计算当前帧的发光半径，实现从30px到80px的平滑变化
       float currentRadius = 30f + (80f - 30f) * fraction;
       // 动态计算当前帧的发光颜色
       int currentGlowColor = (int) colorEvaluator.evaluate(fraction, colorStart, colorEnd);
       // 设置发光阴影
       glowTv.setShadowLayer(currentRadius, 0, 0, currentGlowColor);
   });
   // 页面销毁时记得调用animator.cancel()避免内存泄漏
   animator.start();
   

提示：原生setShadowLayer只支持单层阴影，如果要完全还原CSS里多层白色+彩色叠加的发光效果，可以自定义TextView，在onDraw方法中循环设置不同半径、透明度的阴影参数，多次绘制文字即可实现多层叠加效果。

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