Android自定义View圆形数据分析器

项目中需要用到自定义圆形的数据分析器效果图如下:

最终的实现效果：

使用Canvas自带的画弧方法就非常容易的实现。
相关方法:

drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint);

弧型在View中的位置和大小，是靠2个对角点确定的。这一点跟绘制矩形相同，而只有这个距离是正方形的时候，绘制出来的弧形才是正圆，不然就成了椭圆。

startAngle参数代表着从多少度开始画，sweepAngle参数代表着要绘制多少度。而useCenter这个boolean参数，绘制出来的弧形差别如下：

当拿到效果图，明白实现思路，准备动手做的时候先根据效果，算出图中的弧形大小所占比例让自定义的View自适应屏幕下图为例:

当然图中的参数不是准确的，随手而来。具体的比例大家自己算好，代码示例:

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    width = getMeasuredWidth();    height = getMeasuredHeight();    float x1 = (float) (width * 0.25);    float x2 = width - x1 ;    float y1 = (float) (height * 0.2);    //圆直径    float circle_width = x2 - x1;    float y2 = y1 + circle_width ;    //中心白圆y    center_y = circle_width / 2 + y1;    //中心白圆半径    radius = width *0.1;    rect = new RectF(x1, y1, x2, y2);}

位置确定好了那就上手画了，代码如下：

@Overrideprotected void onDraw(Canvas canvas) {    super.onDraw(canvas);    mArcPaint.setColor(Color.parseColor("#E7638B"));    canvas.drawArc(rect, 270, 100, true, mArcPaint);    mArcPaint.setColor(Color.parseColor("#62A7FE"));    canvas.drawArc(rect, 10, 130, true, mArcPaint);    mArcPaint.setColor(Color.parseColor("#FBC733"));    canvas.drawArc(rect, 140, 130, true, mArcPaint);    //圆弧空心    mArcPaint.setColor(Color.parseColor("#FFFFFF"));    canvas.drawCircle(width / 2, center_y, radius, mArcPaint);    canvas.save();}

这样绘制出来的view基本和效果图差不多，为了让View方便扩展完善了一下代码，代码如下：

private float startLocal = 270;@Overrideprotected void onDraw(Canvas canvas) {    super.onDraw(canvas);    if(mArcList!=null){    int size = mArcList.size();    for(int i = 0; i < size;i++){    Arc arc = mArcList.get(i);    if(startLocal>360){        startLocal -= 360;    }        if (i == size - 1) {    canvas.drawArc(rect, startLocal, 270-startLocal, true, mArcPaint);    break;    }    float dis = (float) (360*arc.getDis());    mArcPaint.setColor(Color.parseColor(arc.getColor()));    canvas.drawArc(rect, startLocal, dis, true, mArcPaint);    startLocal+=dis;    }    }else {    mAnalysePaint.setColor(Color.parseColor("#D56C8B"));    canvas.drawArc(rect, startLocal, 360, true, mArcPaint);    }    //圆弧空心    mArcPaint.setColor(Color.parseColor("#FFFFFF"));    canvas.drawCircle(width / 2, center_y, radius, mArcPaint);    canvas.save();    startLocal=270;}

代码效果如下:

ArcAnalyser custom_analyser = (ArcAnalyser) findViewById(R.id.custom_analyser);List<Arc> arcList = new ArrayList<>();arcList.add(new Arc(0.2,"#E7638B"));arcList.add(new Arc(0.3,"#62A7FE"));arcList.add(new Arc(0.4,"#FBC733"));arcList.add(new Arc(0.1,"#62A7FE"));custom_analyser.initArc(arcList);

不足之处还请大家指出包涵，可以进一步的完善。
GitHub地址：https://github.com/yangjiechina/ArcAnalyser