Jan 302012

This is deprecated now, it was fun to code it but I’ve since found MBProgressHUD and that is just fine.

I needed to upload image files to my server and this could take several seconds, or more if the cell service is poor, so I wanted to drop a progress bar on top of my dialog. Here’s the code I used to do it:

@interface EnkiProgressBar : UIView

@property (nonatomic, retain)  IBOutlet UIProgressView *progressBar;
@property (nonatomic, retain) IBOutlet UILabel *verbLabel;
@property (strong, nonatomic) IBOutlet UIProgressView *altProgressBar;
@property (nonatomic) CGFloat originY;

- (void) showProgressIndicator;
- (void) setLabel:(NSString *) theLabel;
- (void) setProgressPercent: (float) percent;

- (void) hideDimmedLayer;
- (void) showDimmedBackground;


and the implementation

//  EnkiProgressBar.m
//  Created by Paul Cezanne on 1/30/12.
//  Copyright (c) 2012 Enki Labs. All rights reserved.

#import "EnkiProgressBar.h"

@implementation EnkiProgressBar

- (void) setLabel:(NSString *) theLabel
    _verbLabel.text = theLabel;

    if ([theLabel length] ==0) {
        [_altProgressBar setHidden:FALSE];
        [_progressBar setHidden:TRUE];
    } else {
        [_altProgressBar setHidden:TRUE];
        [_progressBar setHidden:FALSE];

- (void) showProgressIndicator

    self.opaque = NO;

    CGRect pFrame = self.frame;

    pFrame.origin.y  +=  _originY;

    self.frame = pFrame;
    self.progressBar.progress = self.altProgressBar.progress = 0.0;

- (void) setProgressPercent: (float) percent
    self.progressBar.progress = self.altProgressBar.progress = percent;

- (void) showDimmedBackground
    self.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5f];

- (void) hideDimmedLayer
    self.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.0f];


To use it, first load the xib file in your viewDidLoad method:

    NSArray *subviewArray = [[NSBundle mainBundle] loadNibNamed:@"EnkiProgressBar" owner:self options:nil];
    progressBarView = [subviewArray objectAtIndex:0];

When your app needs to show a progress indicator just create and initialize one:

- (void) showProgressIndicator
    self.navigationController.navigationBarHidden = YES;
    [progressBarView setLabel:@"Uploading..."];
    [progressBarView setOriginY:self.view.bounds.origin.y];
    [progressBarView showDimmedBackground];
    [progressBarView showProgressIndicator];
    [self.view addSubview:progressBarView];

To remove it:

- (void) hideProgressIndicator
    self.navigationController.navigationBarHidden = NO;
    [progressBarView removeFromSuperview];

And somehow get a callback when your data is being uploaded. My app was using RestKit to communicate with the server and its callback method is didSendBodyData:

- (void)request:(RKRequest *)request didSendBodyData:(NSInteger)bytesWritten totalBytesWritten:(NSInteger)totalBytesWritten totalBytesExpectedToWrite:(NSInteger)totalBytesExpectedToWrite
    float percent = (float) totalBytesWritten / (float)totalBytesExpectedToWrite;

    [progressBarView setProgressPercent:percent];

And here you can see it in action.


So, where’s the xib we loaded? Just grab that from github: https://github.com/pcezanne/EnkiProgressBar or just clone it directly from https://github.com/pcezanne/EnkiProgressBar.git