1、【无限互联】IOS 开发之自定义圆环式 Slider前言 这里实现的是一个圆环形式的 Slider 滑动条效果。封装了 EFCircularSlider 类，利用该类可实现的效果有：基本的圆环滑动效果、双重圈滑动点的圆环滑动条效果，以及当下流行的滑动选择时间效果。EFCircularSlider 框架简介 由于滑块是一个标准的 UIControl，所以 EFCircularSlider 是一个集成 UIControl 的类。 该类绘制了两个空心圆，一个作为初始滑动条，一个用来填充滑动条，手柄拖动时，根据三角函数计算出当前手柄点所在的地方，绘制弧线，覆盖在原初始滑动条之上。滑动手柄的样式可选择，
2、还可根据需要添加文字标签，优美的改变了 UISlider 的外观。 滑块的实现通过 UIControl 的以下协议方法：o /开始跟踪触摸 -(BOOL) beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event;o /继续 跟踪触摸 -(BOOL) continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event;o /结 束跟踪触摸 -(void)endTrackingWithTouch:(UITouch *)touch withEvent:
3、(UIEvent *)event;objc view plaincopyprint?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:(UITo
4、uch *)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)end
5、TrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event 22. super endTrackingWithTouch:touch withEvent:event; 23.24. if(_snapToLabels 26. float minDist = 360; /距离 27. for (int i=0; ilabelsEvenSpacing count; i+) 28. /在圆上得百分比 29. CGFloat percentageAlongCircle = i/(float)labelsEvenSpacing count;
6、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.wid
7、th/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 plaincopyprint?1. EFCircularSlider* circularSlider
8、= 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 plaincopyprint?1.
9、 EFCircularSlider *_minuteSlider; 2. EFCircularSlider *_hourSlider; 初始化 Sliderobjc view plaincopyprint?1. _minuteSlider = EFCircularSlider alloc initWithFrame:CGRectMake(10, 170, 300, 300); 2. _hourSlider = EFCircularSlider alloc initWithFrame:CGRectMake(55, 220, 210, 210); 访问 UISlider 的值objc view p
10、laincopyprint?1. _minuteSlider.lineWidth = 8; /设置线宽 2. _minuteSlider.minimumValue = 0; /设置最小值 3. _minuteSlider.maximumValue = 60; /设置最大值 objc view plaincopyprint?1. _hourSlider.lineWidth = 12; /设置线宽 2. _hourSlider.minimumValue = 0; /设置最小值 3. _hourSlider.maximumValue = 12; /设置最大值 4. _hourSlider.snapT
11、oLabels = NO; /设置标签不对齐 改变 Slider 外观显示的颜色objc view plaincopyprint?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.unf
12、illedColor = 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 plaincopyprint?1. _minuteSlider setInnerMarkingLabels:“5“, “10“, “15“, “20“, “25“, “30“, “35
13、“, “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“;
14、 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 plaincopyprint?1. _minuteSlider.handleType = doubleCircleWithOpenCenter; 2. _minuteSlider.handleColor = _minuteSlider.fi
15、lledColor; 3.4. _hourSlider.handleType = bigCircle; 5. _hourSlider.handleColor = _hourSlider.filledColor; 设置 Slider 的行为objc view plaincopyprint?1. _minuteSlider addTarget:self action:selector(minuteDidChange:) forControlEvents:UIControlEventValueChanged; 2.3. _hourSlider addTarget:self action:selector(hourDidChange:) forControlEvents:UIControlEventValueChanged; 为 Slider 添加方法，当 Slider 的值改变时就会触发该方法。效果图：
