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

《【无限互联】iOS开发之自定义圆环式Slider》由会员分享，可在线阅读，更多相关《【无限互联】iOS开发之自定义圆环式Slider（7页珍藏版）》请在装配图网上搜索。

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:(UIEvent *)event;o

3、bjc 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:(UITouch *)touch withEv

4、ent:(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:

5、(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; ilabelsEvenSpacing count; i+) 28. /在圆上得百分比 29. CGFloat percentageAlongCircl

6、e = 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 centerP

7、oint = 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. #pragma mark - UIControl functions/开始跟踪触摸-(BOOL) beginTrackingWithTouch:(UITouch *)touc

8、h withEvent:(UIEvent *)event super beginTrackingWithTouch:touch withEvent:event; return YES;/继续跟踪触摸-(BOOL) continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event super continueTrackingWithTouch:touch withEvent:event; CGPoint lastPoint = touch locationInView:self; self moveHandle:lastP

9、oint; self sendActionsForControlEvents:UIControlEventValueChanged; return YES;/结束跟踪触摸-(void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event super endTrackingWithTouch:touch withEvent:event; if(_snapToLabels & labelsEvenSpacing != nil) CGPoint bestGuessPoint; float minDist = 360; /距离

10、 for (int i=0; ilabelsEvenSpacing count; i+) /在圆上得百分比 CGFloat percentageAlongCircle = i/(float)labelsEvenSpacing count; /度数 CGFloat degreesForLabel = percentageAlongCircle * 360; if(abs(fixedAngle - degreesForLabel) minDist) minDist = abs(fixedAngle - degreesForLabel); bestGuessPoint = self pointFro

11、mAngle:degreesForLabel + 90 + 180; CGPoint centerPoint = CGPointMake(self.frame.size.width/2, self.frame.size.height/2); angle = floor(AngleFromNorth(centerPoint, bestGuessPoint, NO); _currentValue = self valueFromAngle; self setNeedsDisplay; EFCircularSlider框架的使用 导入框架： #import EFCircularSlider.h 基本

12、用法： objc view plaincopyprint?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

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

14、print?1. EFCircularSlider *_minuteSlider; 2. EFCircularSlider *_hourSlider; EFCircularSlider *_minuteSlider; EFCircularSlider *_hourSlider; 初始化Sliderobjc view plaincopyprint?1. _minuteSlider = EFCircularSlider alloc initWithFrame:CGRectMake(10, 170, 300, 300); 2. _hourSlider = EFCircularSlider alloc

15、 initWithFrame:CGRectMake(55, 220, 210, 210); _minuteSlider = EFCircularSlider alloc initWithFrame:CGRectMake(10, 170, 300, 300); _hourSlider = EFCircularSlider alloc initWithFrame:CGRectMake(55, 220, 210, 210); 访问UISlider的值objc view plaincopyprint?1. _minuteSlider.lineWidth = 8; /设置线宽 2. _minuteSli

16、der.minimumValue = 0; /设置最小值 3. _minuteSlider.maximumValue = 60; /设置最大值 _minuteSlider.lineWidth = 8; /设置线宽 _minuteSlider.minimumValue = 0; /设置最小值 _minuteSlider.maximumValue = 60; /设置最大值objc view plaincopyprint?1. _hourSlider.lineWidth = 12; /设置线宽 2. _hourSlider.minimumValue = 0; /设置最小值 3. _hourSlide

17、r.maximumValue = 12; /设置最大值 4. _hourSlider.snapToLabels = NO; /设置标签不对齐 _hourSlider.lineWidth = 12; /设置线宽 _hourSlider.minimumValue = 0; /设置最小值 _hourSlider.maximumValue = 12; /设置最大值 _hourSlider.snapToLabels = NO; /设置标签不对齐 改变Slider外观显示的颜色objc view plaincopyprint?1. _minuteSlider.unfilledColor = UIColor

18、 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.fil

19、ledColor = UIColor colorWithRed:98/255.0f green:243/255.0f blue:252/255.0f alpha:1.0f; _minuteSlider.unfilledColor = UIColor colorWithRed:23/255.0f green:47/255.0f blue:70/255.0f alpha:1.0f; _minuteSlider.filledColor = UIColor colorWithRed:155/255.0f green:211/255.0f blue:156/255.0f alpha:1.0f; _hou

20、rSlider.unfilledColor = UIColor colorWithRed:23/255.0f green:47/255.0f blue:70/255.0f alpha:1.0f; _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, 40,

21、 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 syste

22、mFontOfSize:14.0f; 7. _hourSlider.labelColor = UIColor colorWithRed:127/255.0f green:229/255.0f blue:255/255.0f alpha:1.0f; _minuteSlider setInnerMarkingLabels:5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60; _minuteSlider.labelFont = UIFont systemFontOfSize:14.0f; _minuteSlider.labelColor = UIColor c

23、olorWithRed:76/255.0f green:111/255.0f blue:137/255.0f alpha:1.0f; _hourSlider setInnerMarkingLabels:1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12; _hourSlider.labelFont = UIFont systemFontOfSize:14.0f; _hourSlider.labelColor = UIColor colorWithRed:127/255.0f green:229/255.0f blue:255/255.0f alpha:1.0f; 改变手

24、柄样式objc view plaincopyprint?1. _minuteSlider.handleType = doubleCircleWithOpenCenter; 2. _minuteSlider.handleColor = _minuteSlider.filledColor; 3.4. _hourSlider.handleType = bigCircle; 5. _hourSlider.handleColor = _hourSlider.filledColor; _minuteSlider.handleType = doubleCircleWithOpenCenter; _minut

25、eSlider.handleColor = _minuteSlider.filledColor; _hourSlider.handleType = bigCircle; _hourSlider.handleColor = _hourSlider.filledColor; 设置Slider的行为objc view plaincopyprint?1. _minuteSlider addTarget:self action:selector(minuteDidChange:) forControlEvents:UIControlEventValueChanged; 2.3. _hourSlider

26、addTarget:self action:selector(hourDidChange:) forControlEvents:UIControlEventValueChanged; _minuteSlider addTarget:self action:selector(minuteDidChange:) forControlEvents:UIControlEventValueChanged; _hourSlider addTarget:self action:selector(hourDidChange:) forControlEvents:UIControlEventValueChanged;为Slider添加方法，当Slider的值改变时就会触发该方法。效果图：