How to Create Storyboards and Views for iOS App Development

By Rajiv Ramnath

One of the very convenient features Apple added to Xcode 4, Apple’s configuration service for iOS, is the Storyboard feature, which is a declarative (that is a non-programming) means of specifying (but not implementing) the screen flow of an app.

The Storyboard feature can also be used to define most of the views of the app. A storyboard consists of a representation of the screens in an app and the transitions between them. The individual screens are called scenes, and the transitions between the screens are called segues.

A screen flow diagram for the app Tic-Tac-Toe

As you can see from the screen flow diagram of the app, the Tic-Tac-Toe app transitions between two main states:

  • A user is about to start a game session.

    The first screen in a new app's storyboard.
    The game screen in Tic-Tac-Toe

These states also correspond to the start and end of Use Case 1. These two screens will be the basis of the two scenes in the storyboard of the app, with a segue named segueToGameSession from Scene 1 to Scene 2.

Xcode workspace with the screen flow for the app Tic-Tac-Toe
Preview of an app's screen.

You can see that a good deal of the Tic-Tac-Toe user interface is done declaratively. Of course, you’ll need more code to complete the implementation of the views and to orchestrate the flow of the user interface from scene to scene.