Android自定义View之饼饼图

我们在设计图表的时候，有可能就会用到饼图。今天浏览网页无意发现了饼图，于是就想自己也设计一个，说干就干。以为很简单，还是有点费事，有想过放弃。但半途而废不是我的风格，就坚持写了下去。最后花了几个小时写出来了，还是有点小小的成绩感。饼图可以随你定制，来看看效果图：

我们一起来看看设计流程：

onDraw

如果你对自定义View还不是很了解，请阅读Android自定义View基础篇系列这里就略过onMeasure，直接来讲一下onDraw。如果你自定义View高手，也请略过本文。

首先我们得根据每块饼占整个圆的比例，来画圆弧。

  RectF mRectF = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius);

  canvas.drawArc(mRectF, startAngle, mList.get(i).percent / total * 360f, false, arcPaint);

这里得讲讲RectF与Rect区别，他们同样都是画矩形，区别在于F（浮点数）上面，RectF坐标点是float(浮点型)，Rect坐标点是int(整形)。那么PointF与Point一个道理。

mList.get(i).percent 表示每块饼的数值，total 表示所有饼数值之和。画完前一块饼圆弧，接着上一块圆弧的弧度接着画下一块圆弧。那么startAngle就是前面圆弧累和。

  startAngle += mList.get(i).percent / total * 360f;

每块的圆弧就画好了，接下来画每块圆弧间隔的直线，canvas.drawLine(startX,startY,stopX,stopY,mPaint);变量分别有开始坐标和结束坐标。

        float stopX = (float) (centerX + (radius + arcPaint.getStrokeWidth() / 2) * Math.cos(Math.toRadians(startAngle)));
        float stopY = (float) (centerY + (radius + arcPaint.getStrokeWidth() / 2) * Math.sin(Math.toRadians(startAngle)));
        float startX = (float) (centerX + (radius - arcPaint.getStrokeWidth() / 2) * Math.cos(Math.toRadians(startAngle)));
        float startY = (float) (centerY + (radius - arcPaint.getStrokeWidth() / 2) * Math.sin(Math.toRadians(startAngle)));
        PointF startPoint = new PointF(startX, startY);
        PointF stopPoint = new PointF(stopX, stopY);

加号表示外接点的坐标，减号表示内接点坐标。

        for (PointF[] fp : pointFs) {
            canvas.drawLine(fp[0].x, fp[0].y, fp[1].x, fp[1].y, linePaint);
        }

这样间隔直线就画好了，最后完成文字的绘画，绘画文字的点位于每块圆弧的中心点，那么主要就是计算每块圆弧的中心点坐标。首先获取每块圆弧中心点距离原始点的弧度：

 textAngle = startAngle + mList.get(i).percent / total * 360f / 2; 

知道弧度了，就可以获取坐标点了：

        float textPointX = (float) (centerX + radius * Math.cos(Math.toRadians(textAngle)));
        float textPointY = (float) (centerY + radius * Math.sin(Math.toRadians(textAngle)));

然后就是绘制文本了：

        for (int i = 0; i < textList.size(); i++) {
            textPaint.setTextAlign(Paint.Align.CENTER);
            String text = mList.get(i).content;
            canvas.drawText(text, textList.get(i).x, textList.get(i).y, textPaint);
            }

最后就是绘制符号了，位于文字的正下方，那么我们需要知道文本的高度：

 Paint.FontMetrics fm = textPaint.getFontMetrics();
 int height=fm.descent - fm.ascent;
  canvas.drawText(format.format(mList.get(i).percent * 100 / total) + "%", textList.get(i).x, textList.get(i).y + height, textPaint);

到这里大体上就完成了饼图的制作，是不是很容易。下面我贴下源码，感兴趣的同学可以自行烤到自己项目中，动一动你的手指5分钟集成饼图：

package com.github.ws.cakeviewdemo.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PointF;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.WindowManager;

import com.github.ws.cakeviewdemo.bean.BaseMessage;

import java.text.DecimalFormat;
import java.util.ArrayList;
import java.util.List;

/** * Created by Administrator on 4/20 0020. */
public class CakeView extends View {

    private Context ctx;
    private DecimalFormat format;
    private List<BaseMessage> mList;

    private Paint arcPaint;
    private Paint linePaint;
    private Paint textPaint;

    private float centerX;
    private float centerY;
    private float radius;
    private float total;
    private float startAngle;
    private float textAngle;

    private List<PointF[]> lineList;
    private List<PointF> textList;

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

    public CakeView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CakeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        this.ctx = context;
        this.lineList = new ArrayList<>();
        this.textList = new ArrayList<>();
        this.mList = new ArrayList<>();
        this.format = new DecimalFormat("##0.00");

        this.arcPaint = new Paint();
        this.arcPaint.setAntiAlias(true);
        this.arcPaint.setDither(true);
        this.arcPaint.setStyle(Paint.Style.STROKE);

        this.linePaint = new Paint();
        this.linePaint.setAntiAlias(true);
        this.linePaint.setDither(true);
        this.linePaint.setStyle(Paint.Style.STROKE);
        this.linePaint.setStrokeWidth(dip2px(ctx, 2));
        this.linePaint.setColor(Color.parseColor("#FFFFFF"));

        this.textPaint = new Paint();
        this.textPaint.setAntiAlias(true);
        this.textPaint.setDither(true);
        this.textPaint.setStyle(Paint.Style.FILL);
        this.textPaint.setColor(Color.parseColor("#FFFFFF"));
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width;
        int height;
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);

        if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.EXACTLY) {
            height = heightSpecSize;
            width = Math.min(heightSpecSize, Math.min(getScreenSize(ctx)[0], getScreenSize(ctx)[1]));
        } else if (widthSpecMode == MeasureSpec.EXACTLY && heightSpecMode == MeasureSpec.AT_MOST) {
            width = widthSpecSize;
            height = Math.min(widthSpecSize, Math.min(getScreenSize(ctx)[0], getScreenSize(ctx)[1]));
        } else if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) {
            width = height = Math.min(getScreenSize(ctx)[0], getScreenSize(ctx)[1]);
        } else {
            width = widthSpecSize;
            height = heightSpecSize;
        }
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        centerX = w / 2;
        centerY = h / 2;
        radius = Math.min(centerX, centerY) * 0.725f;
        arcPaint.setStrokeWidth(radius / 3 * 2);
        textPaint.setTextSize(radius / 7);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        textList.clear();
        lineList.clear();
        lineList = new ArrayList<>();
        textList = new ArrayList<>();

        if (mList != null) {
            RectF mRectF = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
            for (int i = 0; i < mList.size(); i++) {
                arcPaint.setColor(mList.get(i).color);
                canvas.drawArc(mRectF, startAngle, mList.get(i).percent / total * 360f, false, arcPaint);

                lineList.add(getLinePointFs());//获取直线 开始坐标 结束坐标

                textAngle = startAngle + mList.get(i).percent / total * 360f / 2;
                textList.add(getTextPointF());   //获取文本文本

                startAngle += mList.get(i).percent / total * 360f;
            }
            //绘制间隔空白线
            drawSpacingLine(canvas, lineList);
            //绘制文字
            drawText(canvas);
        }

    }

    /** * 获取文本文本 * * @return */
    private PointF getTextPointF() {
        float textPointX = (float) (centerX + radius * Math.cos(Math.toRadians(textAngle)));
        float textPointY = (float) (centerY + radius * Math.sin(Math.toRadians(textAngle)));
        return new PointF(textPointX, textPointY);
    }

    /** * 获取直线 开始坐标 结束坐标 */
    private PointF[] getLinePointFs() {
        float stopX = (float) (centerX + (radius + arcPaint.getStrokeWidth() / 2) * Math.cos(Math.toRadians(startAngle)));
        float stopY = (float) (centerY + (radius + arcPaint.getStrokeWidth() / 2) * Math.sin(Math.toRadians(startAngle)));
        float startX = (float) (centerX + (radius - arcPaint.getStrokeWidth() / 2) * Math.cos(Math.toRadians(startAngle)));
        float startY = (float) (centerY + (radius - arcPaint.getStrokeWidth() / 2) * Math.sin(Math.toRadians(startAngle)));
        PointF startPoint = new PointF(startX, startY);
        PointF stopPoint = new PointF(stopX, stopY);
        return new PointF[]{startPoint, stopPoint};
    }

    /** * 画间隔线 * * @param canvas */
    private void drawSpacingLine(Canvas canvas, List<PointF[]> pointFs) {
        for (PointF[] fp : pointFs) {
            canvas.drawLine(fp[0].x, fp[0].y, fp[1].x, fp[1].y, linePaint);
        }
    }

    /** * 画文本 * * @param canvas */
    private void drawText(Canvas canvas) {
        for (int i = 0; i < textList.size(); i++) {
            textPaint.setTextAlign(Paint.Align.CENTER);
            String text = mList.get(i).content;
            canvas.drawText(text, textList.get(i).x, textList.get(i).y, textPaint);

            Paint.FontMetrics fm = textPaint.getFontMetrics();
            canvas.drawText(format.format(mList.get(i).percent * 100 / total) + "%", textList.get(i).x, textList.get(i).y + (fm.descent - fm.ascent), textPaint);
        }
    }

    /** * 设置间隔线的颜色 * * @param color */
    public void setSpacingLineColor(int color) {
        linePaint.setColor(color);
    }

    /** * 设置文本颜色 * * @param color */
    public void setTextColor(int color) {
        textPaint.setColor(color);
    }

    /** * 设置开始角度 * * @param startAngle */
    public void setStartAngle(float startAngle) {
        this.startAngle = startAngle;
    }

    /** * 设置饼的宽度 * * @param width */
    public void setCakeStrokeWidth(int width) {
        arcPaint.setStrokeWidth(dip2px(ctx, width));
    }

    /** * 设置饼的数据 * * @param mList */
    public void setCakeData(List<BaseMessage> mList) {
        total = 0;
        if (mList == null) {
            return;
        }
        for (int i = 0; i < mList.size(); i++) {
            total += mList.get(i).percent;
        }
        this.mList.clear();
        this.mList = mList;
        invalidate();
    }

    /** * 根据手机的分辨率从 dp 的单位 转成为 px(像素) */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /** * 根据手机的分辨率从 px(像素) 的单位 转成为 dp */
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }

    public static int[] getScreenSize(Context context) {
        WindowManager wm = (WindowManager) context.getSystemService(
                Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        return new int[]{outMetrics.widthPixels, outMetrics.heightPixels};
    }
}

有什么宝贵的意见请给我留言。最后我贴下动画的效果图：

动画源码地址，下载了记得给点赞哦。