Documentation Archive


Xcode Overview

Designing with Storyboards

You use a storyboard to graphically lay out the user’s path through your iOS, watchOS, or OS X app. Use Interface Builder to specify your user interface in terms of:

  • Scenes

  • Segues between scenes

  • Controls used to trigger the segues

A scene represents an onscreen content area. On iPhone and iPod touch, a screen generally contains a single scene. On iPad and Mac, a screen can be composed of more than one scene. A segue represents the transition from one scene to the next scene, such as when one scene slides over another. You can also create segues between storyboards, enabling you to break up your interface into related scenes.

The screenshot shows a storyboard for a master-detail pattern in an iOS project. This storyboard contains three scenes and two segues. The leftmost scene represents a navigation controller, which manages user navigation between the master and detail scenes. When working from this template, add additional scenes as necessary by dragging view controllers from the Object library to the canvas and configuring the view controller with the Identity inspector (image: ../art/IB_H_inspector_identity_button_2x.png). Drag objects from the Object library to lay out each scene. Configure the objects and the segues with the Attributes inspector (image: ../art/IB_H_inspector_attributes_button_2x.png).

image: ../Art/interface_builder-storyboard_2x.png

Your master scene might, for example, contain a table listing multiple items. Each item in the master scene has a corresponding detail scene that provides additional information about the item. The navigation controller provides the Back button that returns the user to the master scene from all detail scenes.

image: ../art/MasterDetailViews.pdf

For more information about storyboards, see Xcode Help.