饼状图是以不同颜色的圆的切片表示的值。下面这篇文章主要给大家介绍了关于利用kotlin实现一个饼图的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
前言
饼图是许多人最熟悉的图表类型,也是使用频率最高的图表类型之一，本文主要给大家介绍了关于利用kotlin实现饼图的相关内容，分享出来供大家参考学习，代码不难，所以打算用kotlin来实现，增加熟练度，下面来一起看看吧。
先看看做的是什么
看完图，我们来整理下思路
- 饼图居中，每块区域都是一个扇形，需要canvas.drawArc根据角度来绘制
- 需要path.arcTo定位到扇形弧度的一半来绘制折线的起点
- 通过canvas.drawPath绘制折线，折线的长度根据饼图大小来设置比例
- 通过canvas.drawText绘制文字，文字的大小根据饼图的大小来设置比例，绘制文字的位置需要计算文字的宽度
思路清晰后就撸起袖子加油干
知识点
我们先来了解一个概念，我们在paint画扇形的时候，对应的度数是在哪个位置呢？
看到图后应该明白了吧
绘制饼图
我们先来看看他的参数，很明显，左、上、右、下参数形成一个面板，startAngle 为起始的角度,sweepAngle 为从起始角度开始绘制多少度，useCenter为是否连接到圆心，paint为画笔
public void drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint) { super.drawArc(left, top, right, bottom, startAngle, sweepAngle, useCenter, paint); }我们以当前控件的width、height为面板来画一个圆形的饼图
@RequiresApi(Build.VERSION_CODES.LOLLIPOP) override fun onDraw(canvas: Canvas) { super.onDraw(canvas) canvas.drawArc(0f, 0f, width, height, 0f, 360f, true, paintRed) }哇塞，好丑哦，结果显示的是一个椭圆，如果要绘制一个圆形的饼图，我们必须得保证left=top=right=bottom
设置饼图居中
/** * view的宽度 */ var width: Float = 0f /** * view的高度 */ var height: Float = 0f /** * drawArc距离左边的距离 */ var left: Float = 0f /** * drawArc距离上边的距离 */ var top: Float = 0f /** * drawArc距离右边的距离 */ var right: Float = 0f /** * drawArc距离下边的距离 */ var bottom: Float = 0f @RequiresApi(Build.VERSION_CODES.LOLLIPOP) override fun onDraw(canvas: Canvas) { super.onDraw(canvas) canvas.drawArc(left, top, right, bottom, 0f, 360f, true, paint) } override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { super.onSizeChanged(w, h, oldw, oldh) setBackgroundColor(resources.getColor(R.color.black)) width = w.toFloat() height = h.toFloat() left = width / 4f top = width / 4f right = width - left bottom = width - top }完美居中
接下来，我们要把上面从0度到360度多分几个步骤来绘制
@RequiresApi(Build.VERSION_CODES.LOLLIPOP) override fun onDraw(canvas: Canvas) { super.onDraw(canvas) ... canvas.drawArc(left, top, right, bottom, 0f, 20f, true, paintPuple) canvas.drawArc(left, top, right, bottom, 20f, 10f, true, paintGray) canvas.drawArc(left, top, right, bottom, 30f, 40f, true, paintGreen) canvas.drawArc(left, top, right, bottom, 70f, 110f, true, paintBlue) canvas.drawArc(left, top, right, bottom, 180f, 110f, true, paintRed) canvas.drawArc(left, top, right, bottom, 290f, 70f, true, paintYellow) }还不错
上图的度数是写死的，现在我们来把他写活
提供一个设置个数的集合，比如农名伯伯卖水果，梨子卖了10个，香蕉卖了3个，苹果卖了7个，那么这个个数的集合为pieList=(10,3,7)。
因为饼图是根据角度来绘制的，我们必须将这个个数集合换算成角度集合，换算的过程中我们需要知道每一种水果所占总水果的比例，然后通过这个比例去乘上360度，就知道每一种水果所占的度数。
梨子的占比为10/(10+3+7)=1/2,可得梨子占饼图的度数为1/2*360=180度，按照这种方式计算，香蕉和苹果占饼图的度数分别为54度和126度，那么，饼图的分布也就出来了
现在，我们来定义一个个数集合，计算出比例的集合和度数的集合，下面是比例的集合，度数的集合我们在绘制的时候再去计算
/** * 个人分类集合 */ var pieList = arrayListOf(10f,3f,7f) /** * 饼图所占的比例 */ var scaleList = arrayListOf() /** * 个数分类的总量 */ var total: Float = 0f override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { super.onSizeChanged(w, h, oldw, oldh) //计算个数的总和 total = pieList.sum() //存储比例值 for (a in pieList) { scaleList.add(a.div(total)) } }
比例集合拿到了，接下来，我们去循环这个比例值，然后将比例值乘上360度，计算出角度值，供drawArc的sweepAngle使用，但是，我们还缺少一个startAngle起始角度，我们可以定义一个起始角度为0度，然后每次根据计算出的角度值sweepAngle去累加起始度数，用代码来实现下
/** * 记录当前画饼图的度数 */ var currentDegree: Float = 0f /** * 累加饼图的度数作为下一个绘制的起始度数 */ var srctorDegree: Float = 0f @RequiresApi(Build.VERSION_CODES.LOLLIPOP) override fun onDraw(canvas: Canvas) { super.onDraw(canvas) for (scale in scaleList) { val paint = Paint() paint.strokeWidth = dip(10.0f).toFloat() paint.isAntiAlias = true //定义一个随机生成的颜色数，来区分不同的扇形区域 val hex = "#" + Integer.toHexString((-16777216 * Math.random()).toInt()) paint.color = Color.parseColor(hex) //角度数 srctorDegree = scale * 360 canvas.drawArc(left, top, right, bottom, currentDegree, srctorDegree, true, paint) //累加角度 currentDegree += srctorDegree } }o
以上就是利用kotlin实现一个饼图实例代码的详细内容，更多请关注0133技术站其它相关文章！
