造輪子的初衷
前兩天在工作當中遇到需要使用UISilder,但是需要類似于一個旋鈕形式,當時我就懵逼了,從網(wǎng)上找的就各種爆紅,要不就是幾年前的三方,時代都在進步,旋鈕形式的silder確實也要更新一下了.借著國慶節(jié)這幾天沒事干(主要是單身狗的原因??),所以哪也不去,在家把這個輪子制作一下,方便在工作中使用.SDSilderView整體的展示效果如下.
SDSilderView快速創(chuàng)建以及值的變化
SDSilderView創(chuàng)建非常的簡單,我們只需要調(diào)用如下方法就可以快速創(chuàng)建SDSilderView了.
+(instancetype)initWithPosition:(CGPoint)positon viewRadius:(CGFloat)viewRadius;
因為SDSilderView整體是一個圓形,為了不必要的麻煩,我把SDSilderView的frame參數(shù)拆分成兩部分,一部分是起始位置信息參數(shù)positon,另外一部分就是 它的半徑參數(shù)viewRadius.創(chuàng)建示例如下所示.
SDSilderView *silderView = [SDSilderView initWithPosition:CGPointMake(100, 100) viewRadius:100];
[self.view addSubview: silderView];
那么創(chuàng)建完成了,我們就關(guān)心如何實時地獲取到SilderView的當前值呢?我一共提供了兩個方案.
- 一是實現(xiàn)如下的SDSilderViewDelegate的代理方法,在代理方法中newChangeValue就是當前的value值;
-(void)silderViewNewChangeValue:(float)newChangeValue;
使用示例其查看Demo,我把主要的部分貼出來.(非常簡單了)
silderView.delegate = self;
-(void)silderViewNewChangeValue:(float)newChangeValue{
_myLabel.text = [NSString stringWithFormat:@"%.2f",newChangeValue];
}
- 二是接受通知(通知名稱的宏:KSDSilderViewNewValue),本人已經(jīng)通知的object把值(值的類型為NSNumber類型)發(fā)出來了,直接接受即可.當然了 不要忘了釋放通知中心的觀察者.使用范例還是要查看Demo,主要代碼如下所示.
//添加觀察者
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(changNewValue:) name:KSDSilderViewNewValue object:nil];
//觀察方法的實現(xiàn)
-(void)changNewValue:(NSNotification *)sender{
NSNumber * newChangeValue = sender.object;
_myLabel.text = [NSString stringWithFormat:@"%.2f",[newChangeValue floatValue]];
}
//釋放觀察者
-(void)dealloc{
[[NSNotificationCenter defaultCenter] removeObserver:self];
}
SDSilderView的設(shè)計思路
SDSilderView的實現(xiàn)主要有兩部分,一部分是角度的計算和控制,另外一部分則是旋轉(zhuǎn)的實現(xiàn).
我們先說一下,旋轉(zhuǎn)的實現(xiàn),一開始,我想使用旋轉(zhuǎn)手勢來實現(xiàn)旋轉(zhuǎn),但是旋轉(zhuǎn)手勢是需要兩個觸點的,跟我們的設(shè)計初衷是不相符的,所以我就使用了*-(void)touchesBegan:(NSSet<UITouch > )touches withEvent:(UIEvent )event和-(void)touchesMoved:(NSSet<UITouch *> )touches withEvent:(UIEvent )event這兩方法進行旋轉(zhuǎn)的實現(xiàn).但是呢,這兩個方法不能直接測試出旋轉(zhuǎn)的角度.所以我們需要根據(jù)起始點startPoint和變動的點movePoint和中心點center然后根據(jù)acos函數(shù)就可以計算出角度α了.如圖所示.
難道我們單單只需要計算出角度的大小就可以了嗎?不,因為旋轉(zhuǎn)的方向可以是順時針也可能是逆時針,所以我們還要區(qū)別對待.其實direction這個布爾值就是用來區(qū)分方向的.計算角度的大小和方向的代碼具體如下.
//計算角度大小和角度的方向
-(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;
}
因為我們要讓旋鈕旋轉(zhuǎn)的角度范圍是有限的,不能無限旋轉(zhuǎn),所以我們要控制角度,同時能,由于使用者可能旋轉(zhuǎn)的角度過大,一下子就超出我們設(shè)定的范圍,所以我們也要對這種情況進行控制,兩種情況控制完成之后,我們就需要對RotateView進行仿射變換.核心代碼如下.
//控制旋轉(zhuǎn)的角度
if (KMinRotation<= _ownRotation &&_ownRotation <= KMaxRotation) {
//如果選擇的角度超過預(yù)設(shè)最大值或者最小值,那么重新定義這個旋轉(zhuǎn)的角度
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這么有質(zhì)感,有沒有想下載的沖動呢?為了這個沖動,我早就給大家準備好了傳送門.關(guān)于SDSilderView的相關(guān)介紹就介紹到這了,最后祝大家國慶節(jié)快樂.????????????
