iPhone Custom UISlider preload and rounded edges issues

Question

I'm trying to implement a custom UISlider, I've extended it with a class called UISliderCustom which has the following code:

@implementation UISliderCustom

- (id)initWithCoder:(NSCoder *)aDecoder{
    if(self == [super initWithCoder:aDecoder]){
        self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, 200, 13);

        UIImage *slideMin = [[UIImage imageNamed:@"slideMinimum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
        UIImage *slideMax = [[UIImage imageNamed:@"slideMaximum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];

        [self setThumbImage:[UIImage imageNamed:@"slideThumb.png"] forState:UIControlStateNormal];
        [self setThumbImage:[UIImage imageNamed:@"slideThumb.png"] forState:UIControlStateHighlighted];

        [self setMinimumTrackImage:slideMin forState:UIControlStateNormal];
        [self setMaximumTrackImage:slideMax forState:UIControlStateNormal];
    }

    return self;
}    

@end

I ran into two small problems

1. When I slide over the slider to one of the edges (progress = 0.0 / progress = 1.0), I can clearly see "left overs" in the sides, im not sure how to handle that as well, unfortunately :)

   Slider images:

   
   
   

   Problem:

   

2. I see the regular UISlider (blue and silver) for a couple of seconds, and only then the custom graphics is loaded, or when i actually move the slider. I'm not sure why this is happening.. EDIT: This only happens in the simulator, works fine now.

Thanks in advance for any assistance :)
Shai.

Answer 1

You have no need to subclass UISlider to achieve this effect, and if you did you certainly wouldn't set the track images in the drawRect method. drawRect should contain drawing code only, it is called whenever any part of the control needs redrawing.

Set the thumb and track images in a separate method, either within your subclass (called from initWithFrame and initWithCoder) or in the object that creates the slider in the first place. This only needs to be done once, when the slider is first created. Don't override drawRect.

You don't need to call awakeFromNib manually either, unless you have some specific code in there as well? That would be a common place to set custom images in a subclass, if you only ever used the slider from IB.

For the square ends, the problem is that the extreme edge of your track image is square, so it is showing around the thumb. Make both ends of the track image rounded, with a 1px stretchable area in the middle, like this:

Answer 2

I just had a very similar problem myself. It turned out that the size (width x height) of the slider that I added in interface builder didn't match the sizes of the images I was using to customize the slider. Once I made them match, those "leftovers" at the ends of the slider went away.