Question

From Bavarious’ question about UIProgressViews here:

I tried implementing what Dave DeLong said and I did everything the exact way he showed in his example, but when I run the program, my progress bar becomes a stretched image if I try changing the value of the progress. The track image however resizes perfectly and repeats along the track. For some reason, the progress isn’t doing this along the progress bar.

UIImage * load = [[UIImage imagedNamed:@"load.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 1, 0, 1)];
UIImage * track = [[UIImage imageNamed:@"track.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 1, 0, 1)]; 
[progressbar progressImage:load];
[progressbar trackImage:track];
[progressbar setProgress:0.5];

I tried switching my image variables from the progress image to the track image to see if maybe it was the image that wasn’t resizable (which it shouldn’t have been because they were the exact same image, just different colors). Except when I did this, the track image again resized perfectly and the progress image was the one that stretched. Does anyone know why this may be happening?

Answer 1

Your resizable cap insets probably shouldn’t be {0,1,0,1}. In your case, it looks like they should be {0,0,0,0}, or UIEdgeInsetsZero.

I clipped out the little red and blue squares:

… and then threw them into a UIProgressView:

UIImage *red = [[UIImage imageNamed:@"red"] resizableImageWithCapInsets:UIEdgeInsetsZero];
UIImage *blue = [[UIImage imageNamed:@"blue"] resizableImageWithCapInsets:UIEdgeInsetsZero];

[pv setTrackImage:blue];
[pv setProgressImage:red];

When the progress view was placed on the UI with a progress of 0.5, I got this:

Looks good to me.