How to draw a progress view using Core Graphics

Question

I want to create a custom progress view which progresses when user presses the button and stops when the button is released. A blank subview represents the background of the progress and i have a drawn a square that acts as a starting point. The blank view should get filled until the button is released.How do i keep filling the view until the button is released?

Here is my code:

CGContextRef context=UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);


CGRect square=CGRectMake(0, 0, 5, 9);
CGContextAddRect(context, square);
CGContextStrokePath(context);

CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);


CGContextFillRect(context, square);

In the view controller's ViewDidLoad

    SeekBar *seek=[[SeekBar alloc]initWithFrame:CGRectMake(0, 320, 320, 9)];
    [self.view addSubview:seek];

I am a newbie in core graphics.Is this the correct approach?

Answer 1

Alright, here's some code that does the constant progress as you mentioned. What you really want to do is adjust the width of the fill based on the progress. Take a look at the drawRect: method for this.

Also, you want to hook your SeekBar up to a button where when someone touches down the progress increases / starts, and when they let go of the button the progress stops. The method calls in awakeFromNib: should guide you.

If you are still confused about this code I can post the sample project so you can build and observe the whole thing working together.

SeekBar.h

#import <UIKit/UIKit.h>

@interface SeekBar : UIView
@property (nonatomic, strong) IBOutlet UIButton *button;
@end

SeekBar.m

#import "SeekBar.h"

@interface SeekBar()
@property (nonatomic) float progress;
@property (nonatomic, strong) NSTimer *timer;
@property (nonatomic, strong) UILabel *completeLabel;
@end

@implementation SeekBar

- (void)awakeFromNib {
    [self.button addTarget:self action:@selector(startProgress) forControlEvents:UIControlEventTouchDown];
    [self.button addTarget:self action:@selector(stopProgress) forControlEvents:UIControlEventTouchUpInside];
}

- (void)startProgress {
    if (![self.subviews containsObject:self.completeLabel]) {
        [self addSubview:self.completeLabel];
    }
    self.progress = 0.0;
    self.timer = [NSTimer scheduledTimerWithTimeInterval:0.001 target:self selector:@selector(incrementProgress) userInfo:nil repeats:YES];
}

- (void)incrementProgress {
    if (self.progress <= 1.0) {
        self.progress += 0.001;
        [self setNeedsDisplay];
        self.completeLabel.text = @"Loading...";
    } else {
        self.completeLabel.text = @"Complete";
    }
}

- (UILabel *)completeLabel {
    if (!_completeLabel) {
        _completeLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 0, self.frame.size.width-10, self.frame.size.height)];
        _completeLabel.backgroundColor = [UIColor clearColor];
        _completeLabel.textColor = [UIColor whiteColor];
    }
    return _completeLabel;
}

- (void)stopProgress {
    [self.timer invalidate];
}

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);
    UIRectFill(CGRectMake(0, 0, rect.size.width * self.progress, rect.size.height));
}

@end