Align UISlider thumb image - objective-c

9
votes

I've customized my UISlider but my thumb image looks strange, I mean it's position not aligned by center:

enter image description here

But should be like this:

enter image description here

And here is code:

UIImage *leftTrack = [[UIImage imageNamed:@"blueTrack.png"] stretchableImageWithLeftCapWidth:3 topCapHeight:0];
UIImage *rightTrack = [[UIImage imageNamed:@"whiteTrack.png"] stretchableImageWithLeftCapWidth:3 topCapHeight:0];
[slider setThumbImage:[UIImage imageNamed:@"thumbButton.png"] forState:UIControlStateNormal];
[slider setMinimumTrackImage:leftTrack forState:UIControlStateNormal];
[slider setMaximumTrackImage:rightTrack forState:UIControlStateNormal];

Where could be the problem?

EDIT: I found solution of this problem. Thumb image background was transparent, and I've not seen that thumb image was not aligned by center:

enter image description here

1
iphoneobjective-ciosuislider
Your stretch image is not exactly as high as UISlider's internal implementation requires it to be. Try making it less high. - user529758
Well - use GIMP, Photoshop, Paint.net... :) - user529758
Oh, you mean do it not programmaticaly:) Ok, I'll try - Timur Mustafaev
Unfortunately this not helped. What sizes these 3 images should be? - Timur Mustafaev
Your thumb should be 25x25 I believe - ekinnear

1 Answers

5
votes

There are two ways:

Firs one is to use

- (CGRect)trackRectForBounds:(CGRect)bounds;

or

- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value;

methods of UISlider when subclassing to lay out thumb the way you want

Second way is to adjust your artwork:

enter image description here