UISlider的订制使用

近期项目要使用slider，须要作成的样式以下：

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

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

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

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

  
    [_stateSld setMinimumTrackImage:[[UIImage imageNamed:@"sliderBack@2x"] stretchableImageWithLeftCapWidth:100 topCapHeight: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 array
    
    if (sender.value < 0.5) {
        sender.value = 0;
        [_stateSld setThumbImage:[UIImage imageNamed:@"sliderSmall"] forState:(UIControlStateNormal)];
        [_stateSld setThumbImage:[UIImage imageNamed:@"sliderSmall"] forState:(UIControlStateHighlighted)];
    }else if (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)];
    }
    
    
}

👌