Android 自己设置 View 实现饼状图

文章参考 安卓自己设置View进阶-Canvas之绘制图形 ，作者的自己设置文章写的很好，推荐去学习。
本篇文章是在参考文章中的基础上增加了少量文本的绘制。

参考文章中的效果图：

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) ,mTextPaint);

本文完。

源码地址