Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 714
Christer-André Larsen Avatar asked Jul 16 '09 11:07

Christer-André Larsen


People also ask

Why is loading icon important?

Loading animation is to inform users about the wait time, reason and expectation on the status of ongoing processes, such as loading a website, submitting a form, or saving updates. It can provide an excellent distraction of attention to prevent impatience for a long time waiting.


4 Answers

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...

like image 129
Sorin Antohi Avatar answered Oct 07 '22 09:10

Sorin Antohi


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.

like image 20
Andiih Avatar answered Oct 07 '22 09:10

Andiih


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];
like image 39
Nathan de Vries Avatar answered Oct 07 '22 08:10

Nathan de Vries


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.

like image 29
Joe D'Andrea Avatar answered Oct 07 '22 07:10

Joe D'Andrea