简单绘制饼状图

简单绘制饼状图

线上图吧

绘制简单的view主要就是onDraw方法

几个思路简单分析：

1.我们可以绘制几个扇形，然后把扇形拼到一起就是一个圆形的饼图了。

2.我们也可以绘制一个圆形，然后在圆形绘制半径出来。

如上方案很多，简单的view是如此，复杂的view可以拆分成简单的来处理，这样就不会摸不到头脑了。

---

下面介绍方案1的方法：

1.首先绘制饼图我们需要先确定基础的东西，如：圆心、半径等

@Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        mTotalWidth = w - getPaddingLeft() - getPaddingRight();        mTotalHeight = h - getPaddingTop() - getPaddingBottom();        mRadius = (float) (Math.min(mTotalWidth, mTotalHeight) / 2 * 0.6);        //调整,mRadius半径啊        rectF.left = -mRadius;        rectF.top = -mRadius;        rectF.right = mRadius;        rectF.bottom = mRadius;    }

2.既然绘制饼图，目的是数据分布情况，这里就开始进行分份了

//这里是把你传进来数据，进行汇总，后面会看每份数据占比，然后在对应到饼图上 for (int i = 0; i < mDataList.size(); i++) {            totalNumber += mDataList.get(i).getRatio();        }if (totalNumber!=0) {            //移动画布            canvas.translate(mTotalWidth/2,mTotalHeight/2);            //绘制开始的方法            mydrawArc(canvas, rectF);        }

3.正式开始绘制的流程，其实很简单的

private void mydrawArc(Canvas canvas, RectF rectF) {  //开始绘制的角度，其实从什么角度都可以  startAngle = 0;  //这是我自己在外围绘制了一个圈 canvas.drawCircle(0,0, mRadius+5, paintCircle);  //下面循环绘制每个扇形区域了  for (int i = 0; i < mDataList.size(); i++) {    //获取传入数据的值，并计算占多少弧度     float ratio = mDataList.get(i).getRatio();     float sweepAngle = (ratio / totalNumber) * 360;//绘制扇形了           paint.setColor(Color.parseColor(mDataList.get(i).getColor()));            canvas.drawArc(rectF, startAngle, sweepAngle, true, paint);    //计算扇形中间的坐标值，用于绘制引出线来显示占比多少     float pxs = (float) (mRadius * Math.cos(Math.toRadians(startAngle + sweepAngle / 2)));      float pys = (float) (mRadius * Math.sin(Math.toRadians(startAngle + sweepAngle / 2)));      float pxt = (float) ((mRadius + 20) * Math.cos(Math.toRadians(startAngle + sweepAngle / 2)));      float pyt = (float) ((mRadius + 20) * Math.sin(Math.toRadians(startAngle + sweepAngle / 2)));    //这里绘制的是引出线    canvas.drawLine(pxs, pys, pxt, pyt, paintLine);    //用于比较引出线的朝向      endAngle=startAngle+sweepAngle/2;    //显示占比多少的数字     String format = String.format("%.2f", (ratio / totalNumber)*100);       float v = paintText.measureText(format + "%");        //这里绘制的是引出线，绘制上数字            if (endAngle>90&&endAngle<270) {                canvas.drawLine(pxt, pyt, pxt-20, pyt, paintLine);                canvas.drawText(format + "%", pxt-20-v, pyt, paintText);            }else {                canvas.drawLine(pxt, pyt, pxt+20, pyt, paintLine);                canvas.drawText(format + "%", pxt+20, pyt, paintText);            }            //更新其实的角度            startAngle += sweepAngle;        }    }

如上基本完成了整个的绘制流程

结语

自己定义view其实并没有多难，只要你开始做，你就一定可以。

源码在此

http://download.csdn.net/download/shayubuhuifei/9938406