先来一张图(为什么不是动图了)看下效果，看看这个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();
}
}
作者：木水Code
链接：https://juejin.cn/post/7105946838821273613
网友评论