listen

Open iPhone SDK: Building a UIProgressBar

By Erica Sadun
March 28, 2008 | Comments: 3

Progress bars allow end-users to anticipate wait times. They present bars that fill from left to right. These bars indicate the degree to which a task has finished. Progress bars work best for long waits where providing state feedback allows your users to retain the feel of control.

To create a progress bar, allocate it and set its frame. To use the bar, issue setProgress:. This takes one argument, a floating point number that ranges between 0.0 (no progress) and 1.0 (finished). Progress bars come in two styles: basic white (style 0) or light gray (style 1). setStyle: chooses the kind your prefer.

Unlike the other kinds of progress indicators, it’s completely up to you to show and hide the progress bar’s view. I like adding progress bars to alert sheets. This simplifies both bringing them onto the screen and dismissing them. Another advantage is that when alert sheets display, the rest of the screen dims. This forces a modal presentation as your task progresses. Users cannot interact with the GUI until you dismiss the alert.

@implementation SampleApp
#define STYLE 0

- (void) handleTimer: (id) timer
{
    amt += 1;
    [progbar setProgress: (amt / 20.0)];
    if (amt > 20.0) {[alert dismiss]; [timer invalidate];}
}

- (void) applicationDidFinishLaunching: (id) unused
{
    UIImage *img = [UIImage applicationImageNamed:@"Default.png"];
    UIImageView *imgView = [[UIImageView alloc] initWithImage:img];

    struct CGRect rect = [UIHardware fullScreenApplicationContentRect];
    UIWindow *window = [[UIWindow alloc] initWithContentRect: rect];
    [window orderFront: self];
    [window makeKey: self];
    [window setContentView: imgView];

    // Create an otherwise-empty alert sheet
    alert = [[UIAlertSheet alloc] 
		initWithTitle:@"Updating Database"
		buttons:NULL
		defaultButtonIndex:0
		delegate:self
		context:self];
    [alert setBodyText:@"Please wait...\n\n\n\n"];

    // Create the progress bar and add it to the alert
    progbar = [[UIProgressBar alloc] initWithFrame:
                 CGRectMake(50.0f, 70.0f, 220.0f, 90.0f)];
    [alert addSubview:progbar];
    [progbar setStyle: STYLE];
    [alert presentSheetInView:imgView];

    // This timer takes the place of a real task
    amt = 0.0;
    id timer = [NSTimer scheduledTimerWithTimeInterval: 0.5
                 target: self
                 selector: @selector(handleTimer:)
                 userInfo: nil
                 repeats: YES];
}
@end

3 Comments

Bozo said:

Might consider adding working sample code??

May 2, 2009 2:35 PM

set said:

UIAlertSheet - what this?
can you get full project sources?

August 6, 2008 11:47 PM

Sujith said:

Okie... But how to perform soem downloading in the same method... and showing the progress as mentioned above...

I tried by puttinga downloading code after calling the timer.. But the progress and alertview is appearing only after the downloading, and dismissing soon...

Thread is must????

i did like below..

1. app finish launching...
2. set the timer.
3. start downloading..
4. stop progress...
5. ceate a viewController, add it to window..
6. make window key and visible..

July 18, 2008 6:28 AM