TextView 设置文字颜色渐变

之前公司有几个紧急项目就没有再做知识的总结了，现在又有了空闲，但是感觉纯粹的总结并没有太大的作用，还是将实际项目中应用到的一些自定义控件或者有意思的东西分享出来。
这个文字颜色渐变就是最近的项目中用到的（不得不说产品就是喜欢那些花里胡哨的）。看到效果图的时候我就有点懵逼，因为之前没有遇到过文字设置渐变色，也就只是做过按钮的背景渐变色。如下

<?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>

所以文字的颜色渐变就只能去网上查找资料了，在CSDN上面也看了很多，基本上都是重写TextView，然后在onDraw方法里面用LinearGradient，设置渐变色，大概思路如下：

@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);
    }

不过实际使用中发现，很多时候文字都会不显示，而且也只能从上往下的颜色渐变，当TextView里面的文字有多行时就很是尴尬了，上面一半的一种颜色，下面又是另一种颜色，很难看出渐变的效果，这个方案就给过掉了。

后来突然想到了SpanString这个很屌的类，这个SpanString系列本身就是Google放出来用于给文本设置各种效果的（感兴趣的可以去看一下源码，这里就不做过多的展示）。不过ForegroundColorSpan虽然可以给文字重新着色，但是不能够直接设置渐变色，所以就又需要我们去自定义一个带渐变色的着色器，具体代码如下：

/**
 * @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;
    // 渐变结束颜色
    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));
    }

    /**
     * 动态设置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:其实这个自定义的类还是有点问题的，在文字宽度的计算中，没有去算控件设置的padding值，实际使用中也有一些小问题，但是颜色渐变的效果还是能够实现的。如果有更好的方法实现文字颜色渐变可以在下面留言。