iOS
iOS/iPhone: Skinning UISlider
November 23, 2011
0

UISlider can be skinned to produce output like these:


There are three sections that you can change:

  • The bar portion on the left side of the thumb, using setMinimumTrackImage:UIImage
  • The bar portion on the right side of the thumb, using setMaximumTrackImage:UIImage
  • The thumb, using setThumbImage:UIImage

For the UIImage, you will most likely need to stretch it to fit the width of the bar, so use [UIImage::stretchableImageWithLeftCapWidth] to do that. (For iOS 5 or later, use resizableImageWithCapInsets instead of stretchableImageWithLeftCapWidth)

Example 1:

slider_bar_other_skin.9.png

slider_other_thumb.png

UIImage* sliderBarImage = [UIImage imageNamed:@"slider_bar_other_skin.9.png"];
UIImage* sliderThumbImage= [UIImage imageNamed:@"slider_other_thumb.png"];

sliderBarImage=[sliderBarImage stretchableImageWithLeftCapWidth:8.0 topCapHeight:0.0];

//[slider setMinimumTrackImage:sliderBarImage forState:UIControlStateNormal];
[slider setMaximumTrackImage:sliderBarImage forState:UIControlStateNormal];
[slider setThumbImage:sliderThumbImage forState:UIControlStateNormal];

Result: Without calling setMinimumTrackImage, you see the slider has maintained the default blue bar. However, notice that the height of the bar is automatically matched to the height of the custom bar because of the call to setMaximumTrackImage.

Example 2

slider_bar_2.png


slider_thumb_2.png

UIImage* sliderBarImage = [UIImage imageNamed:@"slider_bar_other_skin.9.png"];
UIImage* sliderThumbImage= [UIImage imageNamed:@"slider_other_thumb.png"];

sliderBarImage=[sliderBarImage stretchableImageWithLeftCapWidth:8.0 topCapHeight:0.0];

[slider setMinimumTrackImage:sliderBarImage forState:UIControlStateNormal];
[slider setMaximumTrackImage:sliderBarImage forState:UIControlStateNormal];
[slider setThumbImage:sliderThumbImage forState:UIControlStateNormal];

Result:

Example 3

slider_bar_3_min.png

slider_bar_3_max.png

slider_thumb_3.png

UIImage* sliderBarMinImage = [[UIImage imageNamed:@"slider_bar_3_min.png"] stretchableImageWithLeftCapWidth:8.0 topCapHeight:0.0];
sliderBarImage = [[UIImage imageNamed:@"slider_bar_3_max.png"] stretchableImageWithLeftCapWidth:8.0 topCapHeight:0.0];
sliderThumbImage= [[UIImage imageNamed:@"slider_thumb_3.png"] stretchableImageWithLeftCapWidth:8.0 topCapHeight:0.0];;

[slider3 setMinimumTrackImage:sliderBarMinImage forState:UIControlStateNormal];
[slider3 setMaximumTrackImage:sliderBarImage forState:UIControlStateNormal];
[slider3 setThumbImage:sliderThumbImage forState:UIControlStateNormal];

Result:

All three images are customized here. You can be creative with the thumb image to produce some unique look.