UISlider是開發(fā)中不太常用到的一種基礎控件挽荡。雖然不常用到洽胶， 但是我們卻常見到：
手機系統(tǒng)設置里->顯示與亮度瓢阴，就有這樣的一個slider：
系統(tǒng)的UISlider創(chuàng)建出來也是如此络拌。
但是在實際開發(fā)中鬼癣， 設計師根據(jù)產(chǎn)品風格設計出不同的slider樣式后饵骨， 這很多人都選擇直接去自定義view來實現(xiàn)效果翘悉， 其實這樣超麻煩！
自定義的slider無外乎就是最大最小值的樣式居触， 滑塊的樣式妖混，以及滑竿的樣式等。
這樣自定義完成可以依靠UISlider的API來實現(xiàn)：
// 默認為nil轮洋， 控件左側(cè)的圖像
@property(nullable, nonatomic,strong) UIImage *minimumValueImage;
// 默認為nil制市， 控件右側(cè)的圖像
@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；
/**
* 這里有個小重點：
* 如果即設置了滑塊的圖像弊予，又設置了滑塊的顏色祥楣，那么滑塊的圖像將不再顯示，滑塊的顏色會發(fā)生改變汉柒。
**/
// 滑塊的圖像
- (void)setThumbImage:(nullable UIImage *)image forState:(UIControlState)state;
// 滑塊的顏色
@property(nullable, nonatomic,strong) UIColor *thumbTintColor误褪；
以上的這些API都是對UISlider進行UI上的修改。
但常常大家會發(fā)現(xiàn)碾褂， 設置完成后兽间， 左右圖像的大小， 滑塊的大小正塌， 滑竿的高度等等都和設計圖不符嘀略， 特別是滑竿距離左右兩邊的圖像還有一定的空隙。
不需要著急传货， 此時只需要創(chuàng)建一個UISlider的子類屎鳍，并重寫這幾個方法：
// 左右兩側(cè)圖像尺寸
- (CGRect)minimumValueImageRectForBounds:(CGRect)bounds;
- (CGRect)maximumValueImageRectForBounds:(CGRect)bounds;
// 滑條尺寸
- (CGRect)trackRectForBounds:(CGRect)bounds;
// 滑塊尺寸
- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value;
先看一個對比效果圖，上面為UISlider问裕， 下面為繼承UISlider的子類：
直接上代碼：
- 創(chuàng)建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
- 創(chuàng)建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了粮宛， 但是有些產(chǎn)品會要求窥淆， slider滑動時要有一定的間隔卖宠， 比如，每滑動一次就直接過5%忧饭？
遇到這樣的情況又要怎么做呢扛伍？
我在網(wǎng)上看到有人用長度計算的方式， 在UIControlEventValueChanged事件里根據(jù)當前滑動值去進行一大堆的數(shù)學計算词裤， 然后重新設置slider的value值刺洒。
這樣寫雖然也達到了其想要的效果， 但是很麻煩吼砂。
下面給大家介紹一個簡單的方法：
- 創(chuàng)建一個滑動值數(shù)組
_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作為索引值，去獲取滑動值數(shù)組里相對應索引位置的數(shù)值渔肩， 并將其設置到界面上
- (void)slidervalueDidChanged:(UISlider *)slider{
NSString *value = [_slider2Numbers objectAtIndex:slider.value + 1];
self.subTitleLab2.text = [NSString stringWithFormat:@"%@h",value];
}
滑動間隔固定處理效果如下圖：
以上因俐，END。
