iOS下UISlider的订制样式

近期项目要使用slider，需要做成的样式如下：

实现首先要创建一个继承UISlider的子类，因为改变滑条高度的函数只有在子类继承后才能生效，附上改变滑条高度的代码，在子类的.m文件里写:

-(CGRect)trackRectForBounds:(CGRect)bounds

{

bounds= [super trackRectForBounds:bounds];//必须通过调用父类的trackRectForBounds 获取一个 bounds 值，否则 Autolayout 会失效，UISlider 的位置会跑偏。returnCGRectMake(bounds.origin.x, bounds.origin.y, bounds.size.width,20);//这里面的20即为你想要设置的高度。}

这样滑条高度设置就完成了。

接下来是滑条的背景，实例化这个子类使用方法：

[_stateSld setMinimumTrackImage:[[UIImage imageNamed:@"sliderBack@2x"] stretchableImageWithLeftCapWidth:100topCapHeight:10] forState:(UIControlStateNormal)];//圆球左边的滑条背景[_stateSld setMaximumTrackImage:[UIImage imageNamed:@"sliderBack@2x"] forState:(UIControlStateNormal)];//圆球右边的滑条背景

因为这个滑条两边是有圆弧的，直接设置美工给的背景

左边角会出现加载不完全的情况，所以在图片设置使用了stretchableImageWithLeftCapWidth:topCapHeight:方法。

接下来给圆球加背景图，这里就贴下一个的，其他的根据value的值更改一下背景图就ok：

[_stateSld setThumbImage:[UIImage imageNamed:@"sliderSmall"] forState:(UIControlStateNormal)];//普通情况圆球的背景图[_stateSld setThumbImage:[UIImage imageNamed:@"sliderSmall"] forState:(UIControlStateHighlighted)];//高亮状态圆球的背景图

在滑块滑动还有规定，只有这三个状态，不允许其他值得出现。这样先设置slider的滑动范围：

_stateSld.maximumValue =2;//滑块滑动最大值_stateSld.minimumValue =0;//滑块滑动最小值

值具体是多少的无所谓，三个状态我就准备是0，1，2这三个，你喜欢的话一万两万也无所谓。接下来还是很笨的办法，添加事件在事件里面写判断：

[_stateSld addTarget:self

action:@selector(valueChanged:)

forControlEvents:UIControlEventValueChanged];//给slider添加事件-(void)valueChanged:(UISlider *)sender {//round the slider position to the nearest index of the numbers arrayif(sender.value <0.5) {

sender.value=0;

[_stateSld setThumbImage:[UIImage imageNamed:@"sliderSmall"] forState:(UIControlStateNormal)];

[_stateSld setThumbImage:[UIImage imageNamed:@"sliderSmall"] forState:(UIControlStateHighlighted)];

}elseif(sender.value >0.5&& sender.value <1.5){

sender.value=1;

[_stateSld setThumbImage:[UIImage imageNamed:@"sliderMid"] forState:(UIControlStateNormal)];

[_stateSld setThumbImage:[UIImage imageNamed:@"sliderMid"] forState:(UIControlStateHighlighted)];

}else{

sender.value=2;

[_stateSld setThumbImage:[UIImage imageNamed:@"sliderBig"] forState:(UIControlStateNormal)];

[_stateSld setThumbImage:[UIImage imageNamed:@"sliderBig"] forState:(UIControlStateHighlighted)];

}

}

这样就完成了。