神刀安全网

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

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

造轮子的初衷


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

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函数就可以计算出角度α了.如图所示.

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

难道我们单单只需要计算出角度的大小就可以了吗?不,因为旋转的方向可以是顺时针也可能是逆时针,所以我们还要区别对待.其实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下载传送门🚪

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » SDSilderView:一款圆形的音量调节旋钮

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址