How to Create a Screen Flow for an iOS App - dummies

How to Create a Screen Flow for an iOS App

By Rajiv Ramnath

After you create the project, you’re ready to create a storyboard that captures the screen flow for the iOS app. Storyboards give developers a declarative (non-programming) way to lay out the screen flow of an app, as well as define the layout of each screen in the app. A storyboard consists of the following:

  • A graphical representation of each screen in an app

  • A specification of the transitions between screens known as segues

When you use the Empty Application template to create the project, you need to add a storyboard file. To do so, follow these steps:

  1. Choose File→New→File.

    This screen shown appears, where you can select a template for the new file.


  2. Select User Interface on the left panel under iOS and then select Storyboard to add a storyboard file.


    This file is called Main.storyboard, but feel free to pick any name you want as long as it has the .storyboard extension. Leave the Where box as is, so that the storyboard will be saved in the same folder as the rest of your project’s files.

    In the figure, note the check mark beside Tic-Tac-Toe-Chapter-8, which is the app build target in this case. This step makes the storyboard a member of the app build target, so when the app is built, the storyboard is included in the build.

Make sure you check the app build target; otherwise, you’ll get weird errors that will take hours to debug. However, if you forget to check the target when you add the storyboard, you can do so later.

After you add the storyboard, you need to configure the project to use it, as follows:

  1. Edit the .plist file.

    Open the file with the .plist extension — Tic-Tac-Toe-Chapter-8-Info.plist (plist stands for property list file).

  2. Add a new row to the Information Property list.

    Move your mouse past the last row of the Information Property list. Right-click and select Add Row.

  3. Set the value for the new row.

    If you select the new row that you just added, it becomes a drop-down list. Select the entry Main storyboard file base name. Move your mouse to the right, under the Value column, and set the value for the new entry you just added to Main.


  4. Edit the app delegate file.

    Using the Project navigator, locate the app delegate file (in this case, TTTAppDelegate.m) and locate the method didFinishLaunchingWithOptions (see the following code).

  5. Edit the didFinishLaunchingWithOptions method.

  6. Comment out (or simply delete) all the lines except for the return YES statement.

    - (BOOL)application:(UIApplication *)application
      didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
     // self.window = [[UIWindow alloc]
           initWithFrame:[[UIScreen mainScreen] bounds]];
     // Override point for customization after application launch.
     // self.window.backgroundColor = [UIColor whiteColor];
     // [self.window makeKeyAndVisible];
     return YES;
  7. Right-click the storyboard file and choose Open As→Source Code.

    The storyboard appears, shown in XML.