Posted on by & filed under Content - Highlights and Reviews, Mobile Development.

In a previous tip, I explained the use of iOS5’s Storyboard as a replacement for classic nib files. Storyboard can do more than just duplicating Interface Builder’s functionality; however, it can also allow you to create transitions between “scenes” (views), all with no coding required.

Creating a Transition

Before you can create a transition, you’ll need to:

  1. Create at least two scenes within Storyboard, as described in the previous tip.
  2. Differentiate your views in some way, such as using the Attributes Inspector on each View to set a background color.
  3. Drag an appropriate tool from the Objects palette to trigger a transition. In this case, I’ve gone with the ever-popular button.

Here’s the result:

To create a transition, control-click on the button in your first scene and drag the blue line that appears to your second scene. Then, release. A popup menu should appear that says “Storyboard Segues”. Choose “Modal”. An arrow with a disc will appear between the two scenes:

If you compile your program to the Simulator, you’ll see that if you click the button in the first scene, the second scene appears. The transition appears as a scroll-up from the bottom of the screen.
The exact same technique may be used to create a transition back from the second scene to the first.
(In a real program, you’ll probably instead have the second button dismiss your modal view controller, but we’re showing off transitions here, not IBActions.)

Modifying a Transition

You’ve now successfully created two scenes in the same Storyboard file and created ways to move back and forth between them. You can still take things one step further: you can modify the transitions between the scenes. To do this, simply click on the circular disc that appears on the arrow marking a transition, then select the Attributes Inspector.

From here, you can modify both the type of transition currently set to “Modal” and the graphical style (currently set to “Default,” which is that scroll-up transition I’ve just shown).

For example, if you select each transition in turn and set it to “Partial Curl,” you’ll give your transition a totally different look. Give it a shot!

Safari Books Online has the content you need

Learn more about Storyboards in iOS 5 in these books found in Safari Books Online:

Erica Sadun has thoroughly revised The iOS 5 Developer’s Cookbook: Core Concepts and Essential Recipes for iOS Programmers, Third Edition to focus on powerful new iOS 5 features, the latest version of Objective-C, and the Xcode 4 development tools.
Objective-C is the universal language of iPhone, iPad, and Mac apps, and Objective-C for Absolute Beginners: iPhone, iPad and Mac Programming Made Easy, Second Edition starts you on the path to mastering this language and its latest release.
In Xcode 4 Unleashed, Second Edition (rough cut), Anderson demonstrates Xcode 4 by walking through the construction of three full applications: a command-line tool, an iOS app, and a Mac OS X application.

About the Author

  Shannon Appelcline is a versatile author and programmer. He currently works as the lead iOS developer for Skotos Tech, an online entertainment company. In the past two years, he’s written five iOS games for them, all based on tabletop releases by popular German designers. The first of these was Reiner Knizia’s Money (2010)—which has also been ported to MacOS—while the most recent was Reiner Knizia’s Modern Art: The Card Game (2011). Shannon’s two most recent books show the breadth of his interests. They are iOS4 in Action (2011), published by Manning Publications, and Designers & Dragons: A History of the Roleplaying Game Industry (2011), published by Mongoose Publishing.

Tags: iOS 5, Storyboards, Transitions,

Comments are closed.