UIProgressView custom track and progress images in iOS 7.1
IosIos7UiprogressviewIos Problem Overview
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];
Ios Solutions
Solution 1 - Ios
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 UIImageView
s.
The subclass is needed to override layoutSubviews
, where you adjust the heights of the imageViews according to the image sizes.
Solution 2 - Ios
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
).
Solution 3 - Ios
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.
Solution 4 - Ios
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
Solution 5 - Ios
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.
Solution 6 - Ios
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
Solution 7 - Ios
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];