How to display a progress indicator overlay/HUD on iPhone?

iphone cocoa-touch core-animation
benzado picture benzado · Feb 27, 2009 · Viewed 35.8k times · Source

I want to display a progress indicator in a semi-transparent box that floats over a table view. In other words, when the table contents are being downloaded, I want an "Updating" label to appear over it.

I have seen this in several apps in the store, notably Facebook (when you shake to reload) and Darkslide.

My first impulse is to create a semi-transparent UIView, place a UILabel and a UIProgressIndicatorView inside it, and add it to the view hierarchy... but where? A UIView may not overlap its siblings, so I can't make it a subview of the window. I also can't make it a subview of the table, because then it will scroll up and down with the table content.

I thought about creating a new UIWindow, but the documentation basically says don't.

I know CALayers can overlap each other, so that would be an option, but I can't put a progress indicator inside a CALayer, can I? Should I roll my own progress indicator that animates a CALayer instead of a UIView?

I'm not interested in hearing about private APIs.

Edit: The question was based on a faulty assumption. NSViews (on Mac OS X) may not overlap, but UIViews on the iPhone may.

Answer

yonel picture yonel · Sep 16, 2011

I've just posted a HUD version of mine : https://github.com/y0n3l/LGViewHUD

you can get this result very easily : 

#import "LGViewHUD.h"
.... 
LGViewHUD* hud = [LGViewHUD defaultHUD];
hud.activityIndicatorOn=YES;
hud.topText=@"The longer....";
hud.bottomText=@"The better !";
[hud showInView:self.view];

enter image description here

Once the task is ended, just invoke 

[[LGViewHUD defaultHUD] hideWithAnimation:HUDAnimationHideFadeOut];

and that's it !

Related questions

iPhone UIView Animation Best Practice

What is considered best practice for animating view transitions on the iPhone? For example, the ViewTransitions sample project from apple uses code like: CATransition *applicationLoadViewIn = [CATransition animation]; [applicationLoadViewIn setDuration:1]; [applicationLoadViewIn setType:kCATransitionReveal]; [applicationLoadViewIn setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; [[myview layer] addAnimation:…

Read More
How to create custom easing function with Core Animation?

I am animating a CALayer along a CGPath (QuadCurve) quite nicely in iOS. But I'd like to use a more interesting easing function than the few provided by Apple (EaseIn/EaseOut etc). For instance, a bounce or elastic function. These …

Read More
How can I animate the movement of a view or image along a curved path?

I am developing a commerce application. When I add an item to the shopping cart, I want to create an effect where an image of the item follows a curved path and ends up at the cart tab. How can …

Read More