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值,实际使用中也有一些小问题,但是颜色渐变的效果还是能够实现的。如果有更好的方法实现文字颜色渐变可以在下面留言。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,383评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,522评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,852评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,621评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,741评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,929评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,076评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,803评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,265评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,582评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,716评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,395评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,039评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,027评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,488评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,612评论 2 350

推荐阅读更多精彩内容