iOS中的UISlider滑塊組件用法總結_IOS

來源:互聯網
上載者:User

PC上的滑塊是很醜陋的,因為我們只能通過滑鼠去拖動他。不過當Jobs把它移植到IOS上時一切變得酷起來,因為我們可以通過手指去拖動它,這種感覺是很妙的。
滑塊為使用者提供了一種可見的做範圍調整的方法,使用者可以通過拖動一個滑動條改變它的值,並且可以對其配置以合適不同範圍。你可以設定滑塊值的範圍,也可以在兩端加上圖片,以及進行各種調整讓它更美觀。滑塊非常適合用於表示在很大範圍(但不精確)的數值中進行選擇,比如音量設定、靈敏度控制等諸如此類的用途。
一、建立
滑塊是一個標準的UIControl。我們可以通過代碼建立,如同開關(UISwitch)的寬與高都會被忽略一樣滑塊的高也會被忽略(但是寬度不會):

複製代碼 代碼如下:

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

二、定義範圍與預設值
建立完畢的同時我們要設定好滑塊的範圍,如果你沒有設定,那麼會使用預設的 0.0 到 1.0 之間的值。UISlider提供了兩個屬性來設定範圍:mininumValue 和 maxinumValue:
複製代碼 代碼如下:

mySlider.mininumValue = 0.0;//下限 
mySlider.maxinumValue = 50.0;//上限 

同時你也可以為滑塊設定一個預設值:
複製代碼 代碼如下:

mySlider.value = 22.0; 

三、兩端添加圖片
滑塊可以在任何一段顯示映像。添加映像後會導致滑動條縮短,所以記得要記得在建立的時候增加滑塊的寬度來適應映像。
複製代碼 代碼如下:

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

你可以根據滑塊的各種不同狀態顯示不同的映像。下面是可用狀態:
複製代碼 代碼如下:

UIControlStateNormal
UIControlStateHighlighted
UIControlStateDisabled
UIControlStateDisabled
UIControlStateSelected

四、顯示控制項
複製代碼 代碼如下:

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

或 
複製代碼 代碼如下:

[ self.navigationItem.titleView addSubview:myslider ];//添加到導覽列

五、讀取控制項值
複製代碼 代碼如下:

float value = mySlider.value; 

六、通知
要想在滑塊值改變時收到通知,可以用UIControl類的addTarget方法為UIControlEventValueChanged事件添加一個動作。
複製代碼 代碼如下:

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

 只要滑塊停放(注意是停放,如果要在拖動中也觸發,請看後文)到新的位置,你的動作方法就會被調用:
複製代碼 代碼如下:

- (void) sliderValueChanged:(id)sender{ 
        UISlider* control = (UISlider*)sender; 
        if(control == mySlider){ 
                  float value = control.value; 
                   /* 添加自己的處理代碼 */ 
         } 


如果要在拖動中也觸發,需要設定滑塊的 continuos 屬性:
複製代碼 代碼如下:

mySlider.continuous = YES ; 

這個通知最簡單的一個執行個體就是即時顯示滑塊的值,很奇怪的蘋果顯示滑塊的值是一個私人的API(setShowValue),私人就私人,大不了我不用就是。我們可以用一個UILabel來顯示值,在每次觸發上面的方法時改變label的值,不就可以即時顯示了嗎?當然我們可以做的不僅僅是這個,還有更多的 cool 事情可以去實現,就看你的手段與想象力了。

七、UISlider兩邊有空隙的解決方案
之前做過一個播放器,音量條兩邊有空隙。在去新浪面試的時候,面試官提到了這個知識點。我在stackoverflow上爬了好久終於找到了方法,分享給iOS初學者。
重寫UISlider的這個方法

複製代碼 代碼如下:

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

當然UISlider還有這麼幾個方法可以重寫
複製代碼 代碼如下:

-(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;

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.