TextView 設(shè)置文字顏色漸變

之前公司有幾個緊急項目就沒有再做知識的總結(jié)了,現(xiàn)在又有了空閑,但是感覺純粹的總結(jié)并沒有太大的作用,還是將實際項目中應用到的一些自定義控件或者有意思的東西分享出來。
這個文字顏色漸變就是最近的項目中用到的(不得不說產(chǎn)品就是喜歡那些花里胡哨的)??吹叫Ч麍D的時候我就有點懵逼,因為之前沒有遇到過文字設(shè)置漸變色,也就只是做過按鈕的背景漸變色。如下

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:startColor="#0000ff"
        android:endColor="#ff0000"
        android:centerX="0.5"
        android:centerY="0.5"/>

    <corners
        android:radius="5dp"/>

</shape>

所以文字的顏色漸變就只能去網(wǎng)上查找資料了,在CSDN上面也看了很多,基本上都是重寫TextView,然后在onDraw方法里面用LinearGradient,設(shè)置漸變色,大概思路如下:

@Override
    protected void onDraw(Canvas canvas) {
        int mViewWidth = getMeasuredWidth();
        Paint mPaint = getPaint();
        String mTipText = getText().toString();
        mPaint.getTextBounds(mTipText, 0, mTipText.length(), mTextBound);
        LinearGradient mLinearGradient = new LinearGradient(0, 0, mViewWidth, 0,
                new int[]{0xFFFFEABA, 0xFFBE8B49},
                null, Shader.TileMode.REPEAT);
        mPaint.setShader(mLinearGradient);
        canvas.drawText(mTipText, getMeasuredWidth() / 2 - mTextBound.width() / 2, getMeasuredHeight() / 2 + mTextBound.height() / 2, mPaint);
    }

不過實際使用中發(fā)現(xiàn),很多時候文字都會不顯示,而且也只能從上往下的顏色漸變,當TextView里面的文字有多行時就很是尷尬了,上面一半的一種顏色,下面又是另一種顏色,很難看出漸變的效果,這個方案就給過掉了。

后來突然想到了SpanString這個很屌的類,這個SpanString系列本身就是Google放出來用于給文本設(shè)置各種效果的(感興趣的可以去看一下源碼,這里就不做過多的展示)。不過ForegroundColorSpan雖然可以給文字重新著色,但是不能夠直接設(shè)置漸變色,所以就又需要我們?nèi)プ远x一個帶漸變色的著色器,具體代碼如下:

/**
 * @ClassName: LinearGradientFontSpan
 * @Description: 文字漸變的Span類
 * @Author: ZL
 * @CreateDate: 2019/09/23 09:58
 */
public class LinearGradientFontSpan extends ReplacementSpan {

    // 文字寬度
    private int mSize;
    // 漸變開始顏色
    private int startColor = Color.BLUE;
    // 漸變結(jié)束顏色
    private int endColor = Color.RED;
    // 是否左右漸變
    private boolean isLeftToRight = true;

    public LinearGradientFontSpan() {
    }

    public LinearGradientFontSpan(int startColor, int endColor, boolean leftToRight) {
        this.startColor = startColor;
        this.endColor = endColor;
        this.isLeftToRight = leftToRight;
    }

    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
        mSize = (int) (paint.measureText(text, start, end));
        return mSize;
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        // 修改y1的值從上到下漸變, 修改x1的值從左到右漸變
        LinearGradient lg;
        if (isLeftToRight) {
            lg = new LinearGradient(0, 0, mSize, 0,
                    startColor,
                    endColor,
                    Shader.TileMode.REPEAT);
        } else {
            lg = new LinearGradient(0, 0, 0, paint.descent() - paint.ascent(),
                    startColor,
                    endColor,
                    Shader.TileMode.REPEAT);
        }
        paint.setShader(lg);

        canvas.drawText(text, start, end, x, y, paint);//繪制文字
    }

    public void setLeftToRight(boolean leftToRight) {
        isLeftToRight = leftToRight;
    }

    public void setEndColor(int endColor) {
        this.endColor = endColor;
    }

    public void setStartColor(int startColor) {
        this.startColor = startColor;
    }
}

具體使用如下:

/**
 * @ClassName: TextTestActivity
 * @Description: java類作用描述
 * @Author: ZL
 * @CreateDate: 2019/09/26 15:42
 */
public class TextTestActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_test);
        TextView tvLeftRight = findViewById(R.id.tv_left_right);
        TextView tvTopBottom = findViewById(R.id.tv_top_bottom);

        tvLeftRight.setText(getGradientSpan(tvLeftRight.getText().toString(), Color.BLUE, Color.RED, true));
        tvTopBottom.setText(getGradientSpan(tvTopBottom.getText().toString(), Color.BLUE, Color.RED, false));
    }

    /**
     * 動態(tài)設(shè)置TextView文字的橫向或縱向漸變色
     * @param string
     * @param startColor
     * @param endColor
     * @return
     */
    public static SpannableStringBuilder getGradientSpan(String string, int startColor, int endColor, boolean isLeftToRight) {
        SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder(string);
        LinearGradientFontSpan span = new LinearGradientFontSpan(startColor, endColor, isLeftToRight);
        spannableStringBuilder.setSpan(span, 0, spannableStringBuilder.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        
        // 若有需要可以在這里用SpanString系列的其他類,給文本添加下劃線、超鏈接、刪除線...等等效果
        return spannableStringBuilder;
    }
}

使用效果如下:


文字漸變色

ps:其實這個自定義的類還是有點問題的,在文字寬度的計算中,沒有去算控件設(shè)置的padding值,實際使用中也有一些小問題,但是顏色漸變的效果還是能夠?qū)崿F(xiàn)的。如果有更好的方法實現(xiàn)文字顏色漸變可以在下面留言。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容