Question

I am trying to implement a simple quiz app on the iphone in the spirit of learning, part of this app is a timer.

I want my timer to count down from 10 to 0. I had a simple NSTimer that repeats and calls a method every second and in this method I update a label which displays the remaining time, which works nicely.

Now instead of displaying the timer using a label I wanted to use a graphical progress bar, so I created ten images, one full in length (representing 10), the next 9/10 of the size and so on, and in my repeating timer method instead of updating a label I update a UIImage with the appropriate image so over time the progress bar gets smaller and smaller.

My problem is that due to the way I have implemented the progress bar, it doesn’t look very smooth when it updates every second. Is there another way I should approach developing this kind of functionality? I have heard that you could use a stretchable image to get a smoother effect but I couldn’t see any good examples of that.

Any advice and code samples welcome, just trying to learn here.

Answer 1

After investigating a few options I have decided to use a UIProgressView (suggested by sudo in comments) coupled with a NSTimer which updates the progress ten times a second for ten seconds, I used this solution because:

1. It is a standard element provided by apple.
2. This option doesn’t have the overhead of creating and loading 100 images (as suggested by Krypton in the comments).
3. By the NSTimer I can add a check to the function updateProgressBar to add some feedback to the user when the timer is reaching low, e.e. vibrate for the last three seconds etc (using animation I don’t think I would have that option).

Using the code below assume I have a UIProgressView variable named ‘progressView’, an NSTimer named ‘timer’ and a floating point variable named ‘time’, then:

-(void)updateProgressBar
{
    if(time <= 0.0f)
    {
        //Invalidate timer when time reaches 0
        [timer invalidate];
    }
    else
    {
        time -= 0.01;
        progressView.progress = time;
    }
}

-(void)animateProgressView2
{
    progressView.progress = 1;
    time = 1;
    timer = [NSTimer scheduledTimerWithTimeInterval: 0.1f
                                             target: self
                                           selector: @selector(updateProgressBar)
                                           userInfo: nil
                                            repeats: YES];
}

Another way I investigated (after seeing Disco’s comments) but decided against was to use animation. In this instance I created two png images, named ‘redbar.png’ and ‘greenbar.png’, the idea bring they would be placed over each other (the green bar being on top/in the foreground), and over the duration of the animation the green bar shrinks, revealing the red bar in the background.

UIImage *green= [UIImage imageNamed:@"greenbar.png"];
UIImage *red= [UIImage imageNamed:@"redbar.png"];

redBar.image = red; // allocate the red image to the UIImageView
redBar.frame = CGRectMake(20,250,220,30);// set the size of the red image

greenBar.image = green; // allocate the green image to the UIImageView
greenBar.frame = CGRectMake(20,250,220,30);//set the size of the green image

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:10]; //the time you want the animation to last for
[UIView setAnimationDidStopSelector:@selector(animationFinished)];//the method to be called once the animation is finished
    //at the end of the animation we want the greenBar frame to disappear
    greenBar.frame = CGRectMake(20,250,0,30);
[UIView commitAnimations];

An ideal solution would be to combine the UIProgressView and the UIAnimation block, but this is not currently an option (see this question animate a UIProgressView's change).

Hope this helps someone in the future.

EDIT::

It appears the ideal solution I mention above is now available in iOS5, taken from the apple reference site:

setProgress:animated:
Adjusts the current progress shown by the receiver, optionally animating the change.

• (void)setProgress:(float)progress animated:(BOOL)animated