对于一个自定义View来说,onMeasure只是用来计算View尺寸,onDraw()才是真正执行View的绘制,所以一般我们都需要重写onDraw()函数来绘制我们期望的UI界面。下面我以一个具体的例子探索自定义View的onDraw()的实现过程和关键点。
我们的目标是制作一个柱状图动画,View的动画启动后,会显示一排柱状图增长的画面,这种动画多用于财务类或者统计类的APP中,效果如图所示(截屏的格式转换过程导致有些变形,还好不影响演示,图中设置了反复播放,真机上只会播放一次):
1. 首先,自定义View的派生类
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
|
public
class
AnimatorView
extends
View {
private
Paint mPaint;
public
AnimatorView(Context context) {
super
(context);
initialize();
}
public
AnimatorView(Context context, AttributeSet attrs) {
super
(context, attrs);
initialize();
}
public
AnimatorView(Context context, AttributeSet attrs,
int
defStyle) {
super
(context, attrs, defStyle);
initialize();
}
protected
void
initialize() {
mPaint =
new
Paint();
mPaint.setAntiAlias(
true
);
mPaint.setStyle(Style.FILL);
}
}
|
注: Paint是用来绘图的画笔,可以设置其样式、画面的粗细、填充模式、颜色等等。
2. 定义待绘制的图形数据
待绘制的图形数据一般是在程序中动态给出的,这里为了演示,直接定义好:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
public
class
AnimatorView
extends
View {
private
static
final
int
RECT_WIDTH =
60
;
//每个矩形块的宽度
private
static
final
int
RECT_DISTANCE =
40
;
//矩形块之间的间距
private
static
final
int
TOTAL_PAINT_TIMES =
100
;
//控制绘制速度,分100次完成绘制
//待绘制的矩形块矩阵,left为高度,right为颜色
private
static
final
int
[][] RECT_ARRAY = {
{
380
,Color.GRAY},
{
600
,Color.YELLOW},
{
200
,Color.GREEN},
{
450
,Color.RED},
{
300
,Color.BLUE}
};
private
int
mPaintTimes =
0
;
//当前已经绘制的次数
}
|
3. 重载onDraw()函数,实现绘制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
public
class
AnimatorView
extends
View {
@Override
protected
void
onDraw(Canvas canvas) {
mPaintTimes++;
for
(
int
i=
0
; i<RECT_ARRAY.length; i++ ) {
mPaint.setColor(RECT_ARRAY[i][
1
]);
int
paintXPos = i*(RECT_WIDTH+RECT_DISTANCE) + RECT_DISTANCE;
int
paintYPos = RECT_ARRAY[i][
0
]/TOTAL_PAINT_TIMES*mPaintTimes;
canvas.drawRect(paintXPos, getHeight(), paintXPos+RECT_WIDTH,getHeight()-paintYPos, mPaint);
}
if
( mPaintTimes < TOTAL_PAINT_TIMES ) {
invalidate();
//实现动画的关键点
}
}
}
|
(1) onDraw()函数一般由系统布局管理器来调用,在View第一次加载的时候会调用一次,或者在系统认为需要重绘的时候也会被调用。当然,你也可以在程序中手动触发该View的重绘,通过调用View的invalidate()函数或者postInvalidate()函数即可,前者用于UI线程,后者用于非UI线程。
(2) onDraw()的参数Canvas我们可以理解成系统提供给我们的一块内存区域,所有的绘制都是在这块内存中进行的,绘制完成后系统会显示到屏幕中去。该Canvas对象提供了各种绘制点、线、矩形、圆、位图的方法,基本可以满足各种绘制要求。
(3) drawRect函数需要提供四个坐标,其中,前两个参数代表是被绘制矩形的起始点坐标,后两个参数则是相对于起点的斜对角坐标,注意,原点坐标(0,0)在屏幕的左上角。
(4) 注意,onDraw()每次被调用的时候,原来画布中的内容会被清空。
(5) 本示例中,矩形高度每次增加Height/TOTAL_PAINT_TIMES,宽度不变。
4. Activity中测试该View
1
2
3
4
5
6
7
8
9
10
11
12
|
public
class
MainActivity
extends
Activity {
private
AnimatorView mAnimatorView;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
mAnimatorView =
new
AnimatorView(
this
);
setContentView(mAnimatorView);
}
}
|
当然,也可以把该View放到layout文件中,这里就不赘述了。