对于一个自定义View来说，onMeasure只是用来计算View尺寸，onDraw()才是真正执行View的绘制，所以一般我们都需要重写 onDraw()函数来绘制我们期望的UI界面。下面我以一个具体的例子探索自定义View的onDraw()的实现过程和关键点。
我们的目标是制作一个柱状图动画，View的动画启动后，会显示一排柱状图增长的画面，这种动画多用于财务类或者统计类的APP中，效果如图所示（截屏的格式转换过程导致有些变形，还好不影响演示，图中设置了反复播放，真机上只会播放一次）：
1. 首先，自定义View的派生类
** **
1 <div class="line number2 index1 alt1">
2
</div>
<div class="line number3 index2 alt2">
3
</div>
<div class="line number4 index3 alt1">
4
</div>
<div class="line number5 index4 alt2">
5
</div>
<div class="line number6 index5 alt1">
6
</div>
<div class="line number7 index6 alt2">
7
</div>
<div class="line number8 index7 alt1">
8
</div>
<div class="line number9 index8 alt2">
9
</div>
<div class="line number10 index9 alt1">
10
</div>
<div class="line number11 index10 alt2">
11
</div>
<div class="line number12 index11 alt1">
12
</div>
<div class="line number13 index12 alt2">
13
</div>
<div class="line number14 index13 alt1">
14
</div>
<div class="line number15 index14 alt2">
15
</div>
<div class="line number16 index15 alt1">
16
</div>
<div class="line number17 index16 alt2">
17
</div>
<div class="line number18 index17 alt1">
18
</div>
<div class="line number19 index18 alt2">
19
</div>
<div class="line number20 index19 alt1">
20
</div>
<div class="line number21 index20 alt2">
21
</div>
<div class="line number22 index21 alt1">
22
</div>
<div class="line number23 index22 alt2">
23
</div>
<div class="line number24 index23 alt1">
24
</div>
<div class="line number25 index24 alt2">
25
</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2">
`public` `class` `AnimatorView ``extends` `View {`
</div>
<div class="line number2 index1 alt1">
</div>
<div class="line number3 index2 alt2">
` ``private` `Paint mPaint; `
</div>
<div class="line number4 index3 alt1">
` `
</div>
<div class="line number5 index4 alt2">
` ``public` `AnimatorView(Context context) {`
</div>
<div class="line number6 index5 alt1">
` ``super``(context); `
</div>
<div class="line number7 index6 alt2">
` ``initialize();`
</div>
<div class="line number8 index7 alt1">
` ``}`
</div>
<div class="line number9 index8 alt2">
</div>
<div class="line number10 index9 alt1">
` ``public` `AnimatorView(Context context, AttributeSet attrs) {`
</div>
<div class="line number11 index10 alt2">
` ``super``(context, attrs);`
</div>
<div class="line number12 index11 alt1">
` ``initialize();`
</div>
<div class="line number13 index12 alt2">
` ``}`
</div>
<div class="line number14 index13 alt1">
` `
</div>
<div class="line number15 index14 alt2">
` ``public` `AnimatorView(Context context, AttributeSet attrs, ``int` `defStyle) {`
</div>
<div class="line number16 index15 alt1">
` ``super``(context, attrs, defStyle);`
</div>
<div class="line number17 index16 alt2">
` ``initialize();`
</div>
<div class="line number18 index17 alt1">
` ``}`
</div>
<div class="line number19 index18 alt2">
` `
</div>
<div class="line number20 index19 alt1">
` ``protected` `void` `initialize() {`
</div>
<div class="line number21 index20 alt2">
` ``mPaint = ``new` `Paint(); `
</div>
<div class="line number22 index21 alt1">
` ``mPaint.setAntiAlias(``true``);`
</div>
<div class="line number23 index22 alt2">
` ``mPaint.setStyle(Style.FILL); `
</div>
<div class="line number24 index23 alt1">
` ``} `
</div>
<div class="line number25 index24 alt2">
`}`
</div>
</div>
</td>
</tr>
</table>
注： Paint是用来绘图的画笔，可以设置其样式、画面的粗细、填充模式、颜色等等。 2. 定义待绘制的图形数据 待绘制的图形数据一般是在程序中动态给出的，这里为了演示，直接定义好： 1 <div class="line number2 index1 alt1">
2
</div>
<div class="line number3 index2 alt2">
3
</div>
<div class="line number4 index3 alt1">
4
</div>
<div class="line number5 index4 alt2">
5
</div>
<div class="line number6 index5 alt1">
6
</div>
<div class="line number7 index6 alt2">
7
</div>
<div class="line number8 index7 alt1">
8
</div>
<div class="line number9 index8 alt2">
9
</div>
<div class="line number10 index9 alt1">
10
</div>
<div class="line number11 index10 alt2">
11
</div>
<div class="line number12 index11 alt1">
12
</div>
<div class="line number13 index12 alt2">
13
</div>
<div class="line number14 index13 alt1">
14
</div>
<div class="line number15 index14 alt2">
15
</div>
<div class="line number16 index15 alt1">
16
</div>
<div class="line number17 index16 alt2">
17
</div>
<div class="line number18 index17 alt1">
18
</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2">
`public` `class` `AnimatorView ``extends` `View {`
</div>
<div class="line number2 index1 alt1">
</div>
<div class="line number3 index2 alt2">
` ``private` `static` `final` `int` `RECT_WIDTH = ``60``; ``//每个矩形块的宽度`
</div>
<div class="line number4 index3 alt1">
` ``private` `static` `final` `int` `RECT_DISTANCE = ``40``; ``//矩形块之间的间距`
</div>
<div class="line number5 index4 alt2">
` ``private` `static` `final` `int` `TOTAL_PAINT_TIMES = ``100``; ``//控制绘制速度,分100次完成绘制 `
</div>
<div class="line number6 index5 alt1">
</div>
<div class="line number7 index6 alt2">
` ``//待绘制的矩形块矩阵，left为高度，right为颜色`
</div>
<div class="line number8 index7 alt1">
` ``private` `static` `final` `int``[][] RECT_ARRAY = { `
</div>
<div class="line number9 index8 alt2">
` ``{``380``,Color.GRAY},`
</div>
<div class="line number10 index9 alt1">
` ``{``600``,Color.YELLOW},`
</div>
<div class="line number11 index10 alt2">
` ``{``200``,Color.GREEN},`
</div>
<div class="line number12 index11 alt1">
` ``{``450``,Color.RED},`
</div>
<div class="line number13 index12 alt2">
` ``{``300``,Color.BLUE}`
</div>
<div class="line number14 index13 alt1">
` ``}; `
</div>
<div class="line number15 index14 alt2">
` `
</div>
<div class="line number16 index15 alt1">
` ``private` `int` `mPaintTimes = ````; ``//当前已经绘制的次数`
</div>
<div class="line number17 index16 alt2">
</div>
<div class="line number18 index17 alt1">
`}`
</div>
</div>
</td>
</tr>
</table>
3. 重载onDraw()函数，实现绘制 ** ** 1 <div class="line number2 index1 alt1">
2
</div>
<div class="line number3 index2 alt2">
3
</div>
<div class="line number4 index3 alt1">
4
</div>
<div class="line number5 index4 alt2">
5
</div>
<div class="line number6 index5 alt1">
6
</div>
<div class="line number7 index6 alt2">
7
</div>
<div class="line number8 index7 alt1">
8
</div>
<div class="line number9 index8 alt2">
9
</div>
<div class="line number10 index9 alt1">
10
</div>
<div class="line number11 index10 alt2">
11
</div>
<div class="line number12 index11 alt1">
12
</div>
<div class="line number13 index12 alt2">
13
</div>
<div class="line number14 index13 alt1">
14
</div>
<div class="line number15 index14 alt2">
15
</div>
<div class="line number16 index15 alt1">
16
</div>
<div class="line number17 index16 alt2">
17
</div>
<div class="line number18 index17 alt1">
18
</div>
<div class="line number19 index18 alt2">
19
</div>
<div class="line number20 index19 alt1">
20
</div>
<div class="line number21 index20 alt2">
21
</div>
<div class="line number22 index21 alt1">
22
</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2">
`public` `class` `AnimatorView ``extends` `View {`
</div>
<div class="line number2 index1 alt1">
</div>
<div class="line number3 index2 alt2">
` ``@Override`
</div>
<div class="line number4 index3 alt1">
` ``protected` `void` `onDraw(Canvas canvas) {`
</div>
<div class="line number5 index4 alt2">
</div>
<div class="line number6 index5 alt1">
` ``mPaintTimes++;`
</div>
<div class="line number7 index6 alt2">
` `
</div>
<div class="line number8 index7 alt1">
` ``for``( ``int` `i=````; i<RECT_ARRAY.length; i++ ) {`
</div>
<div class="line number9 index8 alt2">
` `
</div>
<div class="line number10 index9 alt1">
` ``mPaint.setColor(RECT_ARRAY[i][``1``]);`
</div>
<div class="line number11 index10 alt2">
` `
</div>
<div class="line number12 index11 alt1">
` ``int` `paintXPos = i*(RECT_WIDTH+RECT_DISTANCE) + RECT_DISTANCE; `
</div>
<div class="line number13 index12 alt2">
` ``int` `paintYPos = RECT_ARRAY[i][````]/TOTAL_PAINT_TIMES*mPaintTimes;`
</div>
<div class="line number14 index13 alt1">
` `
</div>
<div class="line number15 index14 alt2">
` ``canvas.drawRect(paintXPos, getHeight(), paintXPos+RECT_WIDTH,getHeight()-paintYPos, mPaint);`
</div>
<div class="line number16 index15 alt1">
` ``} `
</div>
<div class="line number17 index16 alt2">
` `
</div>
<div class="line number18 index17 alt1">
` ``if``( mPaintTimes < TOTAL_PAINT_TIMES ) {`
</div>
<div class="line number19 index18 alt2">
` ``invalidate(); ``//实现动画的关键点 `
</div>
<div class="line number20 index19 alt1">
` ``} `
</div>
<div class="line number21 index20 alt2">
` ``}`
</div>
<div class="line number22 index21 alt1">
`}`
</div>
</div>
</td>
</tr>
</table>
（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 <div class="line number2 index1 alt1">
2
</div>
<div class="line number3 index2 alt2">
3
</div>
<div class="line number4 index3 alt1">
4
</div>
<div class="line number5 index4 alt2">
5
</div>
<div class="line number6 index5 alt1">
6
</div>
<div class="line number7 index6 alt2">
7
</div>
<div class="line number8 index7 alt1">
8
</div>
<div class="line number9 index8 alt2">
9
</div>
<div class="line number10 index9 alt1">
10
</div>
<div class="line number11 index10 alt2">
11
</div>
<div class="line number12 index11 alt1">
12
</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2">
`public` `class` `MainActivity ``extends` `Activity {`
</div>
<div class="line number2 index1 alt1">
</div>
<div class="line number3 index2 alt2">
` ``private` `AnimatorView mAnimatorView;`
</div>
<div class="line number4 index3 alt1">
` `
</div>
<div class="line number5 index4 alt2">
` ``@Override`
</div>
<div class="line number6 index5 alt1">
` ``protected` `void` `onCreate(Bundle savedInstanceState) {`
</div>
<div class="line number7 index6 alt2">
` ``super``.onCreate(savedInstanceState);`
</div>
<div class="line number8 index7 alt1">
` `
</div>
<div class="line number9 index8 alt2">
` ``mAnimatorView = ``new` `AnimatorView(``this``);`
</div>
<div class="line number10 index9 alt1">
` ``setContentView(mAnimatorView);`
</div>
<div class="line number11 index10 alt2">
` ``}`
</div>
<div class="line number12 index11 alt1">
`}`
</div>
</div>
</td>
</tr>
</table>
当然，也可以把该View放到layout文件中，这里就不赘述了。 ** 5. 小结** 自定义带动画的View就介绍到这里了，关键在于掌握onDraw()的重写和invalidate()的调用，完整的代码见文章最后的附件 转自：http://ticktick.blog.51cto.com/823160/1545863
|
|
|
|
💬 评论