iOS 圆环型滑块(Circle Slider)

一、圆环型滑块的设计

• 最近设计师设计了一个圆环型滑块，其作用和UISlider差不多，用于拖动改变播放音频的进度和指示音频的播放进度。

• 大概的样子如下图：

  
  图一 设计图
• 有如下的特点：
  • 滑动的响应区域为圆环上，并且靠近滑块；
  • 点击滑块时，滑块有一个放大的动画，手指离开屏幕时滑块恢复原来大小；
  • 当value=0%时，滑块不可以再逆时针滑动，当value=100%时，滑块不可以再顺时针滑动。
  • 最后我自己再加了一个设计，指示音频loading的进度(这样以来圆环就有了三层)。

二、成果展示Demo

Github 传送门

1. 重复滑动

图二 重复滑动

2. 限定360度和有loading的进度

图三 限定360度

三、接入使用

1. 接入

直接将我的项目中ZCircleSlider文件夹中的ZCircleSlider.h 和 ZCircleSlider.m拖到项目中即可

2.使用

//ZCircleSlider的背景色是透明的，不会挡住下面View
- (ZCircleSlider *)circleSlider {
    if (!_circleSlider) {
        _circleSlider = [[ZCircleSlider alloc] initWithFrame:CGRectMake((kScreenWidth - 300) / 2.0, (kScreenHeight - 300) / 2.0, 300, 300)];
        //走过的进度的颜色
        _circleSlider.minimumTrackTintColor = kUIColorFromRGB(0x1482f0);
        //loading进度的颜色。如果loading = 1，即loading完成，那么也是圆环的颜色，同于backgroundTintColor
        _circleSlider.maximumTrackTintColor = kUIColorFromRGB(0xE62E2E);
        //圆环的颜色
        _circleSlider.backgroundTintColor = [UIColor colorWithWhite:0 alpha:0.2];
        //圆环的宽
        _circleSlider.circleBorderWidth = 5.0f;
        //圆形滑块的半径
        _circleSlider.thumbRadius = 8;
        //圆形滑块放大效果的半径
        _circleSlider.thumbExpandRadius = 12.5;
        //圆形滑块的颜色
        _circleSlider.thumbTintColor = [UIColor redColor];
        //圆环的半径
        _circleSlider.circleRadius = 260 / 2.0 + 2;
        //设定初始值value = 0
        _circleSlider.value = 0;
        //设定loadingProgress的初始值 = 0
        _circleSlider.loadProgress = 0;
        //开始点击，响应事件
        [_circleSlider addTarget:self
                          action:@selector(circleSliderTouchDown:)
                forControlEvents:UIControlEventTouchDown];
        //拖动过程中，响应事件
        [_circleSlider addTarget:self
                          action:@selector(circleSliderValueChanging:)
                forControlEvents:UIControlEventValueChanged];
        //拖动结束，响应事件
        [_circleSlider addTarget:self
                          action:@selector(circleSliderValueDidChanged:)
                forControlEvents:UIControlEventTouchUpInside];
    }
    return _circleSlider;
}

#pragma mark - action

/*以下三个方法，都要添加对slider.interaction的判断。
 *因为虽然看起来是个圆环，但是响应手势的区域确实整个矩形的View
 *在内部添加了interaction这个属性用于限定响应区域
 */
- (IBAction)circleSliderTouchDown:(ZCircleSlider *)slider {
    if (!slider.interaction) {
        return;
    }
    
}

- (IBAction)circleSliderValueChanging:(ZCircleSlider *)slider {
    if (!slider.interaction) {
        return;
    }
    self.currentValueLabel.text = [NSString stringWithFormat:@"当前值：%.0f",slider.value * 100];
    self.progressSlider.value = slider.value;
}

- (IBAction)circleSliderValueDidChanged:(ZCircleSlider *)slider {
    if (!slider.interaction) {
        return;
    }
    self.finalValueLabel.text = [NSString stringWithFormat:@"最终值：%.0f",slider.value * 100];
}

四、实现原理

简单来说就是，整个控件继承与UIControl，根据value，loadProgress的值改变重新绘制layer和改变thumb的位置；根据手势所在的位置，重新绘制layer和改变thumb的位置，并改变value。

1. 根据所给value绘制圆弧

circleSlider.value和circleSlider.loadProgress，都是绘制圆弧。

1）在- (void)drawRect:(CGRect)rect;方法中绘制圆弧

在iOS中，圆的0弧度的位置是圆心(x,y)的正右侧(x+r,y)
这里我选择起始位置为-M_PI_2弧度，即圆心的正上方(x,y-r);
弧长对应的变量就是运动的点相对于起点旋转过的角度，而这个角度就等于value／1.0 * 360
下面给出了加载进度圆弧的绘制方法，value的圆弧绘制方法同理

- (void)drawRect:(CGRect)rect {
    //加载的进度
    UIBezierPath *loadPath = [UIBezierPath bezierPath];
    CGFloat loadStart = -M_PI_2;
    CGFloat loadCurre = loadStart + 2 * M_PI * self.loadProgress;
    
    [loadPath addArcWithCenter:self.drawCenter
                        radius:self.radius
                    startAngle:loadStart
                      endAngle:loadCurre
                     clockwise:YES];
    CGContextSaveGState(ctx);
    CGContextSetShouldAntialias(ctx, YES);
    CGContextSetLineWidth(ctx, self.circleBorderWidth);
    CGContextSetStrokeColorWithColor(ctx, self.maximumTrackTintColor.CGColor);
    CGContextAddPath(ctx, loadPath.CGPath);
    CGContextDrawPath(ctx, kCGPathStroke);
    CGContextRestoreGState(ctx);
}

2) 在值改变的时候重新绘制layer

在值改变的时候调用setNeedsDisplay方法重新绘制layer

- (void)setLoadProgress:(float)loadProgress {
    _loadProgress = loadProgress;
    [self setNeedsDisplay];
}

2.拖动控制，以及保证thumb(滑块的那个圆点)在圆弧上运动

这里主要给出了解决的思路方法，具体的实现可到Github中查看

主要是在UIControl的以下三个方法上做文章：

//点击开始
- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event;

//拖动过程中
- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event;

//拖动结束
- (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event;

1) 对于拖动控制，以及保证thumb在圆弧上运动可以通过以下这道数学题做抽象

1.设定平面直角坐标系原点为O(0,0)，向右为x轴的正方向，向下为y轴的正方向；--------(iOS的屏幕坐标系)
2.在坐标系中有一个已知的圆C(a,b)，半径为r；--------(圆环型Slider)
3.平面内任意一点S(m,n)；--------(点击的位置)
求：
    1）点S到圆C的最短距离是否小于44；（限定点击响应的区域为圆弧内外44个点的区域）
    2）线段SC与圆的交点T(xT,yT)；(thumb的位置，肯定在圆弧上)
    3）线段ST的距离是否小于44；（限定点击开始时的响应区域为以thumb圆心，半径为44的圆以内）

2) 对于当value=0%时，滑块不可以再逆时针滑动，当value=100%时，滑块不可以再顺时针滑动。

1. 平面内一个圆C半径为r，其圆心位于坐标系原点，即C(0,0)，圆弧上有一点T(x,y);
2. 坐标系可分为第一、二、三和四象限。
    1）那么当点T相对于起始点(0,-r)，顺时针转过的角度<60度时，禁止移动到第二，三，四象限；
    2）当点T相对于起始点(0,-r)，顺时针转过角度>300度时，禁止移动到第一，二，三象限；