CODEWITHSUNDEEP
iosobjective-c
Samuel Patterson
Samuel Patterson

Reputation: 133

iOS timer progressbar

I want to create a timer progress bar like that in Objective-C. Say I have a timer of 60secs. When the timer value increases this progress bar value will be updated and when I tap on the cross button it will reinitialize the timer. How can I do this?

Upvotes: 0

Views: 1229

Answers (1)

dirtydanee
dirtydanee

Reputation: 6151

  1. Setup a view hierarchy the following way:

enter image description here

Basicly you have a containerView and a progressView. You will be manipulating the width constraint of the progress view.

So, the container view has a fix height, and constraint everything to the superview. The progress view has 0 leading, top and bottom constraint, and lets set the width to be 0 for now.

Your view controller should be looking like this: enter image description here

ProgressView frame and constraints:

enter image description here

ContainerView frame and constaints:

enter image description here

Now it is time to do the coding in your viewController. 

#import "ViewController.h"

@interface ViewController ()
// Create IBOutlet for the progressView's width constraint
@property (nonatomic, weak) IBOutlet NSLayoutConstraint *progressViewWidthContraint;

// Declare a timer
@property (nonatomic, strong) NSTimer *progressTimer;
@property (nonatomic, assign) CGFloat progressPerSecond;

@end

@implementation ViewController 

// Progress time can be changed on demand
NSInteger kProgressTime = 60;

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
// Lets setup how much should the progress be increased by a second
    self.progressPerSecond = self.view.frame.size.width / kProgressTime;
// Lets start showing the progress
    [self startOrResetTimer];
}

- (void)startOrResetTimer {
// Just in case invalidate the timer before we would set it up
    [self.progressTimer invalidate];
// Set the progressView's constant to its initial phase    
    self.progressViewWidthContraint.constant = 0;
    [self.view setNeedsLayout];
    [self.view layoutIfNeeded];
// Create the timer    
    self.progressTimer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(updateProgress) userInfo:nil repeats:true];
}

- (void)updateProgress {
    // If the progress has reached the end of the screen, do not increase the constraint's constant
    if (self.progressViewWidthContraint.constant == self.view.frame.size.width) {
        return;
    }

    // Increase the constant by the previously calculated progress per second
    self.progressViewWidthContraint.constant += self.progressPerSecond;
    [self.view setNeedsLayout];
    [self.view layoutIfNeeded];
}

// Hook this method to your reset button on the interface builder, and any time you press the button, it will reset the timer and the progressbar
- (IBAction)didTapResetTimerButton:(UIButton *)sender {
    [self startOrResetTimer];
}

@end

Hope this helps!

Upvotes: 2

Related Questions