UISlider with image on TrackImage

2
votes

I have UISLider with set setMinimumTrackImage and setMaximumTrackImage. Both images have same resolution. If I move slider... images are not showed correctly. They are moving, when I am draging slider control thumb. I tried to use 

UIImage * sliderBarImage1 = [UIImage imageNamed:@"slider_b"];
UIImage * sliderBarImage2 = [UIImage imageNamed:@"slider_w"];

sliderBarImage1 = [sliderBarImage1 stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
sliderBarImage2 = [sliderBarImage2 stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];

[self.slider setMinimumTrackImage:sliderBarImage1 forState:UIControlStateNormal];
[self.slider setMaximumTrackImage:sliderBarImage2 forState:UIControlStateNormal];

With or without stretchableImageWithLeftCapWidth its not correct. And when I rotate phone, images on track are scaled incorectly, so informations in image are shifted. Similar to image in this post: How to place image on UISlider?. When I move slider, images are starting to move and colors are not overlapping in min and max track, resulting in ugly effect.

1
objective-cuislider
This is a well known problem. I solved it by putting the other track image on a separate UIImageView and placing it under the UISlider in IB. – Gerstmann
It helped... but setMinimumTrackImage is stil no overlapping correctly.. its stretching its size :( – Martin Perry

1 Answers

5
votes

to avoid stretching image change

UIImage * sliderBarImage1 = [UIImage imageNamed:@"slider_b"];
UIImage * sliderBarImage2 = [UIImage imageNamed:@"slider_w"];

into 

UIImage * sliderBarImage1 = [[UIImage imageNamed:@"slider_b"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
UIImage * sliderBarImage2 = [[UIImage imageNamed:@"slider_w"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];