Android开发实践：自定义带动画的View-创新互联

前面两篇文章介绍了自定义View的onMeasure和onLayout原理，本文准备介绍自定义View的第三个关键部分，即onDraw()函数的重载。

  对于一个自定义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
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
            

            网站栏目：Android开发实践：自定义带动画的View-创新互联            

            文章URL：http://cqcxhl.com/article/egcsi.html