Display a progress bar inside a UITextField object

Question

How can one draw a progressbar inside a UITextField ? I have tested two ways so far.

1. Add a UIProgressView object as a subview of the UITextField object.

UIProgressView* progressView = [[UIProgressView alloc] init];
[aUITextField addSubview:progressView];
progressView.progress = 0.5;
[progressView release];

2. Subclass UITextfield and override drawRect:.

- (id)initWithFrame:(CGRect)frame {
    if ((self = [super initWithFrame:frame])) {
        // Initialization code
        [self setBackgroundColor:[UIColor clearColor]];
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    // Drawing code
    [[UIColor orangeColor] setFill];
    [[UIBezierPath bezierPathWithOvalInRect:rect] fill];
}

Both approaches didn't work. Do you see any problem with these approaches? And how can I make this work?

Answer 1

I am not sure adding the UIProgressView as a subview of a UITextField object will be useful as you can't change the frame of the progress view.

Subclassing seems to be the right approach. Here is what I could come up with. Check if it is useful to you.

ProgressField.h

@interface ProgressField : UITextField {

}

@property (nonatomic, assign) CGFloat progress;
@property (nonatomic, retain) UIColor * progressColor;

@end

ProgressField.m

@implementation ProgressField
@synthesize progress;
@synthesize progressColor;

- (void)setProgress:(CGFloat)aProgress {
    if ( aProgress < 0.0 || aProgress > 1.0 ) {
        return;
    }

    progress = aProgress;

    CGRect progressRect = CGRectZero;
    CGSize progressSize = CGSizeMake(progress * CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds));
    progressRect.size = progressSize;

    // Create the background image
    UIGraphicsBeginImageContext(self.bounds.size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [UIColor clearColor].CGColor);
    CGContextFillRect(context, self.bounds);

    CGContextSetFillColorWithColor(context, [self progressColor].CGColor);
    CGContextFillRect(context, progressRect);

    UIImage * image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    [super setBackground:image];
}

- (void)setBackground:(UIImage *)background {
    // NO-OP
}

- (UIImage *)background {
    return nil;
}

- (id)initWithFrame:(CGRect)frame {
    if ((self = [super initWithFrame:frame])) {
        [self setBorderStyle:UITextBorderStyleBezel];
    }
    return self;
}

This doesn't seem to work with UITextFields with borderStyle set to UITextBorderStyleRoundedRect.

Answer 2

UIProgressView* progressView = [[UIProgressView alloc] init];
progressView.frame = aUITextField.frame;// you can give even set the frame of your own using CGRectMake();
[aUITextField addSubview:progressView];
progressView.progress = 0.5;
[progressView release];

Set the progressview's frame.

Answer 3

Here I think you have to add progressView as subview to self.view , just set progressView's frame according to size that will fit in to UITextField , and make set center of progressview to center of UITextField . hope it will help you.