近期項目要使用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)]; } }
👌事件