iOS Storyboards: Getting Started

Specifying the Initial View Controller

Keep Main as the selected value and move to the next step: Identifying the specific view controller you want to start with inside that storyboard.

Open Main.storyboard and select the Tab Bar Controller Scene. On the right, select the Attribute inspector.

You’ll find a checkbox named Is Initial View Controller.

Checking this box will identify the selected view controller as the initial entry point for the storyboard you’re on. Also, an arrow will appear on the left of the view controller.

Now, build and run and you’ll see an empty view controller with a tab bar that has two items at the bottom.

Xcode comes with a template for building a tabbed app: The Tabbed Application template. You could have used it here, but it’s good to know how to build one yourself so you can create a tab bar controller by hand, if you have to.

Building the Players List

It’s time to build the first screen in your app. Currently, the two screens attached to the tab bar controller are both UIViewController instances. You’re going to replace the first tab scene with a UITableViewController instead.

Click the first view controller in the Document Outline to select it, then delete it. Drag a new table view controller into the canvas where the previous scene used to be:

Creating the Navigation Controller

You want to place the table view controller inside a navigation controller. Select the table view controller and choose Editor ▸ Embed In ▸ Navigation Controller from Xcode’s menu bar. This adds another controller to the canvas:

You could have dragged in a navigation controller from the library and embedded the table view, but this Embed In command is a nice time-saver for a common action.

Navigation controller is also a container view controller, and it has a relationship arrow pointing to the table view controller. You can see it in the Document Outline:

Notice that embedding the table view controller gave it a navigation bar. Interface Builder automatically put it there because this scene will now appear inside the navigation controller’s context.

Reconnecting the Tab Controller

Deleting the first scene also deleted its relationship with the tab bar controller. But now, you want to recreate it. Instead of connecting it to the Table View Controller Scene, you’ll connect it to the Navigation Controller Scene.

To do this, Control-drag from the tab bar controller to the navigation controller. When you let go, a small pop-up menu will appear. Choose the Relationship Segue – view controllers option:

This creates a new relationship arrow between the two scenes. This is also an embed relationship, like the one you saw earlier. The tab bar controller has two embed relationships, one for each tab. The navigation controller itself has an embed relationship with the table view controller.

When you made this new connection, a new tab was added to the tab bar controller named Item. For this app, you want this new scene to be the first tab, so drag the tabs around to change their order:

Build and run to try it out. The first tab now contains a table view inside a navigation controller.

Giving Tabs an Identity

In their current state, the tabs are not expressive at all. Each should have its own icon and name to represent its views. The first tab’s name should be “Players” and the second should be “Gestures”.

When any a controller is connected to a tab, it automatically has an instance of UITabBarItem. This instance defines the name and the image that should appear on the tab bar.

In the Document Outline, under the Item 2 Scene, you will find an item named Item 2 that has a star icon beside it. Select it and, in the Attributes inspector, change its Title to Gestures.

Now, try another way to set the title. In the navigation controller, double-click the word Item at the bottom of the tab bar and type the new name Players.

You can add the images now. Open Assets.xcassets from the Project navigator then drag the Images folder from the download materials into it.

Back in Main.storyboard, use the Attributes inspector to change the images of the two tab items you just renamed using their matching images.

Build and run and marvel at your pretty tab bar. As promised, you haven’t needed a single line of code to come this far… and you’re just getting started. :]

Using Table Cells

So far, the Players tab shows an empty list because the table view in this screen has no cells. There are two ways a table view can operate:

• Dynamic prototypes allow you to build cells on the storyboard to create multiple copies of them. You can only instantiate them through code.
• Static cells will appear exactly the way you designed them in the storyboard. They don’t need any code to instantiate.

In most cases, you’ll use dynamic prototypes in your apps, but since the objective of this tutorial is to build a prototype with zero code, you’ll use static cells instead. Don’t worry, it’s easy to switch between them when you start building the code.

Select the table view and, from the Attributes inspector, change the value of the Content drop-down to Static Cells. Now, you can customize the cells.

Customizing Players’ Cells

The storyboard now shows three empty cells in the table view. Go ahead and delete two of them.

Select the remaining cell and change its Accessory to Disclosure Indicator.

Drag a Horizontal Stack View onto your cell. Then, within the horizontal stack, add a Vertical Stack View and an Image View. Finally, add two labels within the Vertical Stack View.

Your Document Outline should look like this now.