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的相关介绍就介绍到这了,最后祝大家国庆节快乐.🎉🎉🎉🎉🎉🎉
