ColorTransferTextView:一个颜色可以变化的TextView

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

先来一张图(为什么不是动图了)看下效果，看看这个TextView是啥样婶儿的：

就是可以实现类似歌词颜色进度变化的效果，能从左到右、从上到下、从右到左、从下到上四个方向去改变文本的颜色。

核心就是使用Canvas的裁剪矩形的功能，把TextView裁剪成两部分，一部分是变化后的颜色，一部分是原始的颜色，然后通过进度不断重绘两个区域，逐渐增大变换后的区域，同时减小原始区域，从而实现颜色变化的效果。

1、定义ColorTransferTextView所需要的一些属性，既然是颜色变化的TextView，那么就需要有原始色、变化色，然后就是变化的方向。

<resources>
  <declare-styleable name="ColorTransferTextView">
    <attr name="originalColor" format="color" />
    <attr name="transferColor" format="color" />
    <attr name="direction" format="integer" />
  </declare-styleable>
</resources>

2、解析xml中设置的属性

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ColorTransferTextView);
mOriginalColor = ta.getColor(R.styleable.ColorTransferTextView_originalColor, 0xff000000);
mTransferColor = ta.getColor(R.styleable.ColorTransferTextView_transferColor, 0xff0099cc);
ta.recycle();

3、初始化Paint

mOriginalPaint = createPaint(mOriginalColor);
mTransferPaint = createPaint(mTransferColor);

private Paint createPaint(int color) {
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setDither(true);
    paint.setColor(color);
    paint.setTextSize(getTextSize());
    return paint;
}

4、核心方法就是canvas.clipRect(rect)

//裁剪要绘制的区域
Rect clipRect = new Rect(left, top, right, bottom);
canvas.clipRect(clipRect);

5、绘制文字drawText(String text, float x, float y, Paint paint)，其中y是指文字的基线。所以要先计算基线。

这里借助大佬的一张图来帮助理解TextView的的各个参数值，黑色的线就是基线。

具体代码如下：

//计算文字区域
Rect textBounds = new Rect();
paint.getTextBounds(text, 0, text.length(), textBounds);
//计算x坐标
float dx = (float) getWidth() / 2 - (float) textBounds.width() / 2;
//计算y表座
Paint.FontMetrics fontMetrics = paint.getFontMetrics();
float dy = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
//计算基线
float baseline = (float) getHeight() / 2 + dy;

//绘制文字
canvas.drawText(text, dx, baseline, paint);

6、根据方向，对文字区域进行两次绘制，先绘制变色部分，再绘制原始色部分。

        switch (mDirection) {
            //右到左
            case DIRECTION_RIGHT_TO_LEFT:
                drawText(canvas, mTransferPaint, getWidth() - currentX, 0, getWidth(), getHeight());
                drawText(canvas, mOriginalPaint, 0, 0, getWidth() - currentX, getHeight());
                break;
            //上到下
            case DIRECTION_TOP_TO_BOTTOM:
                drawText(canvas, mTransferPaint, 0, 0, getWidth(), currentY);
                drawText(canvas, mOriginalPaint, 0, currentY, getWidth(), getHeight());
                break;
            //下到上
            case DIRECTION_BOTTOM_TO_TOP:
                drawText(canvas, mTransferPaint, 0, getHeight() - currentY, getWidth(), getHeight());
                drawText(canvas, mOriginalPaint, 0, 0, getWidth(), getHeight() - currentY);
                break;
            //左到右(默认)
            case DIRECTION_LEFT_TO_RIGHT:
            default:
                //绘制变色区域
                drawText(canvas, mTransferPaint, 0, 0, currentX, getHeight());
                //绘制原始色区域
                drawText(canvas, mOriginalPaint, currentX, 0, getWidth(), getHeight());
                break;
        }

完整代码：

public class ColorTransferTextView extends AppCompatTextView {

    public static final int DIRECTION_LEFT_TO_RIGHT = 1;
    public static final int DIRECTION_TOP_TO_BOTTOM = 2;
    public static final int DIRECTION_RIGHT_TO_LEFT = 3;
    public static final int DIRECTION_BOTTOM_TO_TOP = 4;

    private Paint mOriginalPaint, mTransferPaint;
    private int mOriginalColor, mTransferColor;
    private int mDirection;
    private float mProgress = 0f;

    public ColorTransferTextView(@NonNull Context context) {
        this(context, null);
    }

    public ColorTransferTextView(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ColorTransferTextView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ColorTransferTextView);
        mOriginalColor = ta.getColor(R.styleable.ColorTransferTextView_originalColor, 0xff000000);
        mTransferColor = ta.getColor(R.styleable.ColorTransferTextView_transferColor, 0xff0099cc);
        mDirection = ta.getInteger(R.styleable.ColorTransferTextView_direction, DIRECTION_LEFT_TO_RIGHT);
        ta.recycle();

        initPaint();
    }

    private void initPaint() {
        mOriginalPaint = createPaint(mOriginalColor);
        mTransferPaint = createPaint(mTransferColor);
    }

    private Paint createPaint(int color) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setColor(color);
        paint.setTextSize(getTextSize());
        return paint;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int currentX = (int) (mProgress * getWidth());
        int currentY = (int) (mProgress * getHeight());
        switch (mDirection) {
            //右到左
            case DIRECTION_RIGHT_TO_LEFT:
                drawText(canvas, mTransferPaint, getWidth() - currentX, 0, getWidth(), getHeight());
                drawText(canvas, mOriginalPaint, 0, 0, getWidth() - currentX, getHeight());
                break;
            //上到下
            case DIRECTION_TOP_TO_BOTTOM:
                drawText(canvas, mTransferPaint, 0, 0, getWidth(), currentY);
                drawText(canvas, mOriginalPaint, 0, currentY, getWidth(), getHeight());
                break;
            //下到上
            case DIRECTION_BOTTOM_TO_TOP:
                drawText(canvas, mTransferPaint, 0, getHeight() - currentY, getWidth(), getHeight());
                drawText(canvas, mOriginalPaint, 0, 0, getWidth(), getHeight() - currentY);
                break;
            //左到右(默认)
            case DIRECTION_LEFT_TO_RIGHT:
            default:
                //绘制变色区域
                drawText(canvas, mTransferPaint, 0, 0, currentX, getHeight());
                //绘制原始色区域
                drawText(canvas, mOriginalPaint, currentX, 0, getWidth(), getHeight());
                break;
        }
    }

    private void drawText(Canvas canvas, Paint paint, int left, int top, int right, int bottom) {
        //先保存裁剪前的状态
        canvas.save();

        //裁剪要绘制的区域
        Rect clipRect = new Rect(left, top, right, bottom);
        canvas.clipRect(clipRect);

        String text = getText().toString();
        if (TextUtils.isEmpty(text)) {
            return;
        }

        //计算文字区域
        Rect textBounds = new Rect();
        paint.getTextBounds(text, 0, text.length(), textBounds);
        //计算x坐标
        float dx = (float) getWidth() / 2 - (float) textBounds.width() / 2;
        //计算y表座
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        float dy = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
        //计算基线
        float baseline = (float) getHeight() / 2 + dy;

        //绘制文字
        canvas.drawText(text, dx, baseline, paint);

        //重置的save之前的状态
        canvas.restore();
    }

    /**
     * 设置文本原始颜色
     *
     * @param originalColor 颜色
     */
    public void setOriginalColor(int originalColor) {
        this.mOriginalColor = originalColor;
        mOriginalPaint.setColor(mOriginalColor);
    }

    /**
     * 设置文本变化颜色
     *
     * @param transferColor 颜色
     */
    public void setTransferColor(int transferColor) {
        this.mTransferColor = transferColor;
        mTransferPaint.setColor(mTransferColor);
    }

    /**
     * 设置颜色变化方向
     *
     * @param direction 方向
     */
    public void setDirection(int direction) {
        this.mDirection = direction;
    }

    /**
     * 设置颜色变化进度
     *
     * @param progress 进度
     */
    public void setProgress(float progress) {
        this.mProgress = progress;
        invalidate();
    }
}

关注木水小站 (zhangmushui.cn)和微信公众号【木水Code】，及时获取更多最新技术干货。