|

iOS 5 Tip: Use Storyboard for Layout Design

Interface Builder, now part of Xcode, is a great time saver for iOS programming. It lets you create and modify graphical objects via a Graphical User Interface (GUI) rather than having to code the creation of the objects. That’s all changed with iOS5’s Xcode 4.2, which instead lets you “storyboard” your entire interface of multiple screens—all using one centralized file.

Using Storyboard for New Projects

When you create a new project, you can choose to use Storyboard by checking the “Use Storyboard” box on the page for new project options:

Now, instead of familiar nib files, you’ll see a file called MainStoryBoard.storyboard (or else separate iPad and iPhone files, if you’re creating a universal app). You can use that one file to lay out multiple views (called “scenes”) and to transition between them (called “segues”)—all without ever writing a line of code.

Click on your Storyboard file, and you should see something like this:

That shows a single view controller and view.

To create a second scene, just call up the object library (at bottom right), then drag an appropriate view controller out to the gridded display. It’ll appear complete with its own view:

From here, you can further define each of these scenes and build connections back to your code, just like old-school Interface Builder files—except with everything appearing in a single file.

Using Storyboard for Old Projects

Unlike ARC (which I covered in a previous Tip), I don’t suggest converting existing projects to Storyboard. You’ve already done the hard work laying out your page designs and connecting them up with the code, so it’s probably not worthwhile to redo it.

If you really want to; however, you can add a Storyboard file to an existing project by choosing “File > New > File” in your project, clicking to see the “iOS” templates, then creating a new Storyboard file. From there, you’ll need to connect things up and layout Storyboard designs, as shown above, but this more complex setup is largely left as an exercise for the reader.

Safari Books Online has the content you need

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

By making use of more than 100 new recipes, iOS 5 Programming Cookbook teaches you the steps necessary for writing complete iOS apps, whether they’re as simple as a music player or feature a complex mix of animations, graphics, multimedia, a database, and iCloud storage.
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.
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.

About Safari Books Online

Safari Books Online is an online learning library that provides access to thousands of technical, engineering, business, and digital media books and training videos. Get the latest information on topics like Windows 8, Android Development, iOS Development, Cloud Computing, HTML5, and so much more – sometimes even before the book is published or on bookshelves. Learn something new today with a free subscription to Safari Books Online.
|

One Response to iOS 5 Tip: Use Storyboard for Layout Design

  1. Pingback: iOS 5 Tip: Create Transitions in Storyboard « Safari Books Online's Official Blog