Android 自定义 View 实现饼状图

参考文章中的效果图：

image.png

添加文本之后的效果图：

image.png

实现过程

• 扇形的绘制

• 文本的绘制

扇形的绘制

使用 canvas.drawArc(); 绘制。

drawArc有两个构造方法

// 第一种public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint){}    
// 第二种public void drawArc(float left, float top, float right, float bottom, float startAngle,            float sweepAngle, boolean useCenter, @NonNull Paint paint) {}

ps: 详细使用看顶部参考文章。

我们这里使用第一个构造方法，从构造方法看出需要这几个参数

• RectF：绘制的范围，通过一个矩形来限定范围

• startAngle：扇形开始的角度

• sweepAngle：扇形扫过的角度

• useCenter：是否使用中心，中心点之后绘制出来类似于一个扇形，而不使用中心点则是圆弧起始点和结束点之间的连线加上圆弧围成的图形。

• paint：画笔

这里需要注意的是：扇形的默认开始角度如下图：安卓自定义View基础-角度与弧度

角度与弧度

到这里应该就能绘制出扇形了

image.png

饼状图目的是为了展示数据，所以下一步我们就将文本数据画进去。

文本的绘制

绘制文本的构造函数如下：安卓自定义View进阶-Canvas之图片文字

public void drawText (String text, float x, float y, Paint paint)

我们的目的是在扇形的中心坐标绘制描述文本，那么怎么获取中心坐标就很重要了。在获取了中心坐标之后直接调用上面的构造函数即可绘制文字了

image.png

• 三角形函数理解
  上图中的 x，y坐标就是通过三角函数求得

  //计算当前角度的一半
            float textAngle = mCurrentStartAngle + pieData.getAngle() / 2;            // 扇形的中心坐标
            float x = (float) (r / 2 * Math.cos(textAngle * Math.PI / 180));            float y = (float) (r / 2 * Math.sin(textAngle * Math.PI / 180));

• 居中文本的绘制
  由于文字长度不同，需要先计算出文字的中心。所以这里居中文字的横坐标为：

(x - mTextPaint.measureText(name)/2)

所以绘制名称我们就可以通过下面的函数来完成

 // 名称居中canvas.drawText(name, (x - mTextPaint.measureText(name)/2), y ,mTextPaint);

我们还想在名称下方绘制百分比。

这时候根据上面的经验，可以得到百分比的居中坐标，这时候只要再加上名称文本的高度，即可实现在文本下方绘制百分比。

// 名称 文本的高度Rect rect = new Rect();
mTextPaint.getTextBounds(name, 0, name.length(), rect);int height = rect.height();// 绘制百分比canvas.drawText(percentage, (x - mTextPaint.measureText(percentage)/2), (y + height*2) ,m

作者：_龙衣
链接：https://www.jianshu.com/p/f5ec52f8853a