快捷導(dǎo)航

iOS中的UISlider滑塊組件用法總結(jié)

更新時(shí)間：2016年06月09日 09:27:32 作者：ian

不僅是滑動(dòng)開關(guān),UISlider組件也是常用的進(jìn)度條制作工具,這里我們就一起來看一下iOS中的UISlider滑塊組件用法總結(jié),需要的朋友可以參考下

PC上的滑塊是很丑陋的，因?yàn)槲覀冎荒芡ㄟ^鼠標(biāo)去拖動(dòng)他。不過當(dāng)Jobs把它移植到IOS上時(shí)一切變得酷起來，因?yàn)槲覀兛梢酝ㄟ^手指去拖動(dòng)它，這種感覺是很妙的。
滑塊為用戶提供了一種可見的做范圍調(diào)整的方法，用戶可以通過拖動(dòng)一個(gè)滑動(dòng)條改變它的值，并且可以對(duì)其配置以合適不同值域。你可以設(shè)置滑塊值的范圍，也可以在兩端加上圖片，以及進(jìn)行各種調(diào)整讓它更美觀?；瑝K非常適合用于表示在很大范圍（但不精確）的數(shù)值中進(jìn)行選擇，比如音量設(shè)置、靈敏度控制等諸如此類的用途。
一、創(chuàng)建
滑塊是一個(gè)標(biāo)準(zhǔn)的UIControl。我們可以通過代碼創(chuàng)建，如同開關(guān)(UISwitch)的寬與高都會(huì)被忽略一樣滑塊的高也會(huì)被忽略(但是寬度不會(huì))：

復(fù)制代碼代碼如下:

UISlider* mySlider = [ [ UISlider alloc ] initWithFrame:CGRectMake(20.0,10.0,200.0,0.0) ];//高度設(shè)為0就好    

二、設(shè)定范圍與默認(rèn)值
創(chuàng)建完畢的同時(shí)我們要設(shè)置好滑塊的范圍，如果你沒有設(shè)置，那么會(huì)使用默認(rèn)的 0.0 到 1.0 之間的值。UISlider提供了兩個(gè)屬性來設(shè)置范圍：mininumValue 和 maxinumValue：

復(fù)制代碼代碼如下:

mySlider.mininumValue = 0.0;//下限  

mySlider.maxinumValue = 50.0;//上限  

同時(shí)你也可以為滑塊設(shè)定一個(gè)默認(rèn)值：

復(fù)制代碼代碼如下:

mySlider.value = 22.0;

三、兩端添加圖片
滑塊可以在任何一段顯示圖像。添加圖像后會(huì)導(dǎo)致滑動(dòng)條縮短，所以記得要記得在創(chuàng)建的時(shí)候增加滑塊的寬度來適應(yīng)圖像。

復(fù)制代碼代碼如下:

[ mySlider setMininumTrackImage: [ UIImage applicationImageNamed:@"min.png" ] forState: UIControlStateNormal ];  

[ mySlider setMaxinumTrackImage: [ UIImage applicationImageNamed:@"max.png" ] forState: UIControlStateNormal ];  

你可以根據(jù)滑塊的各種不同狀態(tài)顯示不同的圖像。下面是可用狀態(tài)：

復(fù)制代碼代碼如下:

UIControlStateNormal

UIControlStateHighlighted

UIControlStateDisabled

UIControlStateDisabled

UIControlStateSelected

四、顯示控件

復(fù)制代碼代碼如下:

[ parentView addSubview:myslider ];//添加到父視圖

或

復(fù)制代碼代碼如下:

[ self.navigationItem.titleView addSubview:myslider ];//添加到導(dǎo)航欄 

五、讀取控件值

復(fù)制代碼代碼如下:

float value = mySlider.value;

六、通知
要想在滑塊值改變時(shí)收到通知，可以用UIControl類的addTarget方法為UIControlEventValueChanged事件添加一個(gè)動(dòng)作。

復(fù)制代碼代碼如下:

[ mySlider addTarget:self action:@selector(sliderValueChanged:) forControlEventValueChanged ];  

只要滑塊停放（注意是停放，如果要在拖動(dòng)中也觸發(fā)，請(qǐng)看后文）到新的位置，你的動(dòng)作方法就會(huì)被調(diào)用：

復(fù)制代碼代碼如下:

- (void) sliderValueChanged:(id)sender{  

        UISlider* control = (UISlider*)sender;  

        if(control == mySlider){  

                  float value = control.value;  

                   /* 添加自己的處理代碼 */  

         }  

}

如果要在拖動(dòng)中也觸發(fā)，需要設(shè)置滑塊的 continuos 屬性：

復(fù)制代碼代碼如下:

mySlider.continuous = YES ;

這個(gè)通知最簡單的一個(gè)實(shí)例就是實(shí)時(shí)顯示滑塊的值，很奇怪的蘋果顯示滑塊的值是一個(gè)私有的API（setShowValue），私有就私有，大不了我不用就是。我們可以用一個(gè)UILabel來顯示值，在每次觸發(fā)上面的方法時(shí)改變label的值，不就可以實(shí)時(shí)顯示了嗎？當(dāng)然我們可以做的不僅僅是這個(gè)，還有更多的 cool 事情可以去實(shí)現(xiàn)，就看你的手段與想象力了。

七、UISlider兩邊有空隙的解決方法
之前做過一個(gè)播放器，音量條兩邊有空隙。在去新浪面試的時(shí)候，面試官提到了這個(gè)知識(shí)點(diǎn)。我在stackoverflow上爬了好久終于找到了方法，分享給iOS初學(xué)者。
重寫UISlider的這個(gè)方法

復(fù)制代碼代碼如下:

- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value

{

    rect.origin.x = rect.origin.x - 10 ;

    rect.size.width = rect.size.width +20;

    return CGRectInset ([super thumbRectForBounds:bounds trackRect:rect value:value], 10 , 10);

}

當(dāng)然UISlider還有這么幾個(gè)方法可以重寫

復(fù)制代碼代碼如下:

-(CGRect)trackRectForBounds:(CGRect)bounds

{

    bounds.origin.x=15;

    bounds.origin.y=bounds.size.height/3;

    bounds.size.height=bounds.size.height/5;

    bounds.size.width=bounds.size.width-30;

    return bounds;

}

- (CGRect)minimumValueImageRectForBounds:(CGRect)bounds;

- (CGRect)maximumValueImageRectForBounds:(CGRect)bounds;

您可能感興趣的文章: