Go from this…
To this!
I’m writing an app where I needed to make the thumb nub of a slider (UISlider in the Objective-C vernacular) smaller.
Above: On the left is the UISlider thumb normal size, story and on the right is the size I want. Obviously the pic is blown up.
To change the slider thumb to our custom image, decease place the following code in viewDidLoad:
UIImage *sliderThumb = [UIImage imageNamed:@”uislider-thumb.png”];
[slider setThumbImage:sliderThumb forState:UIControlStateNormal];
[slider setThumbImage:sliderThumb forState:UIControlStateHighlighted];
If you don’t add the second setThumbImage: forState:UIControlStateHighlighted, I believe the thumb pic will disappear when you put your finger on it. Not that you’d be able to tell, since your fingers will be covering it.
When I ran this code I ran into a weird issue, the track disappeared! This only happened in iOS 3.1.3 (where I tested it) but not on iOS 4.0. To remedy this I decided to go the whole way and customize the track images as well. Yes, images plural, there are actually two images that make up the UISlider track. One is the minimum image, or the track image that appears to the left of the thumb, and the other is the maximum image, or the image that appears to the right of the thumb.
To change the track image for the UISlider, use this code, again in viewDidLoad:
UIImage *sliderMinimum = [[UIImage imageNamed:@”uislider-left.png”] stretchableImageWithLeftCapWidth:4 topCapHeight:0];
[slider setMinimumTrackImage:sliderMinimum forState:UIControlStateNormal];
UIImage *sliderMaximum = [[UIImage imageNamed:@”uislider-right.png”] stretchableImageWithLeftCapWidth:4 topCapHeight:0];
[slider setMaximumTrackImage:sliderMaximum forState:UIControlStateNormal];
A small note here, the leftCapWidth is the width of the left side of the image, and the track is a 1 pixel wide slice repeated horizontally across the width of the track, and then the rightCapWidth is the same as the leftCapWidth. This might lead you to believe that you can make an image that is a minimum of 3px wide. 1 pixel border on the left and right, and 1 pixel in the middle. I tried it, and it didn’t really work out too well, so what I ended up doing was making it 9 pixels wide and setting the leftCapWidth to 4.
That’s all you really need to get started customizing your sliders. Obviously you need to make a slider either in a NIB and hook it up in the .h/.m file, or do it programmatically in the .h/.m file.
Hope this helps!
This article was the jumping off point for me to customize the slider: http://www.applausible.com/blog/?p=250
This is what Kristy came downstairs to this morning.
Ruby sleeping on the sofa, cost
so lady-like.
Willow being a good girl, looking up sheepishly.
Go Away!
