banner
NEWS LETTER

渐变色的TextView

Scroll down

创建ColorTrackTextView继承自TextView

原创红橙Darren
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
public class ColorTrackTextView extends TextView {
/**
* 默认的字体颜色的画笔
*/
private Paint mOriginPaint;
/**
* 改变的字体颜色的画笔
*/
private Paint mChangePaint;
/**
* 当前的进度
*/
private float mCurrentProgress = 0.6f;
/**
* 当前文本
*/
private String mText;
/**
* 当前朝向
*/
private Direction mDirection = Direction.DIRECTION_LEFT;

/**
* 绘制的朝向枚举
*/
public enum Direction {
/**
* 左边
*/
DIRECTION_LEFT,
/**
* 右边
*/
DIRECTION_RIGHT
}

public ColorTrackTextView(@NonNull Context context) {
super(context);
initPaint();
}

public ColorTrackTextView(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
initPaint();
}

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

/**
* 初始化画笔
*/
private void initPaint() {
mOriginPaint = getPaintByColor(Color.BLACK);
mChangePaint = getPaintByColor(Color.RED);
}

/**
* 获取画笔根据不同的颜色
*/
private Paint getPaintByColor(int color) {
Paint paint = new Paint();
// 抗锯齿
paint.setAntiAlias(true);
// 仿抖动
paint.setDither(true);
paint.setColor(color);
// 字体的大小设置为TextView的文字大小
paint.setTextSize(getTextSize());
return paint;
}

/**
* 这里肯定是自己去画 不能用super
*/
@Override
protected void onDraw(Canvas canvas) {
// 获取当前文本
mText = getText().toString();
// 获取控件宽度
int width = getWidth();
if (!TextUtils.isEmpty(mText)) {
// 根据当前进度计算中间位置
int middle = (int) (width * mCurrentProgress);
// 根据不同的朝向去画字体
if (mDirection == Direction.DIRECTION_LEFT) {
drawOriginDirectionLeft(canvas, middle);
drawChangeDirectionLeft(canvas, middle);
}
if (mDirection == Direction.DIRECTION_RIGHT) {
drawOriginDirectionRight(canvas, middle);
drawChangeDirectionRight(canvas, middle);
}
}
}

/**
* 画朝向右边变色字体
*/
private void drawChangeDirectionRight(Canvas canvas, int middle) {
drawText(canvas, mChangePaint, getWidth() - middle, getWidth());
}

/**
* 画朝向左边默认色字体
*/
private void drawOriginDirectionRight(Canvas canvas, int middle) {
drawText(canvas, mOriginPaint, 0, getWidth() - middle);
}

/**
* 画朝向左边变色字体
*/
private void drawChangeDirectionLeft(Canvas canvas, int middle) {
drawText(canvas, mChangePaint, 0, middle);
}

/**
* 画朝向左边默认色字体
*/
private void drawOriginDirectionLeft(Canvas canvas, int middle) {
drawText(canvas, mOriginPaint, middle, getWidth());
}

/**
* 设置当前的进度
*
* @param currentProgress 当前进度
*/
public void setCurrentProgress(float currentProgress) {
this.mCurrentProgress = currentProgress;
// 重新绘制
invalidate();
}

/**
* 设置绘制方向,从右到左或者从左到右
*
* @param direction 绘制方向
*/
public void setDirection(Direction direction) {
this.mDirection = direction;
}

/**
* 绘制文本根据指定的位置
*
* @param canvas canvas画布
* @param paint 画笔
* @param startX 开始的位置
* @param endX 结束的位置
*/
private void drawText(Canvas canvas, Paint paint, int startX, int endX) {
// 保存画笔状态
canvas.save();
// 截取绘制的内容,待会就只会绘制clipRect设置的参数部分
canvas.clipRect(startX, 0, endX, getHeight());
// 获取文字的范围
Rect bounds = new Rect();
mOriginPaint.getTextBounds(mText, 0, mText.length(), bounds);
// 获取文字的Metrics 用来计算基线
Paint.FontMetricsInt fontMetrics = mOriginPaint.getFontMetricsInt();
// 获取文字的宽高
int fontTotalHeight = fontMetrics.bottom - fontMetrics.top;
// 计算基线到中心点的位置
int offY = fontTotalHeight / 2 - fontMetrics.bottom;
// 计算基线位置
int baseline = (getMeasuredHeight() + fontTotalHeight) / 2 - offY;
canvas.drawText(mText, getMeasuredWidth() / 2 - bounds.width() / 2, baseline, paint);
// 释放画笔状态
canvas.restore();
}

}
其他文章
目录导航 置顶
  1. 1. 创建ColorTrackTextView继承自TextView
请输入关键词进行搜索