自定义饼状图控件PieView

本篇参考：GcsSloop的安卓自定义View进阶-Canvas之绘制图形

一、分析如上饼状图，所需要得信息如下

1. 各块的颜色
2. 所有块量得总和
3. 各个块得量占总量的百分比，并通过百分比得到各个块所占扇形的弧度
4. 第一个块得起始角度
5. 该 View 控件的宽高及位置

二、具体控件逻辑

1. javabean

   public class PieData {
       // 用户操作数据
       private String name;        // 名字
       private float value;        // 数值
       private float percentage;   // 百分比
       
       // 非用户操作数据
       private int color = 0;      // 颜色
       private float angle = 0;    // 角度
   
       public PieData(String name, float value) {
           this.name = name;
           this.value = value;
       }
   
   	... // set/get省略
   }
   

2. 自定义PieView

   public class PieView extends View {
       // 1. 各块的颜色
       private int[] mColors = {0xFFCCFF00, 0xFF6495ED, 0xFFE32636, 0xFF800000, 0xFF808000, 0xFFFF8C69, 0xFF808080, 0xFFE6B800, 0xFF7CFC00};
       // 2. 第一块的初始角度
       private float mStartAngle = 180;
       // 数据集合
       private ArrayList<PieData> mDatas;
       // 控件宽高
       private int mWidth, mHeight;
       // 画笔
       private Paint mPaint = new Paint();
   
       public PieView(Context context) {
           this(context, null);
       }
   
       public PieView(Context context, AttributeSet attrs) {
           super(context, attrs);
           mPaint.setStyle(Paint.Style.FILL);
           mPaint.setAntiAlias(true);
       }
   
       // 记录当前View控件的宽高
       @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) {
           super.onSizeChanged(w, h, oldw, oldh);
           mWidth = w;
           mHeight = h;
       }
   
       // 设置起始角度并刷新界面
       public void setStartAngle(int mStartAngle) {
           this.mStartAngle = mStartAngle;
           invalidate();
       }
   
       // 设置数据并刷新界面
       public void setData(ArrayList<PieData> mData) {
           this.mDatas = mData;
           initData(mData);
           invalidate();
       }
   
   	// 饼状图中数据的处理
       float sumValue = 0;       // 所有块的数据总量
       float piePercentage = 0;  // 各块占数据总量的百分比
       float sumAngle = 0;       // 所有块占的总扇形角度
       float pieAngle = 0;       // 各块占的扇形角度
       private void initData(ArrayList<PieData> mDatas) {
           // 判空
           if (null == mDatas || mDatas.size() == 0) {
               return;
           }
   
           for (int i = 0; i < mDatas.size(); i++) {
               PieData pie = mDatas.get(i);
   
               // 1. 设置各块颜色
               int j = i % mColors.length;
               pie.setColor(mColors[j]);
   
               // 2. 统计所有块的数据总量
               sumValue += pie.getValue();
   
               // 3. 计算各块量占总量的百分比
               piePercentage = pie.getValue() / sumValue;
   
               // 4. 通过各块量的占比计算所占扇形角度
               pieAngle = piePercentage * 360;
   
               pie.setPercentage(piePercentage);
               pie.setAngle(pieAngle);
               sumAngle += pieAngle;
           }
       }
   
       @Override protected void onDraw(Canvas canvas) {
           super.onDraw(canvas);
           // 判空
           if (null == mDatas || mDatas.size() == 0) {
               return;
           }
   
           // 记录当前起始角度
           float currentStartAngle = mStartAngle;
           // 将画布坐标原点移动到中心
           canvas.translate(mWidth / 2, mHeight / 2);
           // 饼状图半径
           float r = (float) (Math.min(mWidth, mHeight) / 2 * 0.8);
           // 确定饼状图绘制的区域
           RectF rect = new RectF(-r, -r, r, r);
   
           for (int i = 0; i < mDatas.size(); i++) {
               PieData pie = mDatas.get(i);
               mPaint.setColor(pie.getColor());
               canvas.drawArc(rect, currentStartAngle, pie.getAngle(), true, mPaint);
               currentStartAngle += pie.getAngle();
           }
       }
   }
   

3. 针对上述部分代码片的图解