UISlider的訂製使用

近期項目要使用slider,須要作成的樣式以下:ide

實現首先要建立一個繼承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即爲你想要設置的高度。
}

這樣滑條高度設置就完成了。spa

接下來是滑條的背景,實例化這個子類使用方法:rest

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

由於這個滑條兩邊是有圓弧的,直接設置美工給的背景左邊角會出現加載不徹底的狀況,因此在圖片設置使用了stretchableImageWithLeftCapWidth:topCapHeight:方法。code

接下來給圓球加背景圖,這裏就貼下一個的,其餘的根據value的值更改一下背景圖就ok:orm

  [_stateSld setThumbImage:[UIImage imageNamed:@"sliderSmall"] forState:(UIControlStateNormal)];//普通狀況圓球的背景圖
        [_stateSld setThumbImage:[UIImage imageNamed:@"sliderSmall"] forState:(UIControlStateHighlighted)];//高亮狀態圓球的背景圖

在滑塊滑動還有規定,只有這三個狀態,不容許其餘值得出現。這樣先設置slider的滑動範圍:blog

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

👌事件

相關文章
相關標籤/搜索