Question

I’m using iOS 5, and I’ve been searching and haven’t found if I can make a thick progress bar using UIProgressView with UIImage. How do I use a small .png file and basically stretch it out with UIProgressView so that it looks like a progress bar or is it possible? Is it possible to make that .png tall, or is it going to be restricted to how tall UIProgressView is? Thanks in advance for your help!

Answer 1

I have found out how to do it. First put a UIProgressView in the on the iPhone screen. I put mine at x:86 y:272. I hooked it up to the view controller’s .h file, named it progView, and @synthesized it in the .m file. I put the following code in the ViewDidLoad method:

// Select the images to use
UIImage *track = [[UIImage imageNamed:@"trackBar"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 1, 1, 1)];
UIImage *progress = [[UIImage imageNamed:@"progBar"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 1, 1, 1)];
// Set the track and progress images
[self.progView setTrackImage:track];
[self.progView setProgressImage:progress];
[self.progView setProgressViewStyle:UIProgressViewStyleDefault]; // we don't need anything fancy
// Create a bound where you want your image. This places the attached .png bars so that the bar drains downward. I was using this as a countdown bar on the iPhone.
self.progView.frame = CGRectMake(-70, 70, self.view.bounds.size.height/1.00, 100);
// A normal progress bar fills up from left to right. I rotate it so that the bar drains down.
self.progView.transform = CGAffineTransformMakeRotation((90) * M_PI / 180.0);

This takes the image and stretches it from the middle, preserving pixels on each side. The width of the image must be changed using an image editor though. I don’t think it’s possible to stretch the width.

progBar.png:

trackBar.png: