继承View基类,画了这样的扇形图
直接来步骤吧
(参考了GcsSloop的教程)
1.分析
自定义View需要认真的分析下,里面还是会用到一些数学知识
-
首先是扇形该怎么表现
- 扇形的外观是个圆弧,而且是围绕一个中心点旋转一定角度构成的
- View主要的绘制都是通过画布(canvas)进行,canvas里提供了许多绘制的方法。其中有一个
drawArc()
画圆弧的方法。
1 2 3
public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,@NonNull Paint paint) { drawArc(oval.left, oval.top, oval.right, oval.bottom, startAngle, sweepAngle, useCenter,paint); }
这个方法就给画扇形提供了捷径。
- 发现里面有个RectF参数,隐约有点是矩形的感觉,网查一下: 这个类包含一个矩形的四个单精度浮点坐标。矩形通过上下左右4个边的坐标来表示一个矩形
参数说明一下:
- oval :指定圆弧的外轮廓矩形区域
- startAngle: 圆弧起始角度,单位为度。
- sweepAngle: 圆弧扫过的角度,顺时针方向,单位为度。
- useCenter: 如果为True时,在绘制圆弧时将圆心包括在内,通常用来绘制扇形。
- paint: 绘制圆弧的画笔属性,如颜色,是否填充等。
1.1 分析需要哪些数据
参照上面的画圆弧函数的参数需求和上面那个结(cu)果(cao)图
要使用canvas画扇形需要这些参数吧
- 外轮廓矩形
- 起始角度
- 扫过的角度
- 画笔
再看上面那个结(cu)果(cao)图,还需要
- 颜色
- 文字
这样就可以定义一个数据结构了
|
|
1.2 角度计算
扇形图应该反应的是里面每块扇形占总数的百分比,在我们的数据结构里应该是通过数值(value)计算出扇形区域占总体的比例和扫过的角度
- 比例 = 数值 / 各块数值之和
- 角度 = 比例 x 圆周(360度)
1.3 文字位置确定
文字不像扇形区域可以直接调用画布的圆弧方法绘制,文字使用画布的**drawText()**方法
|
|
查看源码可知需要传递字符内容、x坐标、y坐标和画笔,字符内容和画笔容易,就是坐标位置我们要好好想想
需要注意这里的文字的位置坐标都是基于canvas为父元素的
回到以前的数学应用题,先摆出我们有哪些已知量
- 扇形圆的半径
- 每块扇形的扫过的角度
- 起始的角度
想想根据这些数据,应该可以求出文字位置(上图黑圆点)的坐标
- 文字位置角度 = 起始角度 + 扇形块角度/2
- 文字x坐标 = 半径/2 x cos(文字位置角度)
- 文字y坐标 = 半径/2 x sin(文字位置角度)
分析差不多了,开始实践了
2 实践
2.1 数据结构
|
|
2.2 View实现
先来一张图镇店
|
|
最终实现效果就是开头那张了,自定义View还有很长路要走