How to Create Your iOS App User Interface in the iPad Storyboard

By Jesse Feiler

Storyboard is a great tool for creating your iOS app user interface. In the Project navigator, select the Main_iPad.storyboard file and you’ll see several view controllers in the Document Outline (Split View Controller, Master View Controller, and Detail View Controller). Each view controller in a storyboard file manages a single scene (a scene, in this sense, is really just a view controller).

On the iPad, courtesy of the Split View Controller or a popover controller, you can have multiple scenes on a screen. (On the iPhone, you can generally see only one scene on a screen at a time.) In the Document Outline, select the disclosure triangle next to the Master View Controller in the Master View Controller – Master Scene to expand the view controller and you’ll see its view.

If you can’t see the Document Outline, you can use the Hide/Show Document Outline control. You can also zoom in and out of a storyboard by double-clicking in the storyboard’s Canvas, or by using the zoom control. The = sign returns the storyboard to full size, which is the only way views are editable.

To add user interface elements, select the view you want to work with under the view controller heading listed in the Document Outline.

It’s about the view controller

Selecting a storyboard file in the Project navigator launches Interface Builder, which is the editor you use to edit the storyboard files for your application. Most applications need only one storyboard file, but because you’re creating a universal app, you’ll have two storyboards, one for the iPad user interface (Main_iPad.storyboard) and one for the iPhone user interface (Main_iPhone.storyboard).

Each storyboard file you create has its own initial view controller, which serves as the entry point into the storyboard. In your application’s main storyboard file, the initial view controller would be the first view controller presented by your application.

image0.jpg

The view controller is the big kahuna here, and each view controller in a storyboard file manages a single scene. For iPhone applications, a scene manages one screen’s worth of content, but for iPad applications, the content from multiple scenes can be onscreen simultaneously.

To add new scenes to your storyboard file, all you have to do is drag a view controller from the Library to the storyboard canvas. You can then add controls and other views (such as Image, web, or even Table views) to the view controller’s view.

Besides the ability to lay out your application as a whole, storyboards also reduce the amount of code you have to write. Say you want to create a transition from one view controller to another; all you would need to do is Control-click a button or Table View cell in one view controller and drag to the other.

Dragging between view controllers creates a segue, which appears in Interface Builder as a configurable object. Segues support all the same types of transitions available in UIKit, such as navigation and modal transitions. A segue also enables you to define custom transitions.

Using Interface Builder to add the user elements

Xcode’s Interface Builder enables you to create a storyboard by letting you lay out your user interface graphically in each view controller. You use Interface Builder to design your app’s user interface and then save what you’ve done as a resource file, which is included in your app and loaded into your app at runtime.

This resource file is then used to automatically create the window and your app’s view controllers, as well as all your views and controls.

If you don’t want to use Interface Builder, you can also create your objects programmatically — creating views and view controllers and even things like buttons and labels using your very own application code.

So how do you actually get those little controls into the view that lives in the view controller scene? For that, you use another area of the workspace — the Utility area.

You use the View selector on the toolbar to display or hide the Utility area. The Utility area is an optional area on the right side of the Workspace window. To hide or show the Utility area, click the Utility button on the View selector on the right on the Workspace toolbar.

When you hover your mouse pointer over a toolbar button, a tooltip describes its function.

image1.jpg

Check out the Utility area in all its glory. The Library pane has been resized.

image2.jpg

As you can see, this area includes two panes, the top one for Quick Help and other inspectors (the Attributes inspector is selected here), and the bottom one for libraries of resources.