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)];
    }
    
    
}

👌