Custom UIProgressView in iOS7 not possible?

Question

I know this was already asked about a hundred times here, but I couldn´t find a suitable answer in the other questions.

My problem is the height of my UIProgressView. While everything worked as expected in iOS6, now in iOS7 nothing goes right.

I tried the following:

• 1.Setting the custom layout in the drawRect-Method:

Works like a charm in iOS6, but in iOS7 the progress is set to 100% from the beginning or the bar is very thin.

• 2.Setting the layout with the progressImage and trackImage property of the UIProgressView appearance

Also not working under iOS7. Here the bar progress is set to 100% from the beginning, too. Some people write that it should be possible this way, but I can not confirm that for iOS7.

• 3.Using initWithProgressStyle for initialization and then setting the frame of the progress view

Not working for me under iOS6 and iOS7. In iOS7 the bars are just very slim.

For me right now it is pretty frustrating because the bars are either at 100% or they are mega-slim. Can anyone give me a suggestion to reach the old layout of my progress views. I think it has to be possible because if I look at my Spotify app on the iPhone (iOS7 installed), the progress view looks like before.

Thank you very much!

Answer 1

Well, the problem is seams that iOS6 UIProgressView and iOS7 UIProgressView have different internal subviews structure. iOS6 progress view is a single view without child view (or some minor view), iOS7 progress view have few additional subview for drawing progress bar and background.

If you remove all subview of UIProgressView on iOS7 than you drawRect: method will work the same as before on iOS6, but you will be totally responsible about drawing your progress view content including progress bar and background.

- (id) initWithCoder: (NSCoder*)aDecoder
{
    if(self=[super initWithCoder: aDecoder])
    {
            // Also you can setup height of your progress here
            // self.frame = CGRectMake(0,0,100,yourHeight);

        NSArray *subViews = self.subviews;
        for(UIView *view in subViews)
        {
            [view removeFromSuperview];
        }
    }
    return self;
}

Answer 2

I made kind of a workaround for this problem. I hope somebody can give a nice answer for a normal UIProgressView though.

I wrote a UIView subclass with round corners and a view inside of it which changes its size depending on the given progress. I only use colors for the background, but images would be possible too. Here´s the code:

#import "CustomProgressView.h"
#import <QuartzCore/QuartzCore.h>

@interface CustomProgressView ()

@property (nonatomic, retain) UIView *progressView;

@end

@implementation CustomProgressView

@synthesize progressColor,trackColor,progressView,progress;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.layer.cornerRadius = 5;
        // clipsToBounds is important to stop the progressView from covering the original view and its round corners
        self.clipsToBounds = YES;

        self.progressView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, frame.size.height)];
        [self addSubview:self.progressView];
    }

    return self;
}

-(void)setProgressColor:(UIColor *)theProgressColor {
    self.progressView.backgroundColor = theProgressColor;
    progressColor = theProgressColor;
}

-(void)setTrackColor:(UIColor *)theTrackColor {
    self.backgroundColor = theTrackColor;
    trackColor = theTrackColor;
}

-(void)setProgress:(float)theProgress {
    progress = theProgress;
    CGRect theFrame = self.progressView.frame;
    theFrame.size.width = self.frame.size.width * theProgress;
    self.progressView.frame = theFrame;
}
@end