Here’s what’s going on:
The images you provide to the UIProgressView
are basically being shoved in to UIImageViews
, and the UIImageView
is stretching the image to fill the space.
If you simply do:
[progressView setTrackImage:[UIImage imageNamed:@"track.png"]];
Then you’re going to get weird results, because it’s trying to stretch a 10px wide image to fill (for example) a 100px wide image view. This means (roughly) that every pixel in the image will be repeated 10 times. So if the pixels in our image were:
0123456789
Then putting that image straight into a 100px wide image view would stretch it something like this:
000000000011111111112222222222333333333344444444445555555555...
This is what’s happening to you.
What you really want to have happen is this:
01234567812345678123456781234567812345678...123456789
In other words, you want the image to have a 1 point left edge that is never stretched, the center to be tiled, and to have a 1 point right edge that is also never stretched. To do this, you’ll need to make the image resizable:
UIImage *track = [[UIImage imageNamed:@"track"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 1, 0, 1)];
[progressView setTrackImage:track];
If you want this to tile appropriately vertically as well, then the edge insets should be {1, 1, 1, 1}
(assuming you want a 1 point border).
Do the same to the progressImage
, and you’ll end up with something that looks correct:
tl;dr:
Your images need to be resizable.