作者 |  昊空_6f4f

概述


本文主要分享仿今日头条文字渐变效果，效果图如下：

android中字体渐变 安卓文字渐变_垂直居中


实现要点：

  • 绘制水平垂直居中的文本
  • 采用画布裁剪实现渐变效果

绘制水平垂直居中的文本

文本水平居中


文本水平居中有两种方式：

  • 调用Paint的setTextAlign(Paint.Align.CENTER)方法
  • 控件宽度 / 2 - 文字宽度 / 2计算文本的x轴坐标

文本垂直居中


文本垂直居中重点在于计算基准线，大致过程如下：

  • 获取View的中心位置
  • 中心位置下移半个字体的高度
  • 上移descent，达到文字的最终位置即BaseLine的位置

代码实现如下：

Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();  float baseLine = (getHeight() + fontMetrics.descent - fontMetrics.ascent) / 2 - fontMetrics.descent;

为了方便理解，baseLine的计算，可参考下图：

android中字体渐变 安卓文字渐变_今日头条_02

画布裁剪实现渐变效果


文字渐变主要是通过画布裁剪实现的，裁剪渐变部分与不变部分再进行叠加，从而达到渐变的效果，这种实现方式有一个好处是防止过度绘制。 关键代码如下： 

//渐变部分 private void drawGradientText(Canvas canvas) {        //保存当前画布        canvas.save();        //文字水平居中方案二：x = getWidth() / 2 - 文字宽度 / 2        float textWidth = mTextPaint.measureText(mText, 0, mText.length());        float x = (getWidth() - textWidth) / 2;        //文字垂直居中：BaseLine的计算 = getHeight() / 2 + 文字高度 / 2 - descent        Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();        float textHeight = fontMetrics.descent - fontMetrics.ascent;        float y = (getHeight() + textHeight) / 2 - fontMetrics.descent;        mTextPaint.setColor(Color.RED);        //先裁剪渐变区域文字要显示的区域        float right = x + textWidth * mPercent;        canvas.clipRect(x, 0, right, getHeight());        //裁剪完成后再绘制文字        canvas.drawText(mText, x, y, mTextPaint);        //恢复画布        canvas.restore();    }    //不变部分     private void drawNormalText(Canvas canvas) {        canvas.save();        float textWidth = mTextPaint.measureText(mText, 0, mText.length());        float x = (getWidth() - textWidth) / 2;        Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();        float textHeight = fontMetrics.descent - fontMetrics.ascent;        float y = (getHeight() + textHeight) / 2 - fontMetrics.descent;        mTextPaint.setColor(Color.BLACK);        //对不变区域文字进行裁剪，防止过度绘制(这个很重要)        float left = x + textWidth * mPercent;        canvas.clipRect(left, 0, x + textWidth, getHeight());        canvas.drawText(mText, x, y, mTextPaint);        canvas.restore();    }

仿今日头条文字渐变效果实现思路


知道了文本绘制居中与画布裁剪后，实现仿今日头条文字渐变效果就很简单了，大致思路是通过监听ViewPager的滚动获取滚动的百分比，再通过滚动百分比计算出渐变区域与不变区域并分别进行裁剪，最后通过图层叠效果就出来了。 渐变控件关键代码： 

public class ColorChangeTextView extends AppCompatTextView {    private int mTextSize = sp2px(30);    private int mTextColor = Color.BLACK;    private int mTextColorChange = Color.RED;    private TextPaint mTextPaint;    private int mDirection = LEFT;//文件渐变方向    protected static final int LEFT = 0;    protected static final int RIGHT = 1;    @IntDef(value = {LEFT, RIGHT})    @Retention(RetentionPolicy.SOURCE)    public @interface Direction {    }    private float mProgress;//文字渐变的进度    public float getProgress() {        return mProgress;    }    public void setProgress(float mProgress) {        this.mProgress = mProgress;        invalidate();    }    public void setDirection(@Direction int direction) {        this.mDirection = direction;    }    public ColorChangeTextView(Context context) {        this(context, null);    }    public ColorChangeTextView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public ColorChangeTextView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        initAttr(context, attrs);        init();    }    private void initAttr(final Context context, @Nullable final AttributeSet attrs) {        TypedArray ta = context.obtainStyledAttributes(attrs,                R.styleable.ColorChangeTextView);        mTextSize = ta.getDimensionPixelSize(                R.styleable.ColorChangeTextView_text_size, mTextSize);        mTextColor = ta.getColor(                R.styleable.ColorChangeTextView_text_color, mTextColor);        mTextColorChange = ta.getColor(                R.styleable.ColorChangeTextView_text_color_change, mTextColorChange);        mProgress = ta.getFloat(R.styleable.ColorChangeTextView_progress, 0);        ta.recycle();    }    private void init() {        mTextPaint = new TextPaint(TextPaint.ANTI_ALIAS_FLAG);        mTextPaint.setColor(mTextColor);        mTextPaint.setTextSize(mTextSize);    }    @Override    protected void onDraw(Canvas canvas) {        switch (mDirection){            case LEFT:                drawLeft(canvas);                break;            case RIGHT:                drawRight(canvas);                break;        }    }    private void drawLeft(Canvas canvas){        //绘制底部不变部分        canvas.save();        String text = getText().toString();        float textWidth = mTextPaint.measureText(text);        Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();        float textHeight = fontMetrics.descent - fontMetrics.ascent;        float x = (getWidth() - textWidth) / 2;        float baseLine = (getHeight() + textHeight) / 2 - fontMetrics.descent;        float left = x + textWidth * mProgress;        canvas.clipRect(left,0,x + textWidth,getHeight());        mTextPaint.setColor(mTextColor);        canvas.drawText(text,x,baseLine,mTextPaint);        canvas.restore();        //绘制顶部渐变部分        canvas.save();        float right = x + textWidth * mProgress;        canvas.clipRect(x,0,right,getHeight());        mTextPaint.setColor(mTextColorChange);        canvas.drawText(text,x,baseLine,mTextPaint);        canvas.restore();    }    private void drawRight(Canvas canvas) {        //绘制顶部渐变部分        canvas.save();        String text = getText().toString();        float textWidth = mTextPaint.measureText(text);        Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();        float textHeight = fontMetrics.descent - fontMetrics.ascent;        float baseLine = (getHeight() + textHeight) / 2 - fontMetrics.descent;        float x = (getWidth() - textWidth) / 2;        float left = x + textWidth * (1 - mProgress);        float right = x + textWidth;        canvas.clipRect(left,0,right,getHeight());        mTextPaint.setColor(mTextColorChange);        canvas.drawText(text,x,baseLine,mTextPaint);        canvas.restore();        //绘制底部不变部分        canvas.save();        right = x + textWidth * (1 - mProgress);        canvas.clipRect(0,0,right,getHeight());        mTextPaint.setColor(mTextColor);        canvas.drawText(text,x,baseLine,mTextPaint);        canvas.restore();    }    static int sp2px(float sp) {        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, Resources.getSystem().getDisplayMetrics());    }}


ViewPager滚动的关键代码： 

mViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {                if(positionOffset > 0){                    ColorChangeTextView left = mTabs.get(position);                    ColorChangeTextView right = mTabs.get(position + 1);                    left.setDirection(ColorChangeTextView.RIGHT);                    right.setDirection(ColorChangeTextView.LEFT);                    left.setProgress(1- positionOffset);                    right.setProgress(positionOffset);                }            }        });