UIProgressView with custom ProgressImage stretched incorrectly. How to fix?

Question

I' m trying to customize UIProgressView with custom progress image. But it is stretched incorrectly. So i have a custom progress image : enter image description here

its dimensions are 75x18 pixels. And I have a track which length is 270 points. But when I set my progress image its corner radius after filling the track became wrong. I tried to set resizableImageWithCapInsets: UIEdgeInsetsMake (0,0,0,1) but then image began to repeat and not to stretch. How can I fix this?

@Desdenova is there some way to preserve corner radius the same?Because after this it became more and more sharper — MainstreamDeveloper00, Aug 29 '13 at 12:47
I shouldn't, I'll check. Do you need to stretch height as well or only the width? — Desdenova, Aug 29 '13 at 12:49
@Desdenova Only the width. I want to fill with it the whole track — MainstreamDeveloper00, Aug 29 '13 at 12:50
this is retina right? Add the retina suffix to the image and you are all set. `imageName@2x.png` — Desdenova, Aug 29 '13 at 12:57
But do not use it in the code. `[[UIImage imageNamed:@"g21hU.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(8.0, 10.0, 8.0, 10.0)]` — Desdenova, Aug 29 '13 at 12:58

score 3 · Accepted Answer · answered Aug 29 '13 at 13:13

UIEdgeInsetsMake protects the pixels at the given values.

Red marker shows the stretchable area for UIEdgeInsetsMake(8.0, 10.0, 8.0, 10.0) (top, left, bottom, right)

enter image description here

Another thing is, always name your retina images properly even if you don't use the non retina versions for the older devices, like imageName@2x.png. Otherwise it will mess up it's scale.

And call it like this without the retina suffix:

[[UIImage imageNamed:@"g21hU.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(8.0, 10.0, 8.0, 10.0)]

Good luck.

Thanks. I understood it at last) – MainstreamDeveloper00 Aug 29 '13 at 13:57 — MainstreamDeveloper00, Aug 29 '13 at 13:57

UIProgressView with custom ProgressImage stretched incorrectly. How to fix?

1 Answers1