Creating a “loading…” view using iPhone SDK

Question

How to create that black/gray modal popup kind of view that many apps use, when some long pending operation is in progress?

Like when using location based services, load

Answer 1

In XIB file, place UIView and UIActivityIndicatorView. Set ActivityIndicatorView Property SetAnimated to Yes.

@property (retain, nonatomic) IBOutlet UIView* m_LoadingView;

While Starting long operations, Add the LoadingView to the view

m_LoadingView.layer.cornerRadius = 10;
m_LoadingView.center = self.view.center;
[self.view addSubview:m_LoadingView];

After completing the process, Remove LoadingView from super view. [m_LoadingView removeFromSuperView];

Answer 2

I think the simplest (a few lines of code), fully documented and most beautiful way is to use the UIAlertView with a UIActivityIndicatorView:

http://iosdevelopertips.com/user-interface/uialertview-without-buttons-please-wait-dialog.html

_{(source: iosdevelopertips.com)}

Answer 3

Take a look at the Wordpress iPhone app (http://iphone.wordpress.org/) for an example of how to do this without using any undocumented API's.

Answer 4

This is actually the undocumented (in 2.2.1 anyway) UIProgressHUD. Create one like this:

In your .h:

@interface UIProgressHUD : NSObject 
- (UIProgressHUD *) initWithWindow: (UIView*)aWindow; 
- (void) show: (BOOL)aShow; 
- (void) setText: (NSString*)aText; 
@end 

In your .m:

- (void) killHUD: (id)aHUD 
{ 
[aHUD show:NO]; 
[aHUD release]; 
} 

- (void) presentSheet 
{ 
id HUD = [[UIProgressHUD alloc] initWithWindow:[contentView superview]]; 
[HUD setText:@"Doing something slow. Please wait."]; 
[HUD show:YES]; 
[self performSelector:@selector(killHUD:) withObject:HUD afterDelay:5.0]; 
} 

Answer 5

I use LoadingHUDView for this purpose, and it works always.

get LoadingHUDView.m and LoadingHUDView.h and do the following in your base class (or whatever)

#pragma mark ActivityIndicator Methods

-(void) showModalActivityIndicator:(NSString *)message 
{
        loadingView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)]retain];//  origional
        //loadingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)]; //testing
        loadingView.backgroundColor = [UIColor grayColor]; //[UIColor colorWithRed:1 green:1 blue:1 alpha:0.3];
        LoadingHUDView *loadHud = [[LoadingHUDView alloc] initWithTitle:message];
        loadHud.center = CGPointMake(160, 290);
        [loadingView addSubview:loadHud];
        [loadHud startAnimating];
        [loadHud release];
        [loadingView setAlpha:0.0];
          [self.tableView addSubview:loadingView];
        [UIView beginAnimations:@"fadeOutSync" context:NULL];
        [UIView setAnimationDelegate:self];
        [UIView setAnimationDuration:0.5];
        [loadingView setAlpha:0.5];
        [UIView commitAnimations];
}

-(void) hideModalActivityIndicator {
    if (loadingView) {
    [UIView beginAnimations:@"fadeOutSync" context:NULL];
    [UIView setAnimationDidStopSelector:@selector (removeTranparentView) ];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDuration:0.5];
    [loadingView setAlpha:0];
    [UIView commitAnimations];
        }
}

-(void)removeTranparentView
{
    [loadingView removeFromSuperview];
    [loadingView release];
    loadingView = nil;
}

HOPE THIS HELPS. thank you

Answer 6

If you add a UIView as a subview of the main window it will cover the entire UI. Make it partially transparent and partially translucent and it will look like a popup.

This example shows how to fade the Default.png splash screen, starting with that it's pretty straightforward to add a couple methods to your application delegate (that has a pointer to the main window) to present and dismiss the progress view.