UIProgressView custom track and progress images in iOS 7.1

Question

iOS 7.1 seems to have broken the custom image properties in UIProgressView. Code that used to successfully customize progress views now yields the default appearance.

I set up a sample project that does this in viewDidLoad:

self.progressView.frame = CGRectMake(self.progressView.frame.origin.x, self.progressView.frame.origin.y, self.progressView.frame.size.width, 9);
UIImage *img = [UIImage imageNamed:@"progress_bar_fill.png"];
img = [img resizableImageWithCapInsets:UIEdgeInsetsMake(0, 4, 0, 4)];
self.progressView.progressImage = img;

img = [UIImage imageNamed:@"progress_bar_empty.png"];
img = [img resizableImageWithCapInsets:UIEdgeInsetsMake(0, 4, 0, 4)];
self.progressView.trackImage = img;

I still get the default appearance. I've stepped through and verified that img is non-nil as expected. What's going on?

UPDATE: There is an OpenRadar for this, and I've also filed a radar of my own complete with a sample project.

UPDATE 2: As noted by Axy below, you have to add this to get the JEProgressView to work correctly:

_progressBar.tintColor = [UIColor clearColor];

Answer 1

This is very annoying. I didn't find a way to fix this without subclassing UIProgressView.

Anyway here's how I fixed this: https://gist.github.com/JohnEstropia/9482567

You will have to change occurrences of UIProgressView to JEProgressView, including those in NIBs and storyboards.

Basically, you'd need to force assigning the images directly to the UIProgressView's children UIImageViews.

The subclass is needed to override layoutSubviews, where you adjust the heights of the imageViews according to the image sizes.

Answer 2

You are correct. This bug has been present since 7.1 first made its appearance in Xcode 5.1 seed 1. I submitted (and resubmitted) the same bug for all 5 seeds of Xcode 5.1, and now on Xcode 5.1. But Apple did not fix it.

Please submit this bug too! You may refer to my bug if you like: 15547259. The more the better! I regard this as serious breakage, because it means that an app that was working fine is now broken (if it uses a progress view with a progressImage).

Answer 3

I used John Estropia solution, but it was showing the blu tint bar in overlay to mine, with quite a strange graphical effect.

I added

_progressBar.tintColor = [UIColor clearColor];

and It went just fine. Thanks for the solution man.

Answer 4

Hello friends I have used the following code to add UIProgressView in my app:

UIProgressView *progressView;
progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];      
progressView.progressTintColor[UIColor colorWithRed:187.0/255 green:160.0/255 blue:209.0/255 alpha:1.0];
[[progressView layer]setCornerRadius:10.0f];
[[progressView layer]setBorderWidth:2.0f];
[[progressView layer]setMasksToBounds:TRUE];
progressView.clipsToBounds = YES;
[[progressView layer]setFrame:CGRectMake(30, 295, 260, 25)];[[progressView     layer]setBorderColor[UIColor whiteColor].CGColor]; 
progressView.trackTintColor = [UIColor clearColor];
[progressView setProgress: (float)count/15 animated:YES];

Hope the code will be helpful to you, I found it here : Source of Code

Answer 5

I have tried to implement the JEProgressView files from John Estropia - but it doesn't work. I must have done something wrong - but I'm a little new to this. Can someone explain how exactly to do this? I know it might be a stupid question - but after a lot of googling I thought asking was the only way.

Answer 6

I'm also catched this bug. I tried to fix it playing with UIProgressView properties but without result. John's Estropia solution posted above, also don't work for me, maybe it's not support auto layout, so I made my own temporary solution for bypassing this bug. https://github.com/ninjaproger/AKProgressView

Answer 7

For me this worked for iOS version 7.1 and above for progress image:

if ([[UIDevice currentDevice] systemVersion] >= 7)
    self.progressView.tintColor = [UIColor colorWithPatternImage:img];

Answer 8

With Xcode5 it is now possible to make resizable images with Interface Builder too. We can specify the resizing direction and content inset and select the area of to be strecthed right within the interface builder.

To avail this feature you have use Asset Catalog for the image you want to resize.