Android 自定義 TextView 實現垂直漸變字體顏色（支持 XML 配置）

在 Android UI 設計中，字體顏色的漸變效果能讓界面看起來更加精致與現代。常見的漸變有從左到右、從上到下等方向，但 Android 的 TextView 默認并不支持垂直漸變。

本文將帶你從原理到實現，一步步完成一個支持 上到下顏色漸變 的 TextView，并且支持在 XML 中直接配置漸變顏色，無須每次寫 Java 代碼去設置。

本文最終實現效果：文字顏色可從頂部到底部漸變，顏色、方向均可在 XML 中自定義，支持陰影效果，性能開銷低，可直接在項目中復用。

---

---

1. 漸變字體效果原理

在 Android 中，要實現漸變文字的關鍵是使用 Shader（著色器），其中 LinearGradient 是最常用的線性漸變工具。

LinearGradient 的構造函數如下：

LinearGradient(float x0, float y0, // 漸變起點坐標float x1, float y1, // 漸變終點坐標int color0,         // 起始顏色int color1,         // 結束顏色Shader.TileMode tile
)

當我們把 LinearGradient 設置給 TextView 的 Paint 時，文字在繪制時就會自動按照漸變色進行渲染。

例如，如果我們想要讓文字從紅色漸變到藍色，由上到下，可以這么寫：

Shader shader = new LinearGradient(0, 0, 0, getHeight(),Color.RED,Color.BLUE,Shader.TileMode.CLAMP
);
paint.setShader(shader);

Shader.TileMode.CLAMP 表示漸變會被拉伸填充到末端，不會重復或鏡像。

---

2. 自定義 VerticalGradientTextView（支持 XML 配置）

為了讓漸變文字可以在布局 XML 中直接配置，我們需要自定義一個 TextView，并且支持讀取自定義屬性（startColor、endColor、gradientOrientation）。

---

2.1 添加自定義屬性

首先，在 res/values/attrs.xml 中定義漸變顏色相關的屬性：

<resources><declare-styleable name="VerticalGradientTextView"><!-- 漸變起始顏色 --><attr name="startColor" format="color" /><!-- 漸變結束顏色 --><attr name="endColor" format="color" /><!-- 漸變方向：vertical（默認）、horizontal --><attr name="gradientOrientation" format="enum"><enum name="vertical" value="0" /><enum name="horizontal" value="1" /></attr></declare-styleable>
</resources>

這樣，XML 中就可以像設置 android:textColor 一樣設置漸變顏色。

---

2.2 編寫自定義 TextView 類

package com.example.gradienttextview;import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;import androidx.appcompat.widget.AppCompatTextView;public class VerticalGradientTextView extends AppCompatTextView {private int startColor;private int endColor;private int orientation; // 0: vertical, 1: horizontalpublic VerticalGradientTextView(Context context) {this(context, null);}public VerticalGradientTextView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public VerticalGradientTextView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.VerticalGradientTextView);startColor = ta.getColor(R.styleable.VerticalGradientTextView_startColor, 0xFFFF4081);endColor = ta.getColor(R.styleable.VerticalGradientTextView_endColor, 0xFF3F51B5);orientation = ta.getInt(R.styleable.VerticalGradientTextView_gradientOrientation, 0);ta.recycle();}@Overrideprotected void onDraw(Canvas canvas) {Paint paint = getPaint();Shader shader;if (orientation == 0) {// 垂直漸變shader = new LinearGradient(0, 0, 0, getHeight(),startColor,endColor,Shader.TileMode.CLAMP);} else {// 水平漸變shader = new LinearGradient(0, 0, getWidth(), 0,startColor,endColor,Shader.TileMode.CLAMP);}paint.setShader(shader);super.onDraw(canvas);}
}

---

3. 在 XML 中使用漸變字體 TextView

創建布局文件 activity_main.xml，直接使用我們的自定義控件：

<com.example.gradienttextview.VerticalGradientTextViewandroid:layout_width="112dp"android:layout_height="40dp"android:text="示例文本"android:textSize="28sp"android:gravity="center"android:shadowColor="#40000000"android:shadowDx="0dp"android:shadowDy="4dp"android:shadowRadius="3.0"app:startColor="#FF4081"app:endColor="#3F51B5"app:gradientOrientation="vertical"/>

這樣，文字就會從粉紅色（#FF4081）到藍色（#3F51B5）垂直漸變，并且保留陰影效果。

---

4. 優化與擴展

4.1 性能優化

• 在 onDraw() 中每次都會創建 LinearGradient，對于頻繁重繪的場景（如動畫）可能會增加開銷。可以將 LinearGradient 緩存到成員變量，并在 onSizeChanged() 時重新計算。

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);updateShader(w, h);
}private void updateShader(int w, int h) {if (orientation == 0) {shader = new LinearGradient(0, 0, 0, h, startColor, endColor, Shader.TileMode.CLAMP);} else {shader = new LinearGradient(0, 0, w, 0, startColor, endColor, Shader.TileMode.CLAMP);}
}

這樣 onDraw() 里只需要 paint.setShader(shader);，無需每次創建對象。

---

4.2 支持更多漸變類型

• 多色漸變：LinearGradient 支持傳入顏色數組和對應位置數組，可以實現三色或更多顏色漸變。
• 角度漸變：通過計算不同的起止坐標，可以實現任意角度漸變。

---

4.3 與動畫結合

漸變字體可以和 ValueAnimator 結合，讓顏色動態變化，實現炫酷的標題效果。

ValueAnimator animator = ValueAnimator.ofArgb(Color.RED, Color.BLUE);
animator.addUpdateListener(animation -> {startColor = (int) animation.getAnimatedValue();invalidate();
});
animator.setDuration(2000);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.start();

---

總結

通過以上步驟，我們實現了一個：

• 支持 XML 配置漸變顏色和方向
• 保持陰影效果
• 性能優化可選
• 可擴展為多色漸變和動畫

的 垂直漸變字體 TextView。

無論是用于游戲 UI、主題標題，還是特殊提示文字，都可以讓界面更具視覺沖擊力，同時保持代碼的靈活性與可維護性。