You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

API 25之后实现TextView浮雕效果的方法求助

实现TextView浮雕效果的Canvas方案详解

我太懂这种找不到替代方案的焦虑了!自从EmbossMaskFilter被标记为废弃后,确实没什么现成的API直接用,不过用Canvas手动实现其实逻辑很简单,我给你拆解明白:

核心原理

浮雕效果的本质是两层文字叠加:

  • 先画一层偏移的「阴影层」(比如偏暗的颜色)
  • 再在原位置画一层「主体文字层」
    通过颜色差和微小的偏移,营造出文字凸起/凹陷的视觉效果

具体实现步骤

我们可以自定义一个EmbossTextView,重写onDraw方法来实现:

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.util.AttributeSet
import androidx.appcompat.widget.AppCompatTextView

class EmbossTextView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = android.R.attr.textViewStyle
) : AppCompatTextView(context, attrs, defStyleAttr) {

    // 浮雕偏移量(可以根据需求调整,2-4dp比较合适)
    private val embossOffset = dpToPx(3f)

    override fun onDraw(canvas: Canvas?) {
        // 1. 先画阴影层:偏移位置+深色(比如文字颜色加深30%)
        val shadowColor = adjustColorAlpha(currentTextColor, 0.7f)
        setTextColor(shadowColor)
        canvas?.translate(embossOffset, embossOffset)
        super.onDraw(canvas)

        // 2. 恢复画布位置,再画原文字层
        canvas?.translate(-embossOffset, -embossOffset)
        setTextColor(currentTextColor)
        super.onDraw(canvas)
    }

    // 辅助方法:dp转px
    private fun dpToPx(dp: Float): Float {
        return dp * resources.displayMetrics.density
    }

    // 辅助方法:调整颜色透明度(可选,让阴影更自然)
    private fun adjustColorAlpha(color: Int, alpha: Float): Int {
        val originalAlpha = Color.alpha(color)
        val newAlpha = (originalAlpha * alpha).toInt()
        return Color.argb(newAlpha, Color.red(color), Color.green(color), Color.blue(color))
    }
}

扩展优化

  • 如果想要凹陷效果,只需要把阴影层的偏移方向反过来(比如translate(-embossOffset, -embossOffset)),原文字层再移回来
  • 可以通过自定义属性,让偏移量、阴影颜色在XML里配置,更灵活
  • 要是需要更细腻的浮雕感,可以多叠一层更淡的阴影,或者调整阴影颜色的明暗度

使用方式

在XML里直接用自定义View就行:

<com.yourpackage.EmbossTextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="浮雕效果文字"
    android:textSize="24sp"
    android:textColor="#FFFFFF"/>

这样就能实现和原来EmbossMaskFilter类似的效果啦,亲测好用!

内容的提问来源于stack exchange,提问作者eric

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.12 04:39:22