前几天收到这么一个需求,本来以为挺简单的,没想到最后发现实现起来还是有点小麻烦的,在这里小小的总结一下。
先看看下面这张需求的样图:
然后在看一下最终实现的效果图,可能是gif录制软件的问题,有一些浮影,忽略就好了:
首先要分析一下最核心的地方,如何获取到滑动距离对应的弧长,看图:
p1是手指按下的点,很明显要想知道当前进度弧边的值,就是要求出角d的值。
以p为圆心点,atan(b)=math.atan((-p.y)/(-p.x));
所以角d的值为:math.todegrees(atan);
那么角b的值就得出来了,b=math.todegrees(atan) + mprogressoffest;
图中的圆可以分为四个象限,同理可以得出四个象限中求得弧长的方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
/** * 更新当前进度对应弧度 * * @param x 按下x坐标点 * @param y 按下y坐标点 */ private void updatecurrentangle( float x, float y) { //根据坐标转换成对应的角度 float pointx = x - mcenterx; float pointy = y - mcentery; float tan_x; //根据左边点所在象限处理过后的x值 float tan_y; //根据左边点所在象限处理过后的y值 double atan; //所在象限弧边angle //01:第一象限-右上角区域 if (pointx >= 0 && pointy <= 0 ) { tan_x = pointx; tan_y = pointy * (- 1 ); atan = math.atan(tan_x / tan_y); //求弧边 mcurrentangle = ( int ) math.todegrees(atan) + 90 .f + mprogressoffest; } //02:第二象限-左上角区域 if (pointx <= 0 && pointy <= 0 ) { tan_x = pointx * (- 1 ); tan_y = pointy * (- 1 ); atan = math.atan(tan_y / tan_x); //求弧边 mcurrentangle = ( int ) math.todegrees(atan) + mprogressoffest; } //03:第三象限-左下角区域 if (pointx <= 0 && pointy >= 0 ) { tan_x = pointx * (- 1 ); tan_y = pointy; atan = math.atan(tan_x / tan_y); //求弧边 if (( int ) math.todegrees(atan) >= ( 90 .f - mprogressoffest)) { mcurrentangle = ( int ) math.todegrees(atan) - ( 90 .f - mprogressoffest); } else { mcurrentangle = ( int ) math.todegrees(atan) + 270 .f + mprogressoffest; } } //04:第四象限-右下角区域 if (pointx >= 0 && pointy >= 0 ) { tan_x = pointx; tan_y = pointy; atan = math.atan(tan_y / tan_x); //求弧边 mcurrentangle = ( int ) math.todegrees(atan) + 180 .f + mprogressoffest; } } |
获取手指按下的区域,避免误判断:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
/** * 按下时判断按下的点是否按在圆环范围内 * * @param x x坐标点 * @param y y坐标点 */ private boolean istoucharc( float x, float y) { double d = gettouchradius(x, y); return d >= mminvalidatetoucharcradius && d <= mmaxvalidatetoucharcradius; } /** * 计算某点到圆点的距离 * * @param x x坐标点 * @param y y坐标点 */ private double gettouchradius( float x, float y) { float cx = x - getwidth() / 2 ; float cy = y - getheight() / 2 ; return math.hypot(cx, cy); } |
绘制bitmap;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
/** * 绘制小圆点bitmap * * @param canvas canvas */ private void drawdragbitmap(canvas canvas) { pointf progresspoint = chartutils.calcarcendpointxy(mcenterx, mcentery, mradius, mcurrentangle, 180 .f - mprogressoffest); int left = ( int ) progresspoint.x - mdragbitmap.getwidth() / 2 ; int top = ( int ) progresspoint.y - mdragbitmap.getheight() / 2 ; // mbitmaprect = new rect(left, top, left + mdragbitmap.getwidth(), top + // mdragbitmap.getheight()); // // canvas.drawbitmap(mdragbitmap, // new rect(0, 0, mdragbitmap.getwidth(), mdragbitmap.getheight()), // mbitmaprect, mbitmappaint); //bitmap直接使用bitmaputils中的缩放方法缩放,可以不用rect进行缩放,也可以通过限定rect来限定bitmap大小 canvas.drawbitmap(mdragbitmap, left, top, mbitmappaint); } |
重写ontouchevent事件;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
@override public boolean ontouchevent(motionevent event) { //获取点击位置的坐标 float x = event.getx(); float y = event.gety(); switch (event.getaction()) { case motionevent.action_down: if (istoucharc(x, y)) { mtouchquadrant = gettouchquadrant(x, y); mistouchonarc = true ; updatecurrentangle(x, y); return true ; } break ; case motionevent.action_move: if (mistouchonarc) { updatecurrentangle(x, y); if (moncirqueprogresschangelistener != null ) moncirqueprogresschangelistener.onchange(mminprogress, mmaxprogress, integer.parseint(mtext.replace( "℃" , "" ))); } break ; case motionevent.action_up: mistouchonarc = false ; mtouchquadrant = 0 ; if (moncirqueprogresschangelistener != null ) moncirqueprogresschangelistener.onchangeend(mminprogress, mmaxprogress, integer.parseint(mtext.replace( "℃" , "" ))); break ; } invalidate(); return true ; } |
到这里基本这个自定义控件也就实现完了。但是!是不是!忘了点!什么?没错,就是让我蛋疼不已的圆环上下限值判断。
由于手指滑动的时候,当前的angle值的范围是0-360,因此不可能简单的限定上下限。没有做任何判断的话,在起点处是可以随意滑动的,如下图所示:
很明显这样是不行的,然后就是一阵鸡飞狗跳,简(ou)简(xin)单(li)单(xue)的一阵折腾之后,基本实现了要求,最后更新currentangle的代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
/** * 更新当前进度对应弧度 * * @param x 按下x坐标点 * @param y 按下y坐标点 */ private void updatecurrentangle( float x, float y) { //根据坐标转换成对应的角度 float pointx = x - mcenterx; float pointy = y - mcentery; float tan_x; //根据左边点所在象限处理过后的x值 float tan_y; //根据左边点所在象限处理过后的y值 double atan; //所在象限弧边angle //01:第一象限-右上角区域 //保证dragbitmap在峰值的时候不会因为滑到这个象限更新currentangle if (pointx >= 0 && pointy <= 0 ) { if (((mlastquadrant == 3 && mlastangle == 359 .f) || (mlastquadrant == 3 && mlastangle == 0 .f)) && mtouchquadrant != 1 ) return ; tan_x = pointx; tan_y = pointy * (- 1 ); atan = math.atan(tan_x / tan_y); //求弧边 mcurrentangle = ( int ) math.todegrees(atan) + 90 .f + mprogressoffest; mlastquadrant = 1 ; } //02:第二象限-左上角区域 if (pointx <= 0 && pointy <= 0 ) { if (((mlastquadrant == 3 && mlastangle == 359 .f) || (mlastquadrant == 3 && mlastangle == 0 .f)) && mtouchquadrant != 2 ) { return ; } tan_x = pointx * (- 1 ); tan_y = pointy * (- 1 ); atan = math.atan(tan_y / tan_x); //求弧边 mcurrentangle = ( int ) math.todegrees(atan) + mprogressoffest; mlastquadrant = 2 ; } //03:第三象限-左下角区域 if (pointx <= 0 && pointy >= 0 ) { tan_x = pointx * (- 1 ); tan_y = pointy; atan = math.atan(tan_x / tan_y); //求弧边 if (( int ) math.todegrees(atan) >= ( 90 .f - mprogressoffest)) { mcurrentangle = ( int ) math.todegrees(atan) - ( 90 .f - mprogressoffest); if (mlastangle >= 270 .f) { mcurrentangle = 359 .f; } } else { mcurrentangle = ( int ) math.todegrees(atan) + 270 .f + mprogressoffest; if (mlastangle <= 90 .f) { mcurrentangle = 0 .f; } } mlastquadrant = 3 ; } //04:第四象限-右下角区域 //保证dragbitmap在峰值的时候不会因为滑到这个象限更新currentangle if (pointx >= 0 && pointy >= 0 ) { if (((mlastquadrant == 3 && mlastangle == 359 .f) || (mlastquadrant == 3 && mlastangle == 0 .f)) && mtouchquadrant != 4 ) return ; tan_x = pointx; tan_y = pointy; atan = math.atan(tan_y / tan_x); //求弧边 mcurrentangle = ( int ) math.todegrees(atan) + 180 .f + mprogressoffest; mlastquadrant = 4 ; } mlastangle = mcurrentangle; } |
其实做之前就真的觉得是挺简单的一个自定义控件,结果万万没想到因为最后这么一点代码折腾了半天。虽然最后这坨代码看着确实挺蛋疼的,但是暂时也想不到什么好的方法了,先这样吧。
最后贴上完整代码:
https://github.com/horrarndoo...
总结
以上所述是小编给大家介绍的android自定义控件之可拖动控制的圆环控制条实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持!
原文链接:https://segmentfault.com/a/1190000018924061