先來一張圖(為什么不是動圖了)看下效果，看看這個(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ù)方向，對文字區(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
