【无限互联】IOS开发之自定义圆环式Slider.doc

前言
· 这里实现的是一个圆环形式的Slider滑动条效果。封装了EFCircularSlider类，利用该类可实现的效果有：基本的圆环滑动效果、双重圈滑动点的圆环滑动条效果，以及当下流行的滑动选择时间效果。

EFCircularSlider框架简介
· 由于滑块是一个标准的UIControl，所以EFCircularSlider是一个集成UIControl的类。
· 该类绘制了两个空心圆，一个作为初始滑动条，一个用来填充滑动条，手柄拖动时，根据三角函数计算出当前手柄点所在的地方，绘制弧线，覆盖在原初始滑动条之上。滑动手柄的样式可选择，还可根据需要添加文字标签，优美的改变了UISlider的外观。
· 滑块的实现通过UIControl的以下协议方法：
o //开始跟踪触摸
§ -(BOOL) beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event;
o //继续跟踪触摸
§ -(BOOL) continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event;
o //结束跟踪触摸
§ -(void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event;
[objc] view plaincopy
1. #pragma mark - UIControl functions  
2. //开始跟踪触摸  
3. -(BOOL) beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {  
4.     [super beginTrackingWithTouch:touch withEvent:event];  
5.       
6.     return YES;  
7. }  
8.   
9. //继续跟踪触摸  
10. -(BOOL) continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {  
11.     [super continueTrackingWithTouch:touch withEvent:event];  
12.       
13.     CGPoint lastPoint = [touch locationInView:self];  
14.     [self moveHandle:lastPoint];  
15.     [self sendActionsForControlEvents:UIControlEventValueChanged];  
16.       
17.     return YES;  
18. }  
19.   
20. //结束跟踪触摸  
21. -(void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {  
22.     [super endTrackingWithTouch:touch withEvent:event];  
23.       
24.     if(_snapToLabels && labelsEvenSpacing != nil) {  
25.         CGPoint bestGuessPoint;  
26.         float minDist = 360;    //距离  
27.         for (int i=0; i<[labelsEvenSpacing count]; i++) {  
28.             //在圆上得百分比  
29.             CGFloat percentageAlongCircle = i/(float)[labelsEvenSpacing count];  
30.             //度数  
31.             CGFloat degreesForLabel = percentageAlongCircle * 360;  
32.             if(abs(fixedAngle - degreesForLabel) < minDist) {  
33.                 minDist = abs(fixedAngle - degreesForLabel);  
34.                 bestGuessPoint = [self pointFromAngle:degreesForLabel + 90 + 180];  
35.             }  
36.         }  
37.         CGPoint centerPoint = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);  
38.         angle = floor(AngleFromNorth(centerPoint, bestGuessPoint, NO));  
39.         _currentValue = [self valueFromAngle];  
40.         [self setNeedsDisplay];  
41.     }  
42. }  

EFCircularSlider框架的使用

· 导入框架：                  
#import "EFCircularSlider.h"

· 基本用法：    
[objc] view plaincopy
1. EFCircularSlider* circularSlider = [[EFCircularSlider alloc] initWithFrame:CGRectMake(50, 180, 220, 220)];  
2. [circularSlider addTarget:self action:@selector(valueChanged:) forControlEvents:UIControlEventValueChanged];  
3. [self.view addSubview:circularSlider];  
上述代码就能实现EFCircularSlider框架中封装的功能，使用简单，效果优美。
· 定义全局变量： 
[objc] view plaincopy
1. EFCircularSlider *_minuteSlider;  
2. EFCircularSlider *_hourSlider;  

· 初始化Slider
[objc] view plaincopy
1. _minuteSlider = [[EFCircularSlider alloc] initWithFrame:CGRectMake(10, 170, 300, 300)];  
2. _hourSlider = [[EFCircularSlider alloc] initWithFrame:CGRectMake(55, 220, 210, 210)];  
· 访问UISlider的值
[objc] view plaincopy
1. _minuteSlider.lineWidth = 8;        //设置线宽  
2. _minuteSlider.minimumValue = 0;     //设置最小值  
3. _minuteSlider.maximumValue = 60;    //设置最大值  

[objc] view plaincopy
1. _hourSlider.lineWidth = 12;     //设置线宽  
2. _hourSlider.minimumValue = 0;   //设置最小值  
3. _hourSlider.maximumValue = 12;  //设置最大值  
4. _hourSlider.snapToLabels = NO;  //设置标签不对齐  
· 改变Slider外观显示的颜色
[objc] view plaincopy
1. _minuteSlider.unfilledColor = [UIColor colorWithRed:23/255.0f green:47/255.0f blue:70/255.0f alpha:1.0f];  
2. _minuteSlider.filledColor = [UIColor colorWithRed:155/255.0f green:211/255.0f blue:156/255.0f alpha:1.0f];  
3.   
4. _hourSlider.unfilledColor = [UIColor colorWithRed:23/255.0f green:47/255.0f blue:70/255.0f alpha:1.0f];  
5. _hourSlider.filledColor = [UIColor colorWithRed:98/255.0f green:243/255.0f blue:252/255.0f alpha:1.0f];  

· 设置文字标签
[objc] view plaincopy
1. [_minuteSlider setInnerMarkingLabels:@[@"5", @"10", @"15", @"20", @"25", @"30", @"35", @"40", @"45", @"50", @"55", @"60"]];  
2.     _minuteSlider.labelFont = [UIFont systemFontOfSize:14.0f];  
3.     _minuteSlider.labelColor = [UIColor colorWithRed:76/255.0f green:111/255.0f blue:137/255.0f alpha:1.0f];  
4.   
5.     [_hourSlider setInnerMarkingLabels:@[@"1", @"2", @"3", @"4", @"5", @"6", @"7", @"8", @"9", @"10", @"11", @"12"]];  
6.     _hourSlider.labelFont = [UIFont systemFontOfSize:14.0f];  
7.     _hourSlider.labelColor = [UIColor colorWithRed:127/255.0f green:229/255.0f blue:255/255.0f alpha:1.0f];  

· 改变手柄样式
[objc] view plaincopy
1. _minuteSlider.handleType = doubleCircleWithOpenCenter;  
2. _minuteSlider.handleColor = _minuteSlider.filledColor;  
3.   
4. _hourSlider.handleType = bigCircle;  
5. _hourSlider.handleColor = _hourSlider.filledColor;  

· 设置Slider的行为
[objc] view plaincopy
1. [_minuteSlider addTarget:self action:@selector(minuteDidChange:) forControlEvents:UIControlEventValueChanged];  
2.   
3. [_hourSlider addTarget:self action:@selector(hourDidChange:) forControlEvents:UIControlEventValueChanged];  

                    为Slider添加方法，当Slider的值改变时就会触发该方法。

效果图：