iOS开发之自定义圆环式Slider

来源：互联网发布：适合开发的linux系统编辑：程序博客网时间：2024/05/24 06:48

前言

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

EFCircularSlider框架简介

由于滑块是一个标准的UIControl，所以EFCircularSlider是一个集成UIControl的类。
该类绘制了两个空心圆，一个作为初始滑动条，一个用来填充滑动条，手柄拖动时，根据三角函数计算出当前手柄点所在的地方，绘制弧线，覆盖在原初始滑动条之上。滑动手柄的样式可选择，还可根据需要添加文字标签，优美的改变了UISlider的外观。
滑块的实现通过UIControl的以下协议方法：
- //开始跟踪触摸
  - -(BOOL) beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event;
- //继续跟踪触摸
  - -(BOOL) continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event;
- //结束跟踪触摸
  - -(void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event;

#pragma mark - UIControl functions//开始跟踪触摸-(BOOL) beginTrackingWithTouch:(UITouch *)touch 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:lastPoint];    [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;    //距离        for (int i=0; i<[labelsEvenSpacing count]; i++) {            //在圆上得百分比            CGFloat percentageAlongCircle = i/(float)[labelsEvenSpacing count];            //度数            CGFloat degreesForLabel = percentageAlongCircle * 360;            if(abs(fixedAngle - degreesForLabel) < minDist) {                minDist = abs(fixedAngle - degreesForLabel);                bestGuessPoint = [self pointFromAngle: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"

基本用法：

    EFCircularSlider* circularSlider = [[EFCircularSlider alloc] initWithFrame:CGRectMake(50, 180, 220, 220)];    [circularSlider addTarget:self action:@selector(valueChanged:) forControlEvents:UIControlEventValueChanged];    [self.view addSubview:circularSlider];

上述代码就能实现EFCircularSlider框架中封装的功能，使用简单，效果优美。

定义全局变量：

    EFCircularSlider *_minuteSlider;    EFCircularSlider *_hourSlider;

初始化Slider

    _minuteSlider = [[EFCircularSlider alloc] initWithFrame:CGRectMake(10, 170, 300, 300)];    _hourSlider = [[EFCircularSlider alloc] initWithFrame:CGRectMake(55, 220, 210, 210)];

访问UISlider的值

    _minuteSlider.lineWidth = 8;        //设置线宽    _minuteSlider.minimumValue = 0;     //设置最小值    _minuteSlider.maximumValue = 60;    //设置最大值

    _hourSlider.lineWidth = 12;     //设置线宽    _hourSlider.minimumValue = 0;   //设置最小值    _hourSlider.maximumValue = 12;  //设置最大值    _hourSlider.snapToLabels = NO;  //设置标签不对齐

改变Slider外观显示的颜色

    _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];    _hourSlider.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];

设置文字标签

[_minuteSlider setInnerMarkingLabels:@[@"5", @"10", @"15", @"20", @"25", @"30", @"35", @"40", @"45", @"50", @"55", @"60"]];    _minuteSlider.labelFont = [UIFont systemFontOfSize:14.0f];    _minuteSlider.labelColor = [UIColor colorWithRed: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];

改变手柄样式

    _minuteSlider.handleType = doubleCircleWithOpenCenter;    _minuteSlider.handleColor = _minuteSlider.filledColor;    _hourSlider.handleType = bigCircle;    _hourSlider.handleColor = _hourSlider.filledColor;

设置Slider的行为

    [_minuteSlider addTarget:self action:@selector(minuteDidChange:) forControlEvents:UIControlEventValueChanged];    [_hourSlider addTarget:self action:@selector(hourDidChange:) forControlEvents:UIControlEventValueChanged];

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

效果图：

0 0