Custom UIProgressView drawing weirdness - objective-c

Question

I am trying to create my own custom UIProgressView by subclassing it and then overwrite the drawRect function.
Everything works as expected except the progress filling bar. I can't get the height and image right.
The images are both in Retina resolution and the Simulator is in Retina mode.
The images are called: "progressBar#2x.png" (28px high) and "progressBarTrack#2x.png" (32px high).
CustomProgressView.h
#import <UIKit/UIKit.h>
#interface CustomProgressView : UIProgressView
#end
CustomProgressView.m
#import "CustomProgressView.h"
#implementation CustomProgressView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
}
return self;
}
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
// Drawing code
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, 16);
UIImage *progressBarTrack = [[UIImage imageNamed:#"progressBarTrack"] resizableImageWithCapInsets:UIEdgeInsetsZero];
UIImage *progressBar = [[UIImage imageNamed:#"progressBar"] resizableImageWithCapInsets:UIEdgeInsetsMake(4, 4, 5, 4)];
[progressBarTrack drawInRect:rect];
NSInteger maximumWidth = rect.size.width - 2;
NSInteger currentWidth = floor([self progress] * maximumWidth);
CGRect fillRect = CGRectMake(rect.origin.x + 1, rect.origin.y + 1, currentWidth, 14);
[progressBar drawInRect:fillRect];
}
#end
The resulting ProgressView has the right height and width. It also fills at the right percentage (currently set at 80%). But the progress fill image isn't drawn correctly.
Does anyone see where I go wrong?

Answer 1

Looks like you're reassigning self.frame in -drawRect.
I think you want something like this:
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
// Drawing code
CGRect bounds = self.bounds ;
UIImage *progressBarTrack = [ UIImage imageNamed:#"progressBarTrack"] ;
[ progressBarTrack drawInRect:bounds ] ;
UIImage *progressBar = [[UIImage imageNamed:#"progressBar"] resizableImageWithCapInsets:(const UIEdgeInsets){ 4.0f, 4.0f, 5.0f, 4.0f } ] ;
CGRect fillRect = CGRectInset( bounds, 2.0f, 2.0f ) ;
fillRect.width = floorf( self.progress * maximumWidth );
[progressBar drawInRect:fillRect];
}
How to create your own progress view overriding UIView instead of UIProgressView
#interface ProgressView : UIView
#property float progress ;
#end
#implementation ProgressView
#synthesize progress = _progress ;
-(id)initWithFrame:(CGRect)frame
{
if (( self = [ super initWithFrame:frame ] ))
{
self.layer.needsDisplayOnBoundsChange = YES ;
}
return self ;
}
-(void)drawRect
{
// see code above
}
-(void)setProgress:(float)progress
{
_progress = progress ;
[ self setNeedsDisplay ] ;
}
#end