自訂UISlider的樣式和滑塊

又做完一個項目，遂到了寫帖時間了，要跟大家分享的是：自訂UISlider的圖片和滑塊，先看一下效果：

然後是實現了，我們使用的是UISlider的setMinimumTrackImage，和setMaximumTrackImage方法來定義圖片 的，這兩個方法可以設定滑塊左邊和右邊的圖片的，不過如果用的是同一張圖片且寬度和控制項寬度基本一致，就不會有變形展開的後果，先看代碼，寫在 viewDidLoad中：

    //左右軌的圖片
    UIImage *stetchLeftTrack= [UIImage imageNamed:@"brightness_bar.png"];
    UIImage *stetchRightTrack = [UIImage imageNamed:@"brightness_bar.png"];
//滑塊圖片
    UIImage *thumbImage = [UIImage imageNamed:@"mark.png"];

    UISlider *sliderA=[[UISlider alloc]initWithFrame:CGRectMake(30, 320, 257, 7)];
    sliderA.backgroundColor = [UIColor clearColor];
    sliderA.value=1.0;
    sliderA.minimumValue=0.7;
    sliderA.maximumValue=1.0;

    [sliderA setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
    [sliderA setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];
//注意這裡要加UIControlStateHightlighted的狀態，否則當拖動滑塊時滑塊將變成原生的控制項
    [sliderA setThumbImage:thumbImage forState:UIControlStateHighlighted];
    [sliderA setThumbImage:thumbImage forState:UIControlStateNormal];
//滑塊拖動時的事件
    [sliderA addTarget:self action:@selector(sliderValueChanged:) forControlEvents:UIControlEventValueChanged];
//滑動拖動後的事件
    [sliderA addTarget:self action:@selector(sliderDragUp:) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:sliderA]; 

 

為了大家實驗方便，我附上背景圖brightness_bar.png和滑塊圖mark.png

以上內容，轉載請註明來自部落格園，作者：jauntlin

首發自jauntlin的技術專欄。