Android中如何实现TextView文本末尾渐变透明效果？参考Google Play设计

嘿，这个效果我之前做项目时正好研究过，Android里实现TextView文本末尾渐变透明其实有两种非常实用的原生方案，不用依赖任何第三方库，我给你详细说说：

这个方法是直接操控TextView的绘制逻辑，通过给文本画笔设置渐变着色器，让文本从正常颜色平滑过渡到透明。

实现步骤： #

你可以自定义一个TextView，这样复用起来更方便：

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

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        // 等View尺寸确定后再创建Shader，避免宽度计算错误
        val gradientShader = LinearGradient(
            0f, 0f, w.toFloat(), 0f,
            // 颜色数组：正常文本色 -> 正常文本色 -> 透明
            intArrayOf(currentTextColor, currentTextColor, Color.TRANSPARENT),
            // 位置数组：0%处是正常色，70%处还是正常色，100%处变透明（可调整这个0.7来控制渐变起始位置）
            floatArrayOf(0f, 0.7f, 1f),
            Shader.TileMode.CLAMP
        )
        paint.shader = gradientShader
    }
}

然后在布局里直接用这个自定义View就行：

<com.yourpackage.GradientEndTextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="这是一段会在末尾渐变透明的文本示例"
    android:textSize="18sp" />

如果不想自定义View，也可以在Activity/Fragment里给普通TextView动态设置：

val myTextView = findViewById<TextView>(R.id.tv_normal)
// 监听布局完成，确保能拿到准确的TextView宽度
myTextView.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
    override fun onGlobalLayout() {
        myTextView.viewTreeObserver.removeOnGlobalLayoutListener(this)
        val shader = LinearGradient(
            0f, 0f, myTextView.width.toFloat(), 0f,
            intArrayOf(myTextView.currentTextColor, myTextView.currentTextColor, Color.TRANSPARENT),
            floatArrayOf(0f, 0.7f, 1f),
            Shader.TileMode.CLAMP
        )
        myTextView.paint.shader = shader
    }
})

如果不想写代码，这个纯XML的方法也能搞定，原理是给TextView加一个渐变遮罩层，让末尾区域看起来是透明的。

实现步骤： #

1. 先创建一个drawable文件（比如text_gradient_mask.xml）：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:startColor="@android:color/transparent"
                android:endColor="@android:color/black"
                android:type="linear"
                android:angle="0"
                android:centerX="0.7" /> <!-- 0.7表示从70%的位置开始渐变，和方案一对应 -->
        </shape>
    </item>
</layer-list>

2. 用FrameLayout包裹TextView，给FrameLayout设置这个遮罩作为前景：

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:foreground="@drawable/text_gradient_mask">

    <TextView
        android:id="@+id/tv_mask"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="用遮罩实现的文本末尾渐变透明效果"
        android:textSize="18sp" />

</FrameLayout>

一些实用调整技巧： #

• 调整渐变起始位置：修改两个方案里的0.7数值，比如改成0.8就是从80%的位置开始渐变，数值越小渐变区域越长。
• 垂直方向渐变：如果是多行文本想要底部渐变，方案一把LinearGradient的参数改成(0f, 0f, 0f, h.toFloat())，方案二把gradient的angle改成270即可。
• 自定义颜色：方案一里的currentTextColor可以替换成你想要的具体颜色，比如Color.parseColor("#333333")。

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