iOS UISlider(滑块)

middle_img_v2_668d7a44-7bdc-4042-89a6-e5383fe750dg.png

如图所示实现调节档位的需求，就可以使用UISlider 控件来实现

也许你会遇到和我一样的疑惑：

1. 如何自定义Slider 的高度？
2. 如何自定义拖动滑块的样式？
3. 如何准确监听滑块改变的值？
   接下来我们一条一条的解决它。

如何自定义Slider 的高度

• 答案：自定义 Slider，重写trackRectForBounds 方法
  .h文件

@interface STSlider : UISlider

@end

.m文件

// 改变slider滑道的高的
@implementation STSlider

- (CGRect)trackRectForBounds:(CGRect)bounds
{
    return CGRectMake(0, 0, CGRectGetWidth(self.frame), 10);
}

@end

如何自定义拖动滑块的样式？

支持设置颜色和图片

1. 改变颜色 thumbTintColor
2. 设置图片

  [_sliderView setThumbImage:[UIImage imageNamed:@"sliderSpot"] forState:UIControlStateNormal];
        [_sliderView setThumbImage:[UIImage imageNamed:@"sliderSpot"] forState:UIControlStateHighlighted];

如何准确监听滑块改变的值

误区：用 UIControlEventTouchUpInside 来监听，这个不准确
正解：用 UIControlEventValueChanged 来监听处理

//添加监听
    [_sliderView addTarget:self action:@selector(sliderValurChanged:forEvent:) forControlEvents:UIControlEventValueChanged];

//处理
- (void)sliderValurChanged:(UISlider*)slider forEvent:(UIEvent*)event {
    UITouch*touchEvent = event.allTouches.allObjects[0];

    switch (touchEvent.phase) {
        case UITouchPhaseBegan:
            NSLog(@"开始拖动");
            break;
        case UITouchPhaseMoved:
            NSLog(@"正在拖动");
            break;
        case UITouchPhaseEnded:
            NSLog(@"结束拖动");
            [self sliderClick:slider];
            break;
        default:
            break;
    }
}
- (void)sliderClick:(UISlider *)slider {
    if (slider.value <= 0.5) {
        slider.value = 0.0;
    } else if (slider.value <= 1.5) {
        slider.value = 1.0;
    } else if (slider.value <= 2.5) {
        slider.value = 2.0;
    } else if (slider.value <= 3.5) {
        slider.value = 3.0;
    } else if (slider.value <= 4.5) {
        slider.value = 4.0;
    } else {
        slider.value = 5.0;
    }
    
    NSLog(@"===== %f", slider.value);
    
    self.gearLabel.text = [NSString stringWithFormat:@"%.f档", slider.value];
    self.audioVol = slider.value * 20;
    
}

最后是5档滑块的创建代码

- (STSlider *)sliderView {
    if (!_sliderView) {
        _sliderView = [[STSlider alloc]init];
        _sliderView.minimumTrackTintColor = [UIColor colorWithHexStr:@"0xED6C00"];
        _sliderView.maximumTrackTintColor = [UIColor colorWithHexStr:@"0xF6F6F6"];
        _sliderView.thumbTintColor = [UIColor colorWithHexStr:@"0xffffff"];
        [_sliderView setThumbImage:[UIImage imageNamed:@"sliderSpot"] forState:UIControlStateNormal];
        [_sliderView setThumbImage:[UIImage imageNamed:@"sliderSpot"] forState:UIControlStateHighlighted];
        _sliderView.maximumValue = 5;
        _sliderView.minimumValue = 0;
        _sliderView.continuous = NO;

        [_sliderView addTarget:self action:@selector(sliderValurChanged:forEvent:) forControlEvents:UIControlEventValueChanged];
        [self addSubview:_sliderView];
    }
    return _sliderView;
}