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的子类：
直接上代码：
- 创建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
- 创建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值。
这样写虽然也达到了其想要的效果， 但是很麻烦。
下面给大家介绍一个简单的方法：
- 创建一个滑动值数组
_slider2Numbers = [[NSMutableArray alloc] init];
for (int i = -1; i < 25; ++i) {
[_slider2Numbers addObject:@(i * 0.5)];
}
- 设置slider的最大最小值
_slider2.minimumValue = 0;
_slider2.maximumValue = _slider2Numbers.count - 2;
- 在
UIControlEventValueChanged事件里进行处理
当slider滑动时， 将slider.value作为索引值，去获取滑动值数组里相对应索引位置的数值， 并将其设置到界面上
- (void)slidervalueDidChanged:(UISlider *)slider{
NSString *value = [_slider2Numbers objectAtIndex:slider.value + 1];
self.subTitleLab2.text = [NSString stringWithFormat:@"%@h",value];
}
滑动间隔固定处理效果如下图：
以上，END。
