简单描述下这篇文章需要用到的技术:
- View的测量
- Canvas绘图技巧
- 触摸事件的计算
接口回调
整体思路
- 需要画两个圆弧一个是底部固定不变的另一个是更随手指移动渐变的圆弧
- 圆环上的分割线可以利用画布的旋转进行画线
- 文字的显示需要根据到圆心的距离进行计算。
- 根据手指滑动的x、y求当前滑动的范围的角度根据起始度数相加。
代码解读
- 画底部圆环
使用drawArc(RectF oval,float startAngle, float sweepAngle, boolean useCenter, Paint paint)
参数解读:
oval:圆环外的矩形
startAngle:开始角度
sweepAngle:扫描角度
useCenter:是否和圆心连线
paint:画笔
这里简单说下开始的0度角
mArcRectf = new RectF(mCenter - mRadius, mCenter - mRadius, mCenter + mRadius, mCenter + mRadius);
//画底部纯白色圆
canvas.drawArc(mArcRectf, 135, 270, false, mArcPaint);
2.画带渐变色的圆,渐变色使用的是SweepGradient
int[] colors = {
0xFFE5BD7D, 0xFFFAAA64,
0xFFFFFFFF, 0xFF6AE2FD,
0xFF8CD0E5, 0xFFA3CBCB,
0xFFBDC7B3, 0xFFD1C299, 0xFFE5BD7D,};
//渐变色
mSweepGradient = new SweepGradient(mCenter, mCenter, colors, null);
// 设置画笔渐变色
mArcPaint.setSha