实习一了段时间了,终于有活干了……
然鹅……
我需要做一个折线图控件,我tm之前从来没做任何过复杂程度超过矩形的控件,你现在让我做一个折线图!!!(手动狗头)
最后只能先去网上看看大神怎么写的,模仿着花了一天多终于把控件写出来了。
先上图:
其实完成之后想想也挺简单,以下是思路:
首先设定初始化变量:
- 首先重写onMeasure()获取控件大小width和height,并且给出默认大小;
- 确定绘制起点,也就相当于原点(startpointX,startpointY),图中的所有线段、刻度包括文字的位置都是基于这个原点的;
- 通过控件width和height以及XY轴的刻度数量来设置X轴和Y轴的刻度单位长度Xscale和Yscale,进而获得XY轴的总长度xLength和yLength;
- 初始化各种画笔,建议将画坐标轴的笔、画数据线的笔、画坐标刻度的笔分开
开始绘制:
- 初始化这些变量后就可以开始绘制:
1.绘制XY轴
2.绘制XY轴刻度
3.根据转折点坐标一段一段画出折线
需要注意的点:
- 可以用二维数组来存储转折点坐标(当然也可以用一维数组)
- 用rect和paint的getTextBounds()获取字符串的宽高,便于定位刻度位置;
- 对于阴影可以用path来画,要用画笔的FILL模式
- 对于点击事件可重写onTouchEvent()来获取触摸位置touchX和touchY,然后遍历坐标数组中的坐标确定属于哪个转折点的点击范围,触发事件;
- 若想要绘制虚线,可以用paint的pathEffect属性需要线关闭配置文件中当前activity的hardwareAccelerated属性
总结:再复杂的控件也都是一点一点画出来的,有了思路之后,一点一点做就一定能做出来,刚开始的时候肯定错误会比较多,但是你把错误都试完了自然就只剩下成功的办法了!
以下是这个项目地址,如果能帮到你,一定赏我一个star啊23333333……