效果图

 

 

用到的技术

 

1. View 的测量

2. Canvas 绘图技巧

3. 触摸事件的计算

4. 接口回调

 

 

整体思路

 

1. 需要画两个圆弧一个是底部固定不变的另一个是更随手指移动渐变的圆弧。

2. 圆环上的分割线可以利用画布的旋转进行画线。

3. 文字的显示需要根据到圆心的距离进行计算。

4. 根据手指滑动的x、y求当前滑动的范围的角度根据起始度数相加。

 

代码解读

 

画底部圆环

 

使用 drawArc(RectF oval，float startAngle, float sweepAngle, boolean useCenter, Paint paint) 。

 

参数解读：

 

• oval：圆环外的矩形 

• startAngle：开始角度 

• sweepAngle：扫描角度 

• useCenter：是否和圆心连线 

• paint：画笔 

 

开始的0度角如下图 :

 

 

画带渐变色的圆

 

渐变色使用的是 SweepGradient :

 

 

画线

 

每隔3度旋转故整个圆需要120条线：

 

 

画文字

 

这个比较复杂些需要计算x、y轴坐标 :

由图可以看出构成一个夹角为45度的直角三角形，斜边z 的长度为 mRadius + circleWidth / 2 + 45; 

 

circleWidth ：为圆的宽度 ;

 

45 为文字离圆的距离 ;

 

所以x点为：

 

//斜边int c = mRadius + circleWidth / 2 + 45;x = (int) Math.sqrt((c * c / 2));

 

下面是画文字的代码：

 

 

这样整个界面就完成了但是还没加上滑动监听。

 

滑动监听

 

手指滑动需要 得到当前手指所在象限才好计算度数 ，因为 每个象限和圆心的夹角都是0~90度。

 

首先先计算每个象限的夹角 ：

 

可以根据手指移动的x点计算出cos，然后求出对应的角度。

 

float v = x / (float) Math.sqrt(x * x + y * y);// 根据cos求角度double acos = Math.acos(v);acos = Math.toDegrees(acos);

 

整个计算角度的代码如下：