扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
前面两篇文章介绍了自定义View的onMeasure和onLayout原理,本文准备介绍自定义View的第三个关键部分,即onDraw()函数的重载。
创新互联公司主营城中网站建设的网络公司,主营网站建设方案,app软件定制开发,城中h5小程序开发搭建,城中网站营销推广欢迎城中等地区企业咨询
对于一个自定义View来说,onMeasure只是用来计算View尺寸,onDraw()才是真正执行View的绘制,所以一般我们都需要重写onDraw()函数来绘制我们期望的UI界面。下面我以一个具体的例子探索自定义View的onDraw()的实现过程和关键点。
我们的目标是制作一个柱状图动画,View的动画启动后,会显示一排柱状图增长的画面,这种动画多用于财务类或者统计类的APP中,效果如图所示(截屏的格式转换过程导致有些变形,还好不影响演示,图中设置了反复播放,真机上只会播放一次):
1. 首先,自定义View的派生类
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. 定义待绘制的图形数据
待绘制的图形数据一般是在程序中动态给出的,这里为了演示,直接定义好:
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()函数,实现绘制
public class AnimatorView extends View { @Override protected void onDraw(Canvas canvas) { mPaintTimes++; for( int i=0; i(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
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文件中,这里就不赘述了。
5. 小结
自定义带动画的View就介绍到这里了,关键在于掌握onDraw()的重写和invalidate()的调用,完整的代码见文章最后的附件,有任何疑问欢迎留言或者来信lujun.hust@gmail.com交流,或者关注我的新浪微博 @卢_俊 获取最新的文章和资讯。
附件:http://down.51cto.com/data/2364810
网站名称:Android开发实践:自定义带动画的View
浏览地址:http://kswjz.com/article/pphdig.html
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流