SDSilderView:一款圆形的音量调节旋钮

造轮子的初衷

---

前两天在工作当中遇到需要使用UISilder,但是需要类似于一个旋钮形式,当时我就懵逼了,从网上找的就各种爆红,要不就是几年前的三方,时代都在进步,旋钮形式的silder确实也要更新一下了.借着国庆节这几天没事干(主要是单身狗的原因😭),所以哪也不去,在家把这个轮子制作一下,方便在工作中使用.SDSilderView整体的展示效果如下.

SDSilderView快速创建以及值的变化

---

SDSilderView创建非常的简单,我们只需要调用如下方法就可以快速创建SDSilderView了.

+(instancetype)initWithPosition:(CGPoint)positon viewRadius:(CGFloat)viewRadius;

因为SDSilderView整体是一个圆形,为了不必要的麻烦,我把SDSilderView的frame参数拆分成两部分,一部分是起始位置信息参数positon,另外一部分就是 它的半径参数viewRadius.创建示例如下所示.

    SDSilderView *silderView = [SDSilderView initWithPosition:CGPointMake(100, 100) viewRadius:100];
    
    [self.view addSubview: silderView];

那么创建完成了,我们就关心如何实时地获取到SilderView的当前值呢?我一共提供了两个方案.

• 一是实现如下的SDSilderViewDelegate的代理方法,在代理方法中newChangeValue就是当前的value值;

-(void)silderViewNewChangeValue:(float)newChangeValue;

使用示例其查看Demo,我把主要的部分贴出来.(非常简单了)

    silderView.delegate = self;

-(void)silderViewNewChangeValue:(float)newChangeValue{
    _myLabel.text = [NSString stringWithFormat:@"%.2f",newChangeValue];
}

• 二是接受通知(通知名称的宏:KSDSilderViewNewValue),本人已经通知的object把值(值的类型为NSNumber类型)发出来了,直接接受即可.当然了 不要忘了释放通知中心的观察者.使用范例还是要查看Demo,主要代码如下所示.

//添加观察者
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(changNewValue:) name:KSDSilderViewNewValue object:nil];

//观察方法的实现
-(void)changNewValue:(NSNotification *)sender{

    NSNumber * newChangeValue = sender.object;
    _myLabel.text = [NSString stringWithFormat:@"%.2f",[newChangeValue floatValue]];

}

//释放观察者
-(void)dealloc{

    [[NSNotificationCenter defaultCenter] removeObserver:self];

}

SDSilderView的设计思路

---

SDSilderView的实现主要有两部分,一部分是角度的计算和控制,另外一部分则是旋转的实现.

我们先说一下,旋转的实现,一开始,我想使用旋转手势来实现旋转,但是旋转手势是需要两个触点的,跟我们的设计初衷是不相符的,所以我就使用了**-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event和-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event**这两方法进行旋转的实现.但是呢,这两个方法不能直接测试出旋转的角度.所以我们需要根据起始点startPoint和变动的点movePoint和中心点center然后根据acos函数就可以计算出角度α了.如图所示.

难道我们单单只需要计算出角度的大小就可以了吗?不,因为旋转的方向可以是顺时针也可能是逆时针,所以我们还要区别对待.其实direction这个布尔值就是用来区分方向的.计算角度的大小和方向的代码具体如下.

//计算角度大小和角度的方向
-(CGFloat)getAnglesWithThreePoint:(CGPoint)pointA pointB:(CGPoint)pointB pointC:(CGPoint)pointC{
    CGFloat x1 = pointA.x - pointB.x;
    CGFloat y1 = pointA.y - pointB.y;
    CGFloat x2 = pointC.x - pointB.x;
    CGFloat y2 = pointC.y - pointB.y;
    CGFloat x = x1 * x2 + y1 * y2;
    CGFloat y = x1 * y2 - x2 * y1;
    CGFloat angle = acos(x/sqrt(x*x+y*y));
    
    //方向
    if (x*y < 0) {
        self.direction = NO;
    }else{
        self.direction = YES;
    }
    return angle;
}

因为我们要让旋钮旋转的角度范围是有限的,不能无限旋转,所以我们要控制角度,同时能,由于使用者可能旋转的角度过大,一下子就超出我们设定的范围,所以我们也要对这种情况进行控制,两种情况控制完成之后,我们就需要对RotateView进行仿射变换.核心代码如下.

    //控制旋转的角度
    if (KMinRotation<=  _ownRotation &&_ownRotation <= KMaxRotation) {
        
        //如果选择的角度超过预设最大值或者最小值,那么重新定义这个旋转的角度
        if (self.direction && self.ownRotation +rotation > KMaxRotation) {
            rotation = KMaxRotation - self.ownRotation;
        }
        
        if (!self.direction  && self.ownRotation -rotation < KMinRotation) {
            rotation =self.ownRotation- KMinRotation;

        }
        
        //对self进行仿射变换
        if (self.direction) {
            self.transform = CGAffineTransformRotate(self.transform, rotation);
            self.ownRotation  = self.ownRotation +rotation;

            
        }else{
            
            self.transform = CGAffineTransformRotate(self.transform, -rotation);
            self.ownRotation  = self.ownRotation -rotation;

        }
        
    }

SDSilderView的落幕

---

看到SDSilderView这么有质感,有没有想下载的冲动呢?为了这个冲动,我早就给大家准备好了传送门.关于SDSilderView的相关介绍就介绍到这了,最后祝大家国庆节快乐.🎉🎉🎉🎉🎉🎉

—>SDSilderView下载传送门🚪