自定义ArcView-构造拓展性高的view

这段时间用做一个飞行统计的模块，其中要做一个弧形展示效果，如图

做这个东西时，我们首先想到的是有没有现成的。于是就去github上找，找到了这个--https://github.com/lzyzsd/CircleProgress，大家有兴趣也可以去研究研究。本文参考的是其中的ArcProgress。其原理就是画弧和画字。。原理图：

先说画弧：

关键代码为： canvas.drawArc(rectF, startAngle, entityAngle, false, paint);

其中rectF为最外面的矩阵，startAngle为绘弧的开始角度，entityAngle为要画弧的最大值，false为不包含圆心，paint为画笔。

其次画字：

float bottomTextBaseline = getMeasuredHeight() - textPaint.descent(); 底部文字的基线
 canvas.drawText(bottomText, (getMeasuredWidth() - textPaint.measureText(bottomText)) / 2.0f, bottomTextBaseline, textPaint);

第一个参数为要画的文字，第二个参数为画字的起始x坐标，第三个为y坐标，第四个参数为文字画笔。

画字时的规则：参考http://blog.csdn.net/tianjf0514/article/details/7642656

接下来开始自定义我们的ArcView了，首先自定义属性，这个没什么可说的：

public ArcView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.Arc);
        this.radius = ta.getDimensionPixelSize(R.styleable.Arc_radius,0);
        this.entityAngle = ta.getInt(R.styleable.Arc_entity_angle, DEFAULT_ENTITY_ANGLE);
        this.initPercent = ta.getInt(R.styleable.Arc_init_percent,0);   //初始的百分值

        init(context);
    }

关键是测量我们的view的大小。一般来说，我们画的东西要在这个view可见范围内的中心。在onMeasure（）方法中要计算出rectF（弧形的矩阵）。

上代码：

<pre name="code" class="java">protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        Log.e("arcView","onMeasure");
        //整个内容的宽度
        int contentWidth = (int) (radius * 2 + out_stroke_width);

        //下面计算内容的高度
        float halfTemp = out_stroke_width / 2;
        float angle = (360 - entityAngle) / 2f;
        arcBottom2CenterHeight = (float) (radius * Math.cos(angle / 180 * Math.PI));
        int contentHeight = (int) (radius + arcBottom2CenterHeight + textPaint.descent() + out_stroke_width);

        setMeasuredDimension(resolveSize(contentWidth,widthMeasureSpec),resolveSize(contentHeight,heightMeasureSpec));

        float contentLeft,contentTop,contentRight,contentBottom;    //矩阵的左右上底


        if(getMeasuredWidth() == contentWidth){
            contentLeft = halfTemp;
            contentRight = contentWidth - halfTemp;
        }else{
            contentLeft = (getMeasuredWidth() - contentWidth) / 2 + halfTemp;
            contentRight = contentLeft + contentWidth - 2 * halfTemp;
        }

        if(getMeasuredHeight() == contentHeight){
            contentTop = halfTemp;
            contentBottom = contentWidth - halfTemp;
        }else{
            contentTop = (getMeasuredHeight() - contentHeight) / 2 + halfTemp;
            contentBottom = contentTop + contentWidth - 2 * halfTemp;
        }

        rectF = new RectF(contentLeft,contentTop,contentRight,contentBottom);
    }

接下来是ondraw方法：

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.e("arcView","draw"); //锁屏解锁后会再次调用ondraw（）方法
        canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG));
        paint.setStrokeWidth(default_stroke_width);

        paint.setColor(unfinishedStrokeColor);
        canvas.drawArc(rectF, startAngle, entityAngle, false, paint);
        paint.setStrokeWidth(out_stroke_width);
        paint.setColor(finishedStrokeColor);
        canvas.drawArc(rectF, startAngle, initSweepAngle, false, paint);

        //画下面文字
        textPaint.setTextSize(default_gray_text_size);
        textPaint.setColor(default_gray_text_color);
        float bottomTextBaseline = getMeasuredHeight() - textPaint.descent();
        canvas.drawText(bottomText, (getMeasuredWidth() - textPaint.measureText(bottomText)) / 2.0f, bottomTextBaseline, textPaint);

        //画上面文字
        float topTextBaseline = radius / 2 + out_stroke_width / 2;
        canvas.drawText(topText,(getMeasuredWidth() - textPaint.measureText(topText)) / 2.0f,topTextBaseline,textPaint);

        //画中心文字
        textPaint.setTextSize(default_percent_text_size);
        textPaint.setColor(default_percent_text_color);
        float centerTextBaseline = getMeasuredHeight() / 2 - textPaint.ascent() / 2;
        canvas.drawText(centerText,(getMeasuredWidth() - textPaint.measureText(centerText)) / 2.0f,centerTextBaseline,textPaint);

    }

手机锁屏后再亮屏，view的ondraw方法会调用，从下一个activity返回也会调用，结果是view可见是会调用ondraw（）方法。

最后重写onSaveInstanceState和onRestoreInstanceState来保存和恢复数据

protected Parcelable onSaveInstanceState() {
        Log.e("arcView","onSaveInstanceState");
        Bundle bundle = new Bundle();
        bundle.putParcelable(INSTANCE_STATE, super.onSaveInstanceState());
        bundle.putFloat(INSTANCE_PROGRESS, initSweepAngle);
        return bundle;
    }

    @Override
    protected void onRestoreInstanceState(Parcelable state) {
        Log.e("arcView","onRestoreInstanceState");
        if(state instanceof Bundle) {
            Bundle bundle = (Bundle) state;
            initSweepAngle = bundle.getFloat(INSTANCE_PROGRESS,0);
            super.onRestoreInstanceState(bundle.getParcelable(INSTANCE_STATE));
            return;
        }
        super.onRestoreInstanceState(state);
    }

我们有可能显示百分数时需要一个animate过程，上代码：

/*第一中方式实现animatePercent
    private OverScroller scroller;
    public void animatePercent(int percent){
        if(scroller.isFinished()) {
            scroller.startScroll(0, 0, percent, 0, 2000);
//        scroller.fling(0,0,500,0,0,100,0,0);
            invalidate();
        }
    }

    @Override
    public void computeScroll() {
        if(scroller.computeScrollOffset()){
            int tempPercent = scroller.getCurrX();
            setPercent(tempPercent);
        }
        super.computeScroll();
    }
    */

    private final int ANIMATE_DURATION = 1000;
    private static final int SIXTY_FPS_INTERVAL = 1000 / 60;
    private long mStartTime;
    static final android.view.animation.Interpolator sInterpolator = new OvershootInterpolator();
    public void animatePercent(final int percent){
        mStartTime = System.currentTimeMillis();
        this.post(new Runnable() {
            @Override
            public void run() {
                float t = interpolate();
                float currentPercent = 0 + t * percent;
                setPercent(currentPercent);
                if(t < 1){
                    ArcView.this.postDelayed(this,SIXTY_FPS_INTERVAL);
                }
            }
        });
    }

    private float interpolate() {
        float t = 1f * (System.currentTimeMillis() - mStartTime) / ANIMATE_DURATION;
        t = Math.min(1f,t);
        return sInterpolator.getInterpolation(t);
    }

第一种方式在结束时有点卡顿的现象，不知道你们的手机有没有。我推荐第二种，当然了，我们也可以用属性动画来实现。

最后是效果图

源码：

http://yunpan.cn/cdgSG2ii4CzKh （提取码：560b）