Android自定义饼状图

参考资料https://juejin.im/entry/57562b6e207703006c077008
http://www.voidcn.com/blog/u012209506/article/p-6322942.html

效果图

饼状图.png

代码

package com.zsl.aa.PieChart;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

import java.util.List;


/**
 * 自定义饼状图
 * Created by zhangshuliang on 2017/8/1.
 */

public class PieChart extends View {

    private int width, height;

    private List<PieChartData> values;

    private int[] colors = {0xff1eb1ed, 0xfffdbf2d, 0xfffc0d1b};

    private float startAngle = 0; // 开始角度

    private Paint paint = new Paint();

    private float R, r, middleR;  // 圆半径

    private int radius = 55;

    private float sumValue = 0;

    private Paint textPaint; // 画图例文字

    private Paint lablePaint; // 饼块上文字

    private int rightOffset; // 圆从中心向右的偏移量

    private float legendX; // 图例第一个小矩形左上点坐标

    private float legendY;

    // 饼块中文字相关
    private float textWidthHalf;

    private float textHeightHalf;

    private float x;

    private float y;



    public PieChart(Context context) {
        this(context, null);
    }

    public PieChart(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PieChart(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.FILL);

        textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setColor(Color.parseColor("#000000"));
        textPaint.setTextSize(34);

        lablePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        lablePaint.setColor(Color.BLACK);
        lablePaint.setTextSize(28);

        R = dip2px(context, radius);
        r = dip2px(context, radius - 27);
        middleR = dip2px(context, radius - 20);

        rightOffset = dip2px(context, 60);

        legendX = dip2px(context, -110);
        legendY = dip2px(context, -27);

        int textWidth = getTextWidth(textPaint, "30");
        int textHeight = getTextHeight(textPaint, "30");

        textWidthHalf = textWidth / 2 - 3;
        textHeightHalf = textHeight / 2 - 3;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        width = MeasureSpec.getSize(widthMeasureSpec);
        height = MeasureSpec.getSize(heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (values == null) return;
        float currentAngle = startAngle;     // 当前角度
        canvas.translate(width / 2, height / 2);  // 圆心移动到屏幕中心点
        RectF rect = new RectF(-R + rightOffset, -R, R + rightOffset, R);   // 圆的外切矩形
        if (sumValue == 0) {
            paint.setColor(Color.parseColor("#cccccc"));
            canvas.drawCircle(0, 0, R, paint);
        } else {
            float textAngle;
            for (int i = 0; i < values.size(); i++) {
                PieChartData pie = values.get(i);
                paint.setColor(pie.getColor());
                canvas.drawArc(rect, currentAngle, pie.getAngle(), true, paint);

                textAngle = currentAngle + pie.getAngle() / 2;
                drawPieLable(textAngle);

                canvas.drawText("" + pie.getValue(), x, y, lablePaint);
                currentAngle += pie.getAngle();
            }
        }

        // 中间圆和最小圆
        paint.setColor(Color.parseColor("#aaffffff"));
        canvas.drawCircle(rightOffset, 0, middleR, paint);
        paint.setColor(Color.WHITE);
        canvas.drawCircle(rightOffset, 0, r, paint);

        drawLegend(canvas);

    }


    // 画每个饼块的文字
    private void drawPieLable(float textAngle) {
        float percent = 0.85f;
        if (textAngle >= 0 && textAngle < 90) {
            x = (float) (percent * R * Math.cos(Math.toRadians(textAngle))) + rightOffset - textWidthHalf;
            y = (float) (percent * R * Math.sin(Math.toRadians(textAngle))) + textHeightHalf;
        } else if (textAngle >= 90 && textAngle <= 180) {
            x = (float) (-0.75 * R * Math.cos(Math.toRadians(180 - textAngle))) + rightOffset - textWidthHalf;
            y = (float) (percent * R * Math.sin(Math.toRadians(180 - textAngle))) + textHeightHalf;
        } else if (textAngle > 180 && textAngle <= 270) {
            x = (float) (-percent * R * Math.cos(Math.toRadians(textAngle - 180))) + rightOffset - textWidthHalf;
            y = (float) (-percent * R * Math.sin(Math.toRadians(textAngle - 180))) + textHeightHalf;
        } else {
            x = (float) (percent * R * Math.cos(Math.toRadians(360 - textAngle))) + rightOffset - textWidthHalf;
            y = (float) (-percent * R * Math.sin(Math.toRadians(360 - textAngle))) + textHeightHalf;
        }
    }


    // 画图例
    private void drawLegend(Canvas canvas) {
        RectF rectF1 = new RectF(legendX, legendY, legendX + 30, legendY + 30);
        paint.setColor(colors[0]);
        canvas.drawRect(rectF1, paint);

        RectF rectF2 = new RectF(legendX, legendY + 70, legendX + 30, legendY + 100);
        paint.setColor(colors[1]);
        canvas.drawRect(rectF2, paint);

        RectF rectF3 = new RectF(legendX, legendY + 140, legendX + 30, legendY + 170);
        paint.setColor(colors[2]);
        canvas.drawRect(rectF3, paint);


        canvas.drawText("有效完成次数", legendX + 50, legendY + 27, textPaint);
        canvas.drawText("无效完成次数", legendX + 50, legendY + 97, textPaint);
        canvas.drawText("逾期未办次数", legendX + 50, legendY + 167, textPaint);
    }


    // 设置起始角度
    public void setStartAngle(float startAngle) {
        this.startAngle = startAngle;
        invalidate();
    }


    // 设置数据源
    public void setValues(List<PieChartData> values) {
        this.values = values;
        initData(values);
        invalidate();
    }


    // 整合数据
    private void initData(List<PieChartData> values) {
        if (values == null || values.size() == 0) {
            return;
        }

        for (int i = 0; i < values.size(); i++) {
            PieChartData pieData = values.get(i);
            sumValue += pieData.getValue();  // 求和
            pieData.setColor(colors[i]);   // 设置颜色
        }

        for (int i = 0; i < values.size(); i++) {
            PieChartData pieData = values.get(i);

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

            pieData.setPersent(percentage);
            pieData.setAngle(angle);
        }
    }


    public int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    private int getTextHeight(Paint paint, String text) {
        Rect rect = new Rect();
        paint.getTextBounds(text, 0, text.length(), rect);
        return rect.height();
    }


    private int getTextWidth(Paint paint, String text) {
        return (int) paint.measureText(text);
    }
}

图的难点就在于饼块上文字的绘制，但是只要你理清了逻辑思路也就不难了，剩下的就是精细雕琢了

饼图文字坐标点位置确定.jpg