Android开发实践:自定义带动画的View

对于一个自定义View来说,onMeasure只是用来计算View尺寸,onDraw()才是真正执行View的绘制,所以一般我们都需要重写onDraw()函数来绘制我们期望的UI界面。下面我以一个具体的例子探索自定义View的onDraw()的实现过程和关键点。

我们的目标是制作一个柱状图动画,View的动画启动后,会显示一排柱状图增长的画面,这种动画多用于财务类或者统计类的APP中,效果如图所示(截屏的格式转换过程导致有些变形,还好不影响演示,图中设置了反复播放,真机上只会播放一次):

Android开发实践:自定义带动画的View

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<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对象提供了各种绘制点、线、矩形、圆、位图的方法,基本可以满足各种绘制要求。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/4f7a05e58eefc7c3518dfa26156ff5b1.html