【iOS开发】UISlider使用详解及滑动间隔固定数值处理

UISlider是开发中不太常用到的一种基础控件。虽然不常用到， 但是我们却常见到：

手机系统设置里->显示与亮度，就有这样的一个slider：

显示与亮度

系统的UISlider创建出来也是如此。

但是在实际开发中， 设计师根据产品风格设计出不同的slider样式后， 这很多人都选择直接去自定义view来实现效果， 其实这样超麻烦！

自定义的slider无外乎就是最大最小值的样式， 滑块的样式，以及滑竿的样式等。

这样自定义完成可以依靠UISlider的API来实现：

// 默认为nil， 控件左侧的图像
@property(nullable, nonatomic,strong) UIImage *minimumValueImage;      

// 默认为nil， 控件右侧的图像
@property(nullable, nonatomic,strong) UIImage *maximumValueImage;  

// 滑块左边线条的图像
- (void)setMinimumTrackImage:(nullable UIImage *)image forState:(UIControlState)state;

// 滑块右边线条的图像
- (void)setMaximumTrackImage:(nullable UIImage *)image forState:(UIControlState)state;

// 滑块左边线条的颜色
@property(nullable, nonatomic,strong) UIColor *minimumTrackTintColor;

// 滑块右边线条的颜色
@property(nullable, nonatomic,strong) UIColor *maximumTrackTintColor；

/**
 *  这里有个小重点：
 *  如果即设置了滑块的图像，又设置了滑块的颜色，那么滑块的图像将不再显示，滑块的颜色会发生改变。
 **/
// 滑块的图像
- (void)setThumbImage:(nullable UIImage *)image forState:(UIControlState)state;

// 滑块的颜色
@property(nullable, nonatomic,strong) UIColor *thumbTintColor；

以上的这些API都是对UISlider进行UI上的修改。

但常常大家会发现， 设置完成后， 左右图像的大小， 滑块的大小， 滑竿的高度等等都和设计图不符， 特别是滑竿距离左右两边的图像还有一定的空隙。

不需要着急， 此时只需要创建一个UISlider的子类，并重写这几个方法：

// 左右两侧图像尺寸
- (CGRect)minimumValueImageRectForBounds:(CGRect)bounds;
- (CGRect)maximumValueImageRectForBounds:(CGRect)bounds;

// 滑条尺寸
- (CGRect)trackRectForBounds:(CGRect)bounds;

//  滑块尺寸
- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value;

先看一个对比效果图，上面为UISlider， 下面为继承UISlider的子类：

直接上代码：

1. 创建UISlider子类，并重写滑条尺寸

#import "LWSlider.h"

@implementation LWSlider

// 设置track（滑条）尺寸
- (CGRect)trackRectForBounds:(CGRect)bounds{

    bounds.origin.y = (bounds.size.height - 2)/2.0;
    bounds.size.height = 2;
    
    return bounds;
}

@end

2. 创建LWSlider对象， 并设置对应的图像

- (LWSlider *)slider2{
    if (!_slider2) {
        _slider2 = [[LWSlider alloc] init];
        _slider2.minimumValue = 0;
        _slider2.maximumValue = _slider2Numbers.count - 2;
        _slider2.value = 3;
        
        _slider2.minimumValueImage = GetImage(@"slider-min");
        _slider2.maximumValueImage = GetImage(@"slider-max");
        _slider2.minimumTrackTintColor = BtnBgColor;
        _slider2.maximumTrackTintColor = UIColorFromHEXA(0xE5E5E5, 1.0);
        [_slider2 setThumbImage:GetImage(@"slider") forState:UIControlStateNormal];
        
        [_slider2 addTarget:self action:@selector(slidervalueDidChanged:) forControlEvents:UIControlEventValueChanged];
    }
    return _slider2;
}

写到这里就可以自定义一个想要的slider了， 但是有些产品会要求， slider滑动时要有一定的间隔， 比如，每滑动一次就直接过5%？

遇到这样的情况又要怎么做呢？

我在网上看到有人用长度计算的方式， 在UIControlEventValueChanged事件里根据当前滑动值去进行一大堆的数学计算， 然后重新设置slider的value值。

这样写虽然也达到了其想要的效果， 但是很麻烦。

下面给大家介绍一个简单的方法：

1. 创建一个滑动值数组

 _slider2Numbers = [[NSMutableArray alloc] init];
 for (int i = -1; i < 25; ++i) {
    [_slider2Numbers addObject:@(i * 0.5)];
 }

2. 设置slider的最大最小值

_slider2.minimumValue = 0;
_slider2.maximumValue = _slider2Numbers.count - 2;

3. 在UIControlEventValueChanged事件里进行处理
   当slider滑动时， 将slider.value作为索引值，去获取滑动值数组里相对应索引位置的数值， 并将其设置到界面上

- (void)slidervalueDidChanged:(UISlider *)slider{
    NSString *value = [_slider2Numbers objectAtIndex:slider.value + 1];
    self.subTitleLab2.text = [NSString stringWithFormat:@"%@h",value];
}

滑动间隔固定处理效果如下图：

以上，END。