A client of ours needed a prototype of an app that used a UI that was sort of like a tab bar controller, but not quite. The was a control sort of like a tab bar at the bottom, with items on the left side that selected a view controller on the top. Some of the view controllers also added a segmented control to the tab bar, however, that caused different view controller to appear.
Thus, none of iOS'es existing view controller organizers would work. (There are only a few: navigation controller, tab bar controllers, page controllers)
We decided to try out the new parent/child view controller scheme that's supported in iOS 5.
It has proven very easy to use, and very flexible. You can create your own parent view controllers that implement new behaviors. You can make any part of the screen be managed by another view controller, and swap it out for a different view controller at will. (Think tool palettes in photoshop, or game boards in a multi-game board game engine.)
I was able to quickly and easily create the client's variation of a tab bar controller, that managed a set of child view controllers, rather like the way a tab bar controller does. Further, I added the ability to swap between view controllers using a variety of different transitions, some provided by the OS, and some custom.
The key was the method transitionFromViewController:toViewController:dura tion
ptions:animations:completion: That one method gives you a lot of power in managing child view controllers. You can pass in one of a few standard apple transitions in the options parameter:
- FlipFromLeft/right
- CurlUp/down
- CrossDissolve
- FlipFromTop/bottom
- FlipFromBottom
The animations block parameter lets you use standard UIView block animations, which makes slide, dissolve, grow/shrink, rotate, and other such transitions really easy.
Later, I decided to generalize this approach. I've created a general purpose "parent" view controller class. It has methods that let you register view controllers as child view controllers, and assign them to arbitrary container views. Once you've registered your child view controllers and the container view they belong to, there's a single call that lets you switch between view controllers using a wide variety of transitions.
I created a test-bed application that divides the screen into 2 "container" subviews, and installs 2 view controllers into each subview. Tapping on either view triggers a transition to the other view controller for that subview. I added a "combo box" control that lets you pick your transition.
I then went a little crazy, and created a whole family of different transitions. Here's the total list of animations that our parent view controller class supports:
crossDissolve,
slideFromRight,
slideFromLeft,
slideFromTop,
slideFromBottom,
flipFromRight,
flipFromLeft,
flipFromTop,
flipfromBottom,
curlUp,
curlDown,
growFromCenter,
shrinkToCenter,
/*------------
The transitions below use a CAAnimation, and don't use the transitionFromViewController:toViewController:dura tion
ptions:animations:completion method
This group of transtions uses a CAMaskLayer to either hide the old view or reveal the new view
*/
vBlindsRight,
vBlindsLeft,
vBlindsCascadeRight,
vBlindsCascadeLeft,
//This group of transitions "slices and dices" the contents of the view controllers and animates the pieces
vBlinds3DFlipRight,
vBlinds3DFlipLeft,
I'm most proud of the 3D cascade animation. That slices the view controller into a series of vertical "slats", and the animates each slat rising up off the screen and rotating in place, with the other view controller's content appearing on the back-side of the slat. The animation moves from left to right or right to left, creating a wave effect that is hypnotic to watch.
Here is a screen-shot of the test application, with the bottom view controller showing a cascade transition:
Sadly, a still image doesn't really do it justice.
iOS 5 Container view controllers and custom transtions
Linear Mode
