安卓(Android)开发之自定义饼状图

先来看看效果图

先分析饼状图的构成，非常明显，饼状图就是一个又一个的扇形构成的，每个扇形都有不同的颜色，对应的有名字，数据和百分比。

经以上信息可以得出饼状图的最基本数据应包括：名字 数据值 百分比 对应的角度 颜色。

用户关心的数据 ： 名字 数据值 百分比

需要程序计算的数据： 百分比 对应的角度

其中颜色这一项可以用户指

public class PieData {

private String name;  // 名字
 private float value;  // 数值
 private float percentage; // 百分比

private int color = 0;  // 颜色
 private float angle = 0; // 角度

public PieData(@NonNull String name, @NonNull float value) {
  this.name = name;
  this.value = value;
 }
}

自定义View：

先按照自定义View流程梳理一遍(确定各个步骤应该做的事情)：

代码如下： 

public class PieView extends View {
 // 颜色表
 private int[] mColors = {0xFFCCFF00, 0xFF6495ED, 0xFFE32636, 0xFF800000, 0xFF808000, 0xFFFF8C69, 0xFF808080,
   0xFFE6B800, 0xFF7CFC00};
 // 饼状图初始绘制角度
 private float mStartAngle = 0;
 // 数据
 private ArrayList<PieData> mData;
 // 宽高
 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);
 }

@Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  mWidth = w;
  mHeight = h;
 }

@Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  if (null == mData)
   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 < mData.size(); i++) {
   PieData pie = mData.get(i);
   mPaint.setColor(pie.getColor());
   canvas.drawArc(rect, currentStartAngle, pie.getAngle(), true, mPaint);
   currentStartAngle += pie.getAngle();
  }

}

// 设置起始角度
 public void setStartAngle(int mStartAngle) {
  this.mStartAngle = mStartAngle;
  invalidate(); // 刷新
 }

// 设置数据
 public void setData(ArrayList<PieData> mData) {
  this.mData = mData;
  initDate(mData);
  invalidate(); // 刷新
 }

// 初始化数据
 private void initDate(ArrayList<PieData> mData) {
  if (null == mData || mData.size() == 0) // 数据有问题 直接返回
   return;

float sumValue = 0;
  for (int i = 0; i < mData.size(); i++) {
   PieData pie = mData.get(i);

sumValue += pie.getValue();  //计算数值和

int j = i ％ mColors.length;  //设置颜色
   pie.setColor(mColors[j]);
  }

float sumAngle = 0;
  for (int i = 0; i < mData.size(); i++) {
   PieData pie = mData.get(i);

float percentage = pie.getValue() / sumValue; // 百分比
   float angle = percentage * 360;     // 对应的角度

pie.setPercentage(percentage);     // 记录百分比
   pie.setAngle(angle);       // 记录角度大小
   sumAngle += angle;

Log.i("angle", "" + pie.getAngle());
  }
 }

注意：在更改了数据需要重绘界面时要调用invalidate()这个函数重新绘制。