Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align UISlider thumb image

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];
like image 966
Timur Mustafaev Avatar asked Feb 24 '12 19:02

Timur Mustafaev


1 Answers

There are two ways:

First one is to use

- (CGRect)trackRectForBounds:(CGRect)bounds;

and / 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

like image 51
Sash Zats Avatar answered Sep 25 '22 23:09

Sash Zats