ColorTransferTextView:一個(gè)顏色可以變化的TextView

先來一張圖(為什么不是動(dòng)圖了)看下效果，看看這個(gè)TextView是啥樣?jì)饍旱模?/p>

就是可以實(shí)現(xiàn)類似歌詞顏色進(jìn)度變化的效果，能從左到右、從上到下、從右到左、從下到上四個(gè)方向去改變文本的顏色。

核心就是使用Canvas的裁剪矩形的功能，把TextView裁剪成兩部分，一部分是變化后的顏色，一部分是原始的顏色，然后通過進(jìn)度不斷重繪兩個(gè)區(qū)域，逐漸增大變換后的區(qū)域，同時(shí)減小原始區(qū)域，從而實(shí)現(xiàn)顏色變化的效果。

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中設(shè)置的屬性

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)

//裁剪要繪制的區(qū)域
Rect clipRect = new Rect(left, top, right, bottom);
canvas.clipRect(clipRect);

5、繪制文字drawText(String text, float x, float y, Paint paint)，其中y是指文字的基線。所以要先計(jì)算基線。

這里借助大佬的一張圖來幫助理解TextView的的各個(gè)參數(shù)值，黑色的線就是基線。

具體代碼如下：

//計(jì)算文字區(qū)域
Rect textBounds = new Rect();
paint.getTextBounds(text, 0, text.length(), textBounds);
//計(jì)算x坐標(biāo)
float dx = (float) getWidth() / 2 - (float) textBounds.width() / 2;
//計(jì)算y表座
Paint.FontMetrics fontMetrics = paint.getFontMetrics();
float dy = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
//計(jì)算基線
float baseline = (float) getHeight() / 2 + dy;

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

6、根據(jù)方向，對(duì)文字區(qū)域進(jìn)行兩次繪制，先繪制變色部分，再繪制原始色部分。

        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;
            //左到右(默認(rèn))
            case DIRECTION_LEFT_TO_RIGHT:
            default:
                //繪制變色區(qū)域
                drawText(canvas, mTransferPaint, 0, 0, currentX, getHeight());
                //繪制原始色區(qū)域
                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;
            //左到右(默認(rèn))
            case DIRECTION_LEFT_TO_RIGHT:
            default:
                //繪制變色區(qū)域
                drawText(canvas, mTransferPaint, 0, 0, currentX, getHeight());
                //繪制原始色區(qū)域
                drawText(canvas, mOriginalPaint, currentX, 0, getWidth(), getHeight());
                break;
        }
    }

    private void drawText(Canvas canvas, Paint paint, int left, int top, int right, int bottom) {
        //先保存裁剪前的狀態(tài)
        canvas.save();

        //裁剪要繪制的區(qū)域
        Rect clipRect = new Rect(left, top, right, bottom);
        canvas.clipRect(clipRect);

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

        //計(jì)算文字區(qū)域
        Rect textBounds = new Rect();
        paint.getTextBounds(text, 0, text.length(), textBounds);
        //計(jì)算x坐標(biāo)
        float dx = (float) getWidth() / 2 - (float) textBounds.width() / 2;
        //計(jì)算y表座
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        float dy = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
        //計(jì)算基線
        float baseline = (float) getHeight() / 2 + dy;

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

        //重置的save之前的狀態(tài)
        canvas.restore();
    }

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

    /**
     * 設(shè)置文本變化顏色
     *
     * @param transferColor 顏色
     */
    public void setTransferColor(int transferColor) {
        this.mTransferColor = transferColor;
        mTransferPaint.setColor(mTransferColor);
    }

    /**
     * 設(shè)置顏色變化方向
     *
     * @param direction 方向
     */
    public void setDirection(int direction) {
        this.mDirection = direction;
    }

    /**
     * 設(shè)置顏色變化進(jìn)度
     *
     * @param progress 進(jìn)度
     */
    public void setProgress(float progress) {
        this.mProgress = progress;
        invalidate();
    }
}

作者：木水Code
鏈接：https://juejin.cn/post/7105946838821273613

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

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

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