Android自定义View————自定义数据绘制饼状图

重写View中的OnDraw()方法，进行统计图的绘制。

绘制基础

• canvas： 非常重要的类，里面有很多绘制类，画线、画圆、画矩形、画扇形等。同时也是重要的辅助类，辅助进行裁切以及画面的几何变换。
  drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint) 绘制图片
  drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)绘制扇形、弧线等
  drawCircle(float cx, float cy, float radius, Paint paint)绘制圆
  drawColor(int color)画布上色
  …
• paint：也很重要，算是绘制风格。不只是设置颜色、线条粗心、填充、边框等，还可以设置风格、特效。
  Paint.setStyle(Style style) 设置绘制模式
  Paint.setColor(int color) 设置颜色
  Paint.setStrokeWidth(float width) 设置线条宽度
  Paint.setTextSize(float textSize) 设置文字大小
  …

画布坐标

在 Android 里，每个 View 都有一个自己的坐标系，彼此之间是不影响的。这个坐标系的原点是 View 左上角的那个点；水平方向是 x 轴，右正左负；竖直方向是 y 轴，下正上负。

获取屏幕中心点坐标：

centerX = getResources().getDisplayMetrics().widthPixels/2;
centerY = getResources().getDisplayMetrics().heightPixels/2;

重写方法onDraw(Canvas canvas)

在这个方法拿到canvas对象，可以进行绘制。

Paint paint = new Paint();
@Override
protected void onDraw(Canvas canvas) {
     
    super.onDraw(canvas);
    // 绘制一个圆
    canvas.drawCircle(300, 300, 200, paint);
}

首先，我们需要计算各个数据在饼状图中占的角度，以及我们为各个数据设置的颜色。然后根据角度去绘制相应的扇形，并根据颜色设置绘制的paint。

drawArc() 中left, top, right, bottom 描述的是这个弧形所在的椭圆（圆）；startAngle 是弧形的起始角度（x 轴的正向，即正右的方向，是 0 度的位置；顺时针为正角度，逆时针为负角度），sweepAngle 是弧形划过的角度；useCenter 表示是否连接到圆心，如果不连接到圆心，就是弧形，如果连接到圆心，就是扇形。

useCenter 这里需要true

显然我们需要每绘制完一个扇形就要重新计算起始角度。其他的没什么逻辑了。

绘制案例：一个简单的view

本人写了一个简单的view，包括饼状图和图例部分。

定义数据， 数据以及圆心角度数

    private HashMap<String , Float> DataDegree(){
   
        HashMap<String , Float> data = new HashMap<>();
        data.put("苹果", 30f);
        data.put("西瓜", 41f);
        data.put("香蕉", 59f);
        data.put("脐橙", 80f);
        data.put("菠萝",140f);
        return data;
    }

定义数据颜色

@RequiresApi(api = Build.VERSION_CODES.O)
    private HashMap<String , String> DataColor(){
   
        HashMap<String , String> data = new HashMap<>();
        data.put("苹果", "#6600ff");
        data.put("西瓜", "#cc00ff");
        data.put("香蕉","#9933ff");
        data.put("脐橙", "#ff9900");
        data.put("菠萝","#9999ff");
        return data;
    }

绘制图例部分

@RequiresApi(api = Build.VERSION_CODES.O)
    private void drawPieChartAnno() {
   
        HashMap<String , Float> dataDegree = DataDegree();
        HashMap<String , String> dataColor = DataColor();

        int left = 30;
        int right = 150;
        int top = 30;
        int rectHeight = 80;
        int bottom = top+rectHeight;
        int blank = 30;

        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setTextSize(50);
        for(String key : dataDegree.keySet()){
   
            mPaint.setColor(Color.parseColor(dataColor.get(key)));
            mCanvas.drawRect(left,top,right,bottom,mPaint);
            mPaint.setColor(Color.DKGRAY);
            mCanvas.drawText(key+":"+ new DecimalFormat("#.00")