How to Set up Scenes and Screen Flow in iOS Apps - dummies

How to Set up Scenes and Screen Flow in iOS Apps

By Rajiv Ramnath

Effective programs run smoothly due to proper setup. Follow the steps below to set up the scenes and the screen flow for your iOS app. To add a scene, follow these steps:

  1. Edit the storyboard file.

    Select the storyboard file for the project (for this project the file is named MainStoryboard.storyboard).

    A blank canvas appears.

  2. Show the Object Library.

    In the Utility area, click the little cube shown at the lower-right of the screen below the panel labeled Text Settings. The cube will become blue.


    Hover the cursor over the cube, and a tooltip displaying Show the Object Library appears.

    A collection of classes appears, with the first class being View Controller.


  3. Add a view controller to the storyboard:

    1. Select View Controller and drag it onto the canvas.

    2. Zoom the scene to 100% (by right-clicking on a blank area on the storyboard canvas).

    3. Scroll down the Object Library until you see typical UI classes (buttons, labels, and the like).

    4. Drag and drop a label (a class named UILabel) where you need to on the screen. Double-click the label and enter Welcome to Tic-Tac-Toe!

    5. Drag and drop a button (a class named UIButton) where you need to on the screen. Double-click the button and enter Start a New Session.

  4. Add the second scene.

    1. Drag in a view controller to create a scene.

    2. Drag in a view (a class named UIView).

    3. Drag in two text fields (each of a class named UIText).

      One text field shows the game status, and the other one shows the accumulated scores of each player in that session.

    After you’re familiar with the UI elements, you can get an element by clicking a row in the list of elements and typing the name of the element you’re looking for.

  5. Stitch the scenes together.

    In the screen flow for Tic-Tac-Toe, the goal is to click the Start New Session button to bring up the second screen. Place the cursor on the Start New Session button and Control-drag from there to the second scene.

    When you release the cursor, you’re prompted to make a selection that sets the segue’s type.

  6. Select Modal.

    A segue from Start New Session in the first scene to the second is created. The resulting storyboard should look like picture below of storyboard with two screens and a connecting segue.


You can now test the screen flow:

  1. Go to the main menu, click Product, and select Run.

    The program starts and the first scene appears.

  2. Click Start New Session.

    The second scene appears. Of course, you still have to write the code to implement the game’s functionality, but, hey, every little bit helps.