CODEWITHSUNDEEP
iphonecocoa-touch
Mugunth
Mugunth

Reputation: 14509

Creating a "loading..." view using iPhone SDK

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, loading a webpage, the screen goes dim and there is a modal view showing a spinning icon "Please wait..."

Example in the following screenshot:

Screenshot

Upvotes: 13

Views: 25318

Answers (7)

Ricky Helgesson
Ricky Helgesson

Reputation: 3586

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

UIAlertView with UIActivityIndicatorView
(source: iosdevelopertips.com)

Upvotes: 11

Nancy
Nancy

Reputation: 36

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];

Upvotes: 0

geekay
geekay

Reputation: 1671

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

Upvotes: 1

Matej Bukovinski
Matej Bukovinski

Reputation: 6152

If you want to avoid undocumented api you can also take a look at MBProgressHUD. It's similar to UIProgressHUD and even has some additional features.

Upvotes: 14

Lounges
Lounges

Reputation: 4664

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.

Upvotes: 4

duncanwilcox
duncanwilcox

Reputation: 3498

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.

Upvotes: 4

Jane Sales
Jane Sales

Reputation: 13546

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]; 
}

Upvotes: 17

Related Questions