How to make controls fade away on iPad/iPhone as per interface guidelines

Question

THe HIG makes a statement that on the iPad, to consider fading away controls similar to how the built in photo app does it. How is this accomplished? In my case I have an image occupying the majority of the screen with a tab bar and potentially tool bar and potentially other controls. How do I fade everything away except the image. And bring it back if the user touches the screen.

Thanks

Answer 1

I think you have 2 alternatives. First, by core animation, you can set the alpha to 0 in about 0.5 or 1 second, the other way is to set the toolbar and navigation bar to hidden. If you're working with a navigation controller, you can call

[self.navigationController setToolbarHidden:YES animated:YES];

or

[self.navigationController setNavigationBarHidden:YES animated:YES];

this probably do what you want.

"And bring it back if the user touches the screen."

For this, you may implement methods like:

– touchesBegan:withEvent: – touchesMoved:withEvent: – touchesEnded:withEvent: – touchesCancelled:withEvent:

(there is some tutorials around this, check this one)

this will work if you're working on a UIViewController subclass only.

Hope this helps.

Answer 2

Good question. There are a number ways to do this as some view controllers may have built-in methods for hiding (e.g. UINavigationController). For anything that is a UIView, or subclass of, I would recommend something like the following:

   [UIView beginAnimations:nil context:NULL];
   [UIView setAnimationDuration:1.0];
   //Fade out a UIImageView over a one-second duration
   imageView.alpha = 0.0;
   //Fade out the TabBar, assuming it's owned by the app delegate
   appDelegate.myTabBar.tabBar.alpha = 0.0;
   [UIView commitAnimations];

Hope this addresses your question.

Andrew