有时开发会遇到需要的图表,导入一个三方库太大,这时候就可以自己来自定义个图表控件,近日我就开发了个饼状图,用来显示各板块占比和信息显示,并加入了动画,某块模块放大,自定义设置板块颜色、字体颜色等功能,可直接拿来使用。 先绘制一个个弧形版块拼接成圆,同一圆心,再绘制一个小点的带透明度的白色圆盖在其上,然后绘制中心的孔,即纯白的圆盖在最上面,最后根据计算,将文字绘制在版块的角平分线上,居在透明圆边和外圆边的中心。这边就是给画笔设置对应颜色,若未设置则随机取色,这边还有个功能就是使该板块有凸起的效果,其实就是采取画布平移(canvas.translate),根据该板块角平分线往外拉一定距离;绘制弧形,使用方法canvas.drawArc(RectF,起始绘制角度,旋转绘制角度,是否包含圆心,画笔);最后将画布恢复到之前保存的状态即为外角平分线平移的状态;将该板块的角度累加到当前角度中去,这样绘制下一板块的起始角度就在这个版块之后了。
canvas.drawText(文字,起始x轴坐标,起始y轴坐标,画笔),默认x是这个字符串的左边在屏幕的位置,若设置mBlockTextPaint.setTextAlign(Paint.Align.CENTER)这x就是字符串的水平中心,y是指定这个字符baseline在屏幕上的位置;因x轴我们已通过设置画笔实现居中,现只需关注起始y轴坐标,让其垂直也居中即可;根据画笔获取FontMetrics,一开始绘制中文字就如上图所示,起始y轴坐标设置为最上层,我们要让其绘制到ascent和descent中间,因以baseline为基准线,向上为负,所以ascent为负值;现将文字绘制在板块的角平分线上,根据角度计算出其y轴坐标,再下平移Math.abs(metrics.descent - metrics.ascent)/2-metrics.descent即可让中文字在中心。
若本次绘制的角度大于该板块的角度,那就继续进入下个循环,绘制下一板块,若本次绘制角度小于该板块角度,那就绘制到本次绘制角度,跳出循环,等待下一个mAnimatorValue,再重新计算绘制图形。该控件我已经封装好,可拿来直接使用,使用方法已在GitHub上进行简单讲解,也可进源码进行解读,还有些可优化改进的地方,大家可以给我提议或自行改进