To make the interface of our application a bit more sexy we wanted to customize the standard controls of the iPhone. For instance, we designed some glassy and glowing bars to pimp the standard UISlider control.
All you need to do is create some images and write a few lines of code.
So first create your images:
- one for the thumb button
- one bar image for the left side of the thumb button, e.g. a glassy bar with an outer glow to show the "progress"
- one bar image for the right side of the thumb button, the same as the left bar but without the glow
The only thing you have to pay attention to is that both bar images have the same size. In our first test the glowing bar image was a bit bigger than the non glowing one and this caused the glow not to appear. Once we changed the right bar image to the same size everything worked perfectly.
Now you just need write some code to set the images:
CGRect rect = CGRectMake(16.0, 390.0, 297.0, 35.0);
slider.frame = rect;
UIImage* thumbImage = [UIImage imageNamed:@"thumb.png"];
[slider setThumbImage:thumbImage forState:UIControlStateNormal];
UIImage* leftImage = [UIImage imageNamed:@"SliderLeft.png"];
[slider setMinimumTrackImage:leftImage forState:UIControlStateNormal];
UIImage* rightImage = [UIImage imageNamed:@"SliderRight.png"];
[slider setMaximumTrackImage:rightImage forState:UIControlStateNormal];
Just make sure that the height of the frame is big enough for your image else it gets clipped.
