Android自己设置View，画一个好看带延长线的饼状图

前言

在Android中，图表的实现是比较麻烦的，基本只能通过自己设置View来实现。目前Github上有少量集成度高功能性强的三方库，比方MPAndroidChart等。但三方库尽管强大，定制性总是有限的，在项目中为了达成少量特别需求，就要靠我们自己去画啦。尽管费点时间，不过计算各种绘制点的位置的过程还是很有趣的。我个人对于自己设置View这部分只是小有理解，所以大家假如对本文中的代码有什么改进意见，欢迎在评论区或者者我的github项目上提issues出来啦~

绘制思路

先来看一下，在项目中设计师给到我要实现的样子：image.png

无视设计师画图时数字和占比不符的偷懒，可以看到这是一个普通的饼状图加上延长线、文字形容和少量圈圈点点，那么整理一下大致的绘制思路，我的想法是：

1.绘制饼状图
确定饼状图所处的正方形区域，找出圆点
通过drawArc绘制扇区，绘制出饼图的各个部分
中间画一个圆，让饼图变为只有外面一圈

2.绘制饼图外的点、圈、线、字
点的角度处于每个圆弧的半分处，通过正余弦算出点的位置
以点为圆心画圈
按照四个象限，不同象限以不同角度从圈边延长出线
以线的终点对齐加上字

2.给自己设置View添加空间，以避免延长线和字显示不全
主要用到了数学中坐标系象限的概念和正余弦的算法，看着有点绕，的确也是挺绕的，接下来分步骤详细形容吧。
绘制饼图
首先我们需要存储各个饼图所需要的属性：

public class PieEntry {    //颜色    private int color;    //比分比    private float percentage;    //条目名    private String label;    //扇区起始角度    private float currentStartAngle;    //扇区总角度    private float sweepAngle;    //省略get&set}

在绘制饼图中，我们只要要颜色、百分比就够了，其余的在后面的步骤才会用到。
确定圆点
在布局文件中，我们将自己设置View的宽度设为match_paren，高度设为300dp，并增加一个浅色作为背景色。

饼图作为一个圆，那么在绘制这个圆前，我们先找出圆心的位置，并将其作为整个View的原点，即坐标(0,0)的位置。

在这里我向View中增加了坐标轴和原点的辅助线，作为指示用。

image.png

@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {    super.onSizeChanged(w, h, oldw, oldh);    //获取实际View的宽高    mTotalWidth = w - getPaddingStart() - getPaddingEnd();    mTotalHeight = h - getPaddingTop() - getPaddingBottom();    //绘制饼图所处的正方形RectF    initRectF();}@Overrideprotected void onDraw(Canvas canvas) {    super.onDraw(canvas);    //将坐标中心设到View的中心    canvas.translate(mTotalWidth / 2, mTotalHeight / 2);    //draw...}

创立正方形RectF，确定饼图半径
在确定圆心并将其设为坐标原点后，创立一个边长等于View短边长的正方形RectF：

private void initRectF() {    float shortSideLength;    //取短边 作为饼图所在正方形的边长    shortSideLength = (mTotalHeight < mTotalWidth) ? mTotalHeight : mTotalWidth;    //除以2即为饼图的半径    mRadius = shortSideLength / 2;    //设置RectF的坐标    mRectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);}

设置paint颜色为红色，将这个Rect通过canvas.drawRect(mRectF, mPaint);在View中绘制出来，可以看到其边长是和高度一致的：image.png

那么为什么需要创立这个正方形RectF呢？由于在接下来的饼图绘制中会用到。可以简单了解为这个正方形就是饼图的外轮廓所处的范围，也就是长方形的边长即是饼图的直径。
绘制扇形
尽管饼图是一个圆，但这是相对于其整体而言。在一个饼图中，不同的类目占比不同，将饼图分割成了多个扇形，所以我们实际上是要绘制扇形。在Android自己设置View中，对应的方法是 drawArc，所需要的参数包括:

image.png

图片引用自：刘某人程序员——Android绘图机制（二）

这里受限于篇幅不能详细详情，不理解的同学肯定要先去网上看一下相关文章。
那么已经确定了绘制扇形需要的矩形RectF、接下来只用传入起始角度和扇形总角度，以及该扇形的颜色，就能绘制出饼图了。那么对于起始角度，我们可以通过每个条目的百分比来算出：

    private void initData() {        //默认的起始角度为-90°        float currentStartAngle = -90;        for (int i = 0; i < mPieLists.size(); i++) {            PieEntry pie = mPieLists.get(i);            pie.setCurrentStartAngle(currentStartAngle);            //每个数据百分比对应的角度            float sweepAngle = pie.getPercentage() / 100 * 360;            pie.setSweepAngle(sweepAngle);            //起始角度不断添加            currentStartAngle += sweepAngle;            //增加颜色            pie.setColor(mColorLists.get(i));        }    }

这里需要注意的是：第一个扇形的起始角度为-90度，由于在自己设置View中，0度是从右边开始的，也就是坐标轴中的X轴正方向那条线开始顺时针添加，而我们想让扇形从Y轴的上方这条线开始顺时针绘制，所以需要减90°。
现在entry中记录了每条数据的起始角度和扫过角度，可以直接遍历数据进行绘制了。但要记得在绘制之前，将paint的style设为Paint.Style.FILL，这样才能绘制出扇形：

private void drawPie(Canvas canvas) {    for (PieEntry pie : mPieLists) {        mPaint.setColor(pie.getColor());        canvas.drawArc(mRectF,                pie.getCurrentStartAngle(),                pie.getSweepAngle(),                true, mPaint);    }}

image.png

增加中心空洞
相比设计稿，发现还有中间一个空洞，这个就简单啦，确定空洞半径占饼图的比例，再绘制一个同心白色圆形就好：

    //饼图中间的空洞占据的比例    float holeRadiusProportion = 59;    canvas.drawCircle(0, 0, mRadius * holeRadiusProportion / 100, mPaint);

现在来看一下效果吧：

image.png

绘制延长点和圈
每个扇形都有一个延长点，点所处的位置在扇形圆弧中点的外部，对于扇形的角度我们已经知道了，所以延长点连接圆心的线，和X或者Y轴形成的角度也是可知的，延长点到圆心的距离是圆半径+一小段延长距离，所以通过正余弦的算法，就能求出延长点的坐标值：

 private void drawPoint(Canvas canvas) {        for (PieEntry pie : mPieLists) {            //延长点的位置处于扇形的中间            float halfAngle = pie.getCurrentStartAngle() + pie.getSweepAngle() / 2;            float cos = (float) Math.cos(Math.toRadians(halfAngle));            float sin = (float) Math.sin(Math.toRadians(halfAngle));            //通过正余弦算出延长点的坐标            float xCirclePoint = (mRadius + distance) * cos;            float yCirclePoint = (mRadius + distance) * sin;            mPaint.setColor(pie.getColor());            //绘制延长点            canvas.drawCircle(xCirclePoint, yCirclePoint, smallCircleRadius, mPaint);            //绘制同心圆环            mPaint.setStyle(Paint.Style.STROKE);            canvas.drawCircle(xCirclePoint, yCirclePoint, bigCircleRadius, mPaint);            mPaint.setStyle(Paint.Style.FILL);        }    }

得到点的位置，再以其作为圆心绘制一个小圈。运行一下，效果是这样的：image.png

咦，出现问题了，怎样5个扇形，却只出现了4个点和圈呢？ 最下面紫色扇形的点并没有显示出来。

还记得一开始为饼图所处的正方形RectF设置大小吗？我们将整个View的最短边作为其边长，在只有饼图的时候是没问题的，但现在饼图的外部又多了少量显示内容，所以我们要将饼图的范围缩小，给外部的内容少量展现空间。

目前只画了点跟圈，后续还有延长线和文字，也就是饼图在View中占的空间会越来越小。如何适配饼图区域的大小，在后面的章节会提，目前我们先简单化解决，直接将饼图的半径缩小一部分:

private void initRectF() {        float shortSideLength;        //取短边 作为饼图的直径        shortSideLength = (mTotalHeight < mTotalWidth) ? mTotalHeight : mTotalWidth;        //除以2即为饼图的半径        mRadius = (shortSideLength) / 2;        //减少半径，为外部内容腾出显示空间        mRadius -= 50;        //设置RectF的坐标        mRectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);    }

绘制延长线和字
这里我们回看设计稿，引入数学中的象限概念，将其分为4个象限

可以发现，在不同的象限中，延长线的延申方向是不一样的，所以要按照象限来对延长线和文字进行解决，这里限于篇幅不详细讲解算法思路了，这部分自己去思考一下也是蛮有意思的：

private void drawLineAndText(Canvas canvas) {        //算出延长线转折点相对起点的正余弦值        double offsetRadians = Math.atan(yOffset / xOffset);        float cosOffset = (float) Math.cos(offsetRadians);        float sinOffset = (float) Math.sin(offsetRadians);                for (PieEntry pie : mPieLists) {            //延长点的位置处于扇形的中间            float halfAngle = pie.getCurrentStartAngle() + pie.getSweepAngle() / 2;            float cos = (float) Math.cos(Math.toRadians(halfAngle));            float sin = (float) Math.sin(Math.toRadians(halfAngle));            //通过正余弦算出延长点的位置            float xCirclePoint = (mRadius + distance) * cos;            float yCirclePoint = (mRadius + distance) * sin;            mPaint.setColor(pie.getColor());            //绘制延长点            canvas.drawCircle(xCirclePoint, yCirclePoint, smallCircleRadius, mPaint);            //绘制同心圆环            mPaint.setStyle(Paint.Style.STROKE);            canvas.drawCircle(xCirclePoint, yCirclePoint, bigCircleRadius, mPaint);            mPaint.setStyle(Paint.Style.FILL);            //将饼图分为4个象限，从右上角开始顺时针，每90度分为一个象限            int quadrant = (int) (halfAngle + 90) / 90;            //初始化 延长线的起点、转折点、终点            float xLineStartPoint = 0;            float yLineStartPoint = 0;            float xLineTurningPoint = 0;            float yLineTurningPoint = 0;            float xLineEndPoint = 0;            float yLineEndPoint = 0;            //创立要显示的文本            String text = pie.getLabel() + " " +                    new DecimalFormat("#.#").format(pie.getPercentage()) + "%";            //延长点、起点、转折点在同一条线上            //不同象限转折的方向不同            float cosLength = bigCircleRadius * cosOffset;            float sinLength = bigCircleRadius * sinOffset;            switch (quadrant) {                case 0:                    xLineStartPoint = xCirclePoint + cosLength;                    yLineStartPoint = yCirclePoint - sinLength;                    xLineTurningPoint = xLineStartPoint + xOffset;                    yLineTurningPoint = yLineStartPoint - yOffset;                    xLineEndPoint = xLineTurningPoint + extend;                    yLineEndPoint = yLineTurningPoint;                    mPaint.setTextAlign(Paint.Align.RIGHT);                    canvas.drawText(text, xLineEndPoint, yLineEndPoint - 5, mPaint);                    break;                case 1:                    xLineStartPoint = xCirclePoint + cosLength;                    yLineStartPoint = yCirclePoint + sinLength;                    xLineTurningPoint = xLineStartPoint + xOffset;                    yLineTurningPoint = yLineStartPoint + yOffset;                    xLineEndPoint = xLineTurningPoint + extend;                    yLineEndPoint = yLineTurningPoint;                    mPaint.setTextAlign(Paint.Align.RIGHT);                    canvas.drawText(text, xLineEndPoint, yLineEndPoint - 5, mPaint);                    break;                case 2:                    xLineStartPoint = xCirclePoint - cosLength;                    yLineStartPoint = yCirclePoint + sinLength;                    xLineTurningPoint = xLineStartPoint - xOffset;                    yLineTurningPoint = yLineStartPoint + yOffset;                    xLineEndPoint = xLineTurningPoint - extend;                    yLineEndPoint = yLineTurningPoint;                    mPaint.setTextAlign(Paint.Align.LEFT);                    canvas.drawText(text, xLineEndPoint, yLineEndPoint - 5, mPaint);                    break;                case 3:                    xLineStartPoint = xCirclePoint - cosLength;                    yLineStartPoint = yCirclePoint - sinLength;                    xLineTurningPoint = xLineStartPoint - xOffset;                    yLineTurningPoint = yLineStartPoint - yOffset;                    xLineEndPoint = xLineTurningPoint - extend;                    yLineEndPoint = yLineTurningPoint;                    mPaint.setTextAlign(Paint.Align.LEFT);                    canvas.drawText(text, xLineEndPoint, yLineEndPoint - 5, mPaint);                    break;                default:            }            //绘制延长线            canvas.drawLine(xLineStartPoint, yLineStartPoint, xLineTurningPoint, yLineTurningPoint, mPaint);            canvas.drawLine(xLineTurningPoint, yLineTurningPoint, xLineEndPoint, yLineEndPoint, mPaint);        }    }

看一下出来的效果：

宽高适配
到这里可以说已经完成了设计师想要的效果了，是不是挺好看的呢^ ^ 不过可以看到还是有显示不全的问题，特别是在极端数据的情况，比方将数据设成下面的样子：

mPieLists.add(new PieEntry(0.01F, "服装"));        mPieLists.add(new PieEntry(49.98F, "数码产品"));        mPieLists.add(new PieEntry(0.01F, "保健品"));        mPieLists.add(new PieEntry(49.98F, "户外运动用品"));

所以接下来，我们要对饼图的大小进行自动适配。还是在创立RectF的方法中进行修改：

private void initRectF() {        Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();        //文字的高度        float textHeight = fontMetrics.bottom - fontMetrics.top + fontMetrics.leading;        //延长线的纵向长度        float lineHeight = distance + bigCircleRadius + yOffset;        //延长线的横向长度        float lineWidth = distance + bigCircleRadius + xOffset + extend;        //求出饼状图加延长线和文字 所有内容需要的长方形空间的长宽比        mScale = mTotalWidth / (mTotalWidth + lineHeight * 2 + textHeight * 2 - lineWidth * 2);        //长方形空间其短边的长度        float shortSideLength;        //通过宽高比选择短边        if (mTotalWidth / mTotalHeight >= mScale) {            shortSideLength = mTotalHeight;        } else {            shortSideLength = mTotalWidth / mScale;        }        //饼图所在的区域为正方形，处于长方形空间的中心        //空间的高度减去上下两部分文字显示需要的高度，除以2即为饼图的半径        mRadius = shortSideLength / 2 - lineHeight - textHeight;        //设置RectF的坐标        mRectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);    }

而且作为严谨的程序猿，一定不允许有多余的空间白费掉，所以在XML中设置高度为wrap_content时，也要能按照宽度进行适配：

 @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        //高度为WrapContent时，设置默认高度        if (mScale != 0 && MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.AT_MOST) {            int height = (int) (mTotalWidth / mScale);            setMeasuredDimension(widthMeasureSpec, height);        }    }

在MainaActivity中添加了两个按钮可以动态加大和减少自己设置View的高度，我们来看一下适配后的效果吧：image.png

到这里已经按照设计稿的样子做完了，但还有很多可以增加的内容，比方延长线的角度也可以跟着变等等，都是通过正余弦算法算出坐标来，思路大体是一样的。
完整的代码可以在我的Github上查看： Leelion96/PieChartView

假如代码对你有少量帮助或者启示，能帮我点一个小小的star就是最大的支持啦。假如本文或者者代码有任何疏漏或者错误，也欢迎大家给出指导意见，阿里嘎多~

【附】相关架构及资料

image

资料领取

关注+点赞+加群：791358629 免费获取！

点击链接加入群聊【Android 架构设计③群】：https://jq.qq.com/?_wv=1027&k=5N9wWae

领取获取往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter全方面的Android进阶实践技术