前言：继上次写了自定义圆形进度条后，今天给大家带来自定义扇形饼状图。先上效果图：

是不是很炫？看上去还有点立体感。下面带大家一起来瞧一瞧吧。

一、定义成员变量，重写构造方法

看着这个效果图，我们可以想象下接下来暂时会需要用到以下属性：

    /**
     * 存放事物的品种与其对应的数量
     */
    private Map kindsMap = new LinkedHashMap<String, Integer>();
    /**
     *  存放颜色
     */
    private ArrayList<Integer> colors = new ArrayList<>();

    private Paint mPaint;//饼状画笔
    private Paint mTextPaint; // 文字画笔
    private static final int DEFAULT_RADIUS = 200;
    private int mRadius = DEFAULT_RADIUS; //外圆的半径
    private String centerTitle; //中间标题

然后重写父类的构造方法，初始化画笔：

 public PieChatView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mTextPaint = new Paint();

        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);

        mTextPaint.setColor(Color.BLACK);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setStyle(Paint.Style.STROKE);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
    }

    public PieChatView(Context context) {
        this(context, null, 0);

    }

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

一般都是一个参数和两个参数的全部调用第三个参数的。我三个参数的构造方法中没有去从xml文件中去获取属性了。我完全就用代码实现了。也可以将一些属性放在attrs.xml文件中，然后去获取。自行选择吧。

二、onMeasure()

这个方法，只要你以前写过自定义View,基本上就是一样的套路:

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int wideSize = MeasureSpec.getSize(widthMeasureSpec);
        int wideMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int width, height;
        if (wideMode == MeasureSpec.EXACTLY) { //精确值 或matchParent
            width = wideSize;
        } else {
            width = mRadius * 2 + getPaddingLeft() + getPaddingRight();
            if (wideMode == MeasureSpec.AT_MOST) {
                width = Math.min(width, wideSize);
            }

        }

        if (heightMode == MeasureSpec.EXACTLY) { //精确值 或matchParent
            height = heightSize;
        } else {
            height = mRadius * 2 + getPaddingTop() + getPaddingBottom();
            if (heightMode == MeasureSpec.AT_MOST) {
                height = Math.min(height, heightSize);
            }

        }
        setMeasuredDimension(width, height);
        mRadius = (int) (Math.min(width - getPaddingLeft() - getPaddingRight(),
                height - getPaddingTop() - getPaddingBottom()) * 1.0f / 2);

    }

就是获得系统测量好的宽高，和模式后分三种模式去讨论。最终通过setMeasuredimension()确定宽高的值。宽高确定好了，那就可以确定下整个饼状图的半径 mRadius了。取宽高中的较小的那个。

三、onDraw();

我们需要画一个一个的扇形，还有将扇形从零到360的动画效果，还有扇形中的文字，中间的文字，还有实现立体感的效果。

1.画扇形。

画一个扇形还是蛮容易的：通过画布调用drawArc()方法话一个60度的扇形:

mPaint.setStyle(Paint.Style.FILL);
mTextPaint.setColor(Color.RED);
RectF oval = new RectF(-mRadius, -mRadius, mRadius, mRadius);
mCanvas.drawArc(oval, 0, 60, true, mPaint);

前面设置下画笔的颜色，style为实心，就这几行代码的事情。第一个参数：是一个正方形，表明在这个区域内画扇形。第二个参数：从哪个角度开始画，第三个参数：就是画的角度度数，而不是画到哪个角度去。第四个参数：是否以正方形中心为圆心。我这样一说，你可能就会有点懵逼了。你自己改为false,看效果，就理解我说的了。效果如下：

目前画了一个扇形，如此多的扇形需要用户去设置数据，来确定每个扇形的角度.

    public ArrayList<Integer> getColors() {
        return colors;
    }

    public void setColors(ArrayList<Integer> colors) {
        this.colors = colors;
    }
     public void setDataMap(LinkedHashMap<String, Integer> map) {
        this.kindsMap = map;
    }
     public String getCenterTitle() {
        return centerTitle;
    }

    public void setCenterTitle(String centerTitle) {
        this.centerTitle = centerTitle;
    }

然后通过遍历，一一画出这些扇形：

 @Override
    protected void onDraw(Canvas mCanvas) {
        super.onDraw(mCanvas);
        mCanvas.translate((getWidth() + getPaddingLeft() - getPaddingRight()) / 2, (getHeight() + getPaddingTop() - getPaddingBottom()) / 2);

        paintPie(mCanvas);

    }
private void paintPie(final Canvas mCanvas) {
     if (kindsMap != null) {
            Set<Map.Entry<String, Integer>> entrySet = kindsMap.entrySet();
            Iterator<Map.Entry<String, Integer>> iterator = entrySet.iterator();
            int i = 0;
            float currentAngle = 0.0f;
            while (iterator.hasNext()) {
                Map.Entry<String, Integer> entry = iterator.next();
                int num = entry.getValue();
                float needDrawAngle = num * 1.0f / sum * 360;
                mPaint.setColor(colors.get(i));
                mCanvas.drawArc(oval, currentAngle, needDrawAngle - 1, true, mPaint);
                currentAngle = currentAngle + needDrawAngle;
                i++;
            }
        }  
        }

记得，要先将画笔移到画布中心，currentAngle：当前的角度值，needDrawAngle ：需要画多少角度。sum:数据的总个数，为每一个数据相加的和，计算百分比。效果如图：

2、动画效果实现

咋一看离我们的预期效果还差好远。只有画完以后的样子，动画都没有。别急别急，动画马上就来：

 private void initAnimator() {
        ValueAnimator anim = ValueAnimator.ofFloat(0, 360);
        anim.setDuration(10000);
        anim.setInterpolator(new AccelerateDecelerateInterpolator());
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                animatedValue = (float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        anim.start();
    }

设置一个动画，在10秒内，随着时间的推移，animatedValue从0到360度发生变化，每一次监听到animatedValue的值得改变，就去刷新View，执行ondraw(）;这个时候我们来修改下前面的paintPie（）；

if (Math.min(needDrawAngle-1, animatedValue - currentAngle) >= 0) {
     mPaint.setColor(colors.get(i));
     mCanvas.drawArc(oval, currentAngle, Math.min(needDrawAngle - 1, animatedValue - currentAngle), true, mPaint);
                }

先看效果：

我在这个地方遇到了一个坑----ondraw()方法多次执行时，每一次执行完毕后会抹去上一次画过的图形.也就是说，我没用动画的时候，ondraw()方法就调用了一次，调用了while循环后，把所有的扇形画出来了。用了动画之后，animatedValue的值一改变，就会执行一次while循环。每次while循环都会重头开始画，我们只要保证每次while循环所画的角度正好是animatedValue，就ok了。所以，在needDrawAngle-1小于animatedValue - currentAngle时，就把该部分扇形画出来。在needDrawAngle-1大于animatedValue - currentAngle时，那就只画animatedValue - currentAngle的角度。

之所以减一，是因为扇形之间留一条白白的缝隙。

3.添加文字，中间标题，实现立体感

当某个扇形角度，不够文字的宽度时，我们就会将文字画在圆的外面。所以这个我们得添加一个属性minAngle,角度最小值，添加getter和setter方法，让使用者去设置。当needDrawAngle小于这个角度值时，就画在外面。大于这个值就画在扇形中央。

//画文字
    private void drawText(Canvas mCanvas, float textAngle, String kinds, float needDrawAngle) {
        Rect rect = new Rect();
        mTextPaint.setTextSize(sp2px(15));
        mTextPaint.getTextBounds(kinds, 0, kinds.length(), rect);
        if (textAngle >= 0 && textAngle <= 90) { //画布座标系第一象限(数学座标系第四象限)
            if (needDrawAngle < minAngle) { //如果小于某个度数,就把文字画在饼状图外面
                mCanvas.drawText(kinds, (float) (mRadius * 1.2 * Math.cos(Math.toRadians(textAngle))), (float) (mRadius * 1.2 * Math.sin(Math.toRadians(textAngle)))+rect.height()/2, mTextPaint);
            } else {
                mCanvas.drawText(kinds, (float) (mRadius * 0.75 * Math.cos(Math.toRadians(textAngle))), (float) (mRadius * 0.75 * Math.sin(Math.toRadians(textAngle)))+rect.height()/2, mTextPaint);
            }
        } else if (textAngle > 90 && textAngle <= 180) { //画布座标系第二象限(数学座标系第三象限)
            if (needDrawAngle < minAngle) {
                mCanvas.drawText(kinds, (float) (-mRadius * 1.2 * Math.cos(Math.toRadians(180 - textAngle))), (float) (mRadius * 1.2 * Math.sin(Math.toRadians(180 - textAngle)))+rect.height()/2, mTextPaint);
            } else {
                mCanvas.drawText(kinds, (float) (-mRadius * 0.75 * Math.cos(Math.toRadians(180 - textAngle))), (float) (mRadius * 0.75 * Math.sin(Math.toRadians(180 - textAngle)))+rect.height()/2, mTextPaint);
            }
        } else if (textAngle > 180 && textAngle <= 270) { //画布座标系第三象限(数学座标系第二象限)
            if (needDrawAngle < minAngle) {
                mCanvas.drawText(kinds, (float) (-mRadius * 1.2 * Math.cos(Math.toRadians(textAngle - 180))), (float) (-mRadius * 1.2 * Math.sin(Math.toRadians(textAngle - 180)))+rect.height()/2, mTextPaint);
            } else {
                mCanvas.drawText(kinds, (float) (-mRadius * 0.75 * Math.cos(Math.toRadians(textAngle - 180))), (float) (-mRadius * 0.75 * Math.sin(Math.toRadians(textAngle - 180)))+rect.height()/2, mTextPaint);
            }
        } else { //画布座标系第四象限(数学座标系第一象限)
            if (needDrawAngle < minAngle) {
                mCanvas.drawText(kinds, (float) (mRadius * 1.2 * Math.cos(Math.toRadians(360 - textAngle))), (float) (-mRadius * 1.2 * Math.sin(Math.toRadians(360 - textAngle)))+rect.height()/2, mTextPaint);
            } else {
                mCanvas.drawText(kinds, (float) (mRadius * 0.75 * Math.cos(Math.toRadians(360 - textAngle))), (float) (-mRadius * 0.75 * Math.sin(Math.toRadians(360 - textAngle)))+rect.height()/2, mTextPaint);
            }
        }

    }

首先，画文字，我们要知道文字的中心点座标。所以怎么来求呢？看图：

通过这幅图，大家应该知道了吧。唯一一点要说的就是画图的座标系和数学中的座标系不一样。画的时候还要分四个象限的情况去讨论。有的人说，为什么不是在1/2r处，而是在0.75r处呢？因为我们中心还要画title的呀，对吧。画在1/2处，不就覆盖了嘛！
然后在中心画文字咯。文字很容易。先画个白色背景的圆半径为外圆半径的一半，这样就覆盖了扇形中间的一部分。在内圆上再画字。就OK了。
那立体效果怎么实现呢？
也很简单，可以仔细观察，那部分好像是透明的。隐约能看见前面画的扇形。所以我们在画内园之前先画个比内园稍微大一点的透明圆。设置画笔的透明度就搞定。上代码：

            while (iterator.hasNext()) {
                Map.Entry<String, Integer> entry = iterator.next();
                String kinds = entry.getKey();
                int num = entry.getValue();
                float needDrawAngle = num * 1.0f / sum * 360;
                String drawAngle = dff.format(needDrawAngle / 360 * 100);
                kinds = kinds + "," + drawAngle + "%";
                float textAngle = needDrawAngle / 2 + currentAngle;
                if (Math.min(needDrawAngle, animatedValue - currentAngle) >= 0) {
                    mPaint.setColor(colors.get(i));
                    mCanvas.drawArc(oval, currentAngle, Math.min(needDrawAngle - 1, animatedValue - currentAngle), true, mPaint);

                    mPaint.setColor(Color.WHITE);
                    mPaint.setAlpha(10);
                    mCanvas.drawCircle(0, 0, mRadius / 2 + dp2px(10), mPaint);
                    mPaint.setAlpha(255);
                    mCanvas.drawCircle(0, 0, mRadius / 2, mPaint);
                    drawCenterText(mCanvas, centerTitle, 0, 0, mTextPaint);
                    drawText(mCanvas, textAngle, kinds, needDrawAngle);
                }

                currentAngle = currentAngle + needDrawAngle;
                i++;
            }

该画的画完了。接下来就是一些优化和修改了。

四、优化

1.添加dp,sp,px转化工具

/**
     * dp 2 px
     *
     * @param dpVal
     */
    protected int dp2px(int dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpVal, getResources().getDisplayMetrics());
    }

    /**
     * sp 2 px
     *
     * @param spVal
     * @return
     */
    protected int sp2px(int spVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
                spVal, getResources().getDisplayMetrics());

    }

因为图中有很多地方接触到文字，如果设置文字的时候用的是px,那么在不同的机器上，显示的文字大小将会差距很大。最好也提供一些方法让使用者去设置这些字体的大小。

2.让使用者去开启动画

因为数据是使用者设置上去的，什么时候开启动画，还得提供一个公开方法：

 public void startDraw() {
        if (kindsMap != null && colors != null && centerTitle != null) {
            initAnimator();
        }
    }

3.设置数据优化

可以知道，我用了两个容器来装数据。有没有感觉到浪费资源？其实我们完全可以只用一个ArrayList即可。对吧。将所有数据定义为一个实体的bean类。说到这，又遇到一个坑，我最开始使用hashMap去存数据的，优越hashMap存放数据是无序的，所以每次画出来的扇形结构不一样。你也许又会问我，怎么颜色总是飘忽不定啊？因为我是用了个for循环随机生成的颜色，哈哈。

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        PieChatView pieChatView = (PieChatView) findViewById(R.id.pie);
        kindsMap.put("苹果", 10);
        kindsMap.put("梨子", 30);
        kindsMap.put("香蕉", 10);
        kindsMap.put("葡萄", 30);
        kindsMap.put("哈密瓜", 10);
        kindsMap.put("猕猴桃",30);
        kindsMap.put("草莓", 10);
        kindsMap.put("橙子", 30);
        kindsMap.put("火龙果", 10);
        kindsMap.put("椰子", 20);
        for (int i = 1; i <= 40; i++){
            int r= (new Random().nextInt(100)+10)*i;
            int g= (new Random().nextInt(100)+10)*3*i;
            int b= (new Random().nextInt(100)+10)*2*i;
            int color = Color.rgb(r,g,b);
            if(Math.abs(r-g)>10&&Math.abs(r-b)>10&&Math.abs(b-g)>10){
                colors.add(color);
            }
        }
        pieChatView.setCenterTitle("水果大拼盘");
        pieChatView.setDataMap(kindsMap);
        pieChatView.setColors(colors);
        pieChatView.setMinAngle(50);
        pieChatView.startDraw();

到这里，文章就结束了。最后附上代码的github地址：
https://github.com/Demidong/ClockView
我写的博客还不是很多，欢迎大家参与讨论，留言，指正我的不足。

Android自定义View之扇形饼状图

一、定义成员变量，重写构造方法

二、onMeasure()

三、onDraw();

1.画扇形。

2、动画效果实现

3.添加文字，中间标题，实现立体感

四、优化

1.添加dp,sp,px转化工具

2.让使用者去开启动画

3.设置数据优化

Java Socket 通信（五）

Java易忘，易錯，重難點整合

Android 6.0權限管理，sdk>=23請求權限

小米系統更新後android studio 通過USB安裝報錯：install_canceled_by_user

Git SSH Key 生成簡析

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結