How to implement a loading animation when navigating in a iPhone app?

Question

It seems like a pretty simple problem, but I have been unable to find any good answers.

What I'm trying to do is to make some sort of animation while some function is loading. I have already included an animated .gif file in the webapp when waiting for content, but I need the same functionality when navigating in native. For instance, when I press a button in the tab bar, the screen is just blank until the entire page is loaded.

It doesn't need to be anything fancy. I like the way this is solved in the facebook app with the infamous "spinning wheel" for instance.

Thanks in advance!

Solution 1

you can add an UIActivityIndicatorView as a subview to a view and when the action is over you can remove it from superview...

UIActivityIndicatorView  *av = [[[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray] autorelease];
av.frame=CGRectMake(145, 160, 25, 25);
av.tag  = 1;
[yourView addSubview:av];
[av startAnimating];

removing it

UIActivityIndicatorView *tmpimg = (UIActivityIndicatorView *)[yourView viewWithTag:1];
[tmpimg removeFromSuperview];

hope it helps...

Solution 2

Your issue will be that the activity indicator will not be displayed because it will only be shown on the next pass through the run loop - by which time you will have done everything you need to!

The very very very easiest way of doing this is to move your code to call the next view into its own method then (having built a UIActivityIndicator as per other posts here) do

[self.myactivityindicator startAnimating];
[self performSelector:@selector(myCodeToCallTheView) withObject:nil afterDelay:0];

this gives just enough of a chance for the indicator to be drawn before running your code to draw the view. Of course once your new view appears it will overwrite the selector.

Solution 3

Ah-ha! I've just stumbled upon a most handy class: MBProgressHUD. Give it a try. I do believe it does what you seek, and then some.

I've also contributed a few mods in the author's blog post comments.

Solution 4

You can add a UIActivityIndicatorView to whichever view is "loading":

CGRect mainBounds = [[UIScreen mainScreen] bounds];
CGRect indicatorBounds = CGRectMake(mainBounds.size.width / 2 - 12,
    mainBounds.size.height / 2 - 12, 24, 24);
UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc]
    initWithFrame:indicatorBounds]];
indicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleWhite;
[indicator startAnimating];
[yourLoadingView addSubview:indicator];

Solution 5

On an aesthetic note, notice that UIActivityIndicatorView comes with several built-in styles for you to choose from. The code examples above use the Gray and White options, but there are several more described in Apple's documentation. You can set the style by using:

-initWithActivityIndicatorStyle:(UIActivityIndicatorViewStyle)

or by setting the object's activityViewIndicatorStyle property.

View more solutions