iOS Storyboards: Getting Started

Creating the Games List

When you tap the second cell, it should open the list of available games to choose. This list should look like this:

This needs another table view controller, so add one to your storyboard now. Change the Content of its table view to Static Cells, and change the Style of the cells already inside it to Basic. Then select the Table View Section and increase the number of rows to six.

Change the titles of the rows to some games you like, and for only one of them, change the Accessory to Checkmark.

So far, this scene has no entry points; you want it to open when you tap the second cell in the Add Player screen. To make that happen, you’ll connect the scene the same way you connected the Add button to the navigation controller.

Control-drag from the second cell to the new scene. Select Show from the pop-up.

Notice that a back button appeared in the second scene after you made the connection. This is because the Show action here will push the second scene to the navigation controller that’s already there. Navigation controllers automatically provide a back button to any additional view controllers that are pushed inside them.

Build and run and celebrate the Ratings app. As promised, you didn’t need a single line of code to accomplish so much. :]

Did you know you can also use gestures in storyboards? Here’s how.

Making a Gesture

Gestures are another control you can use directly on storyboards. In this section, you’ll learn how to use them… without any code, as usual. :]

Add two Swipe Gesture Recognizers to the Gestures Scene.

In the Attributes inspector, set the Swipe direction of the first to Left, and the second to Right.

Notice that their names in the Document Outline are identical, although each has a different direction. This makes it slightly harder to identify your objects later on. Right now, it doesn’t feel hard because you remember their order, but will you still remember it tomorrow?

Labeling Storyboard Elements

A better name would help you remember what your gestures do. Xcode allows you to change the name that appears in the Document Outline, which has no effect at runtime.

To change the name, select the first recognizer then, in the Identity inspector, change the value of the Label to Swipe Left Gesture. Do the same thing with the second recognizer to change the name to Swipe Right Gesture.

Their names will now appear like this:

Now that you’ve added the swipe gestures and they’re easily recognizable, you can start making some use for them. Add two new view controllers and add a label in the center of each to identify them when they’re open.

Connecting the Gestures

Select your Swipe Left Gesture and open the Connections inspector. In the Triggered Segues section, drag from the small circle on the right of action to the view controller you want to open from that swipe. Select Show from the pop-up.

Do the same for the Swipe Right Gesture and the other view controller.

Build and run, then select the Gestures tab and swipe left or right. The swipe action will present the view controllers they’re connected to. When you swipe the new scene down, it will close.

Changing the Presentation Animation

UIKit offers different presentation styles and animations, and you can change your style directly from the storyboard. Select any of the two new view controllers and open the Attributes inspector.

The Transition Style defines how the scene will animate when it presents. And the Presentation sets the way this scene displays, regardless of the animation type.

Not all Transition Style animations work with all Presentation values. For example, Partial Curve won’t work with the new presentation style provided by iOS 13. To try it, you must change Presentation to Full Screen.

Feel free to explore them and see the different animations you can perform by simply changing a value from a drop-down list. All this without any code at all. :]

Where to Go From Here?

In this tutorial, you learned a lot about the power of storyboards, including:

• Building your interface using the Object Library and customizing that interface.
• Connecting screens through segues and making your app interactive without writing any code.
• Customizing names and labels in the Document Outline.
• Changing the transition animations between view controllers.

If you want to build faster and more powerful interfaces, you’ll want to learn more about Auto Layout. Auto Layout is a very powerful tool to define the layout of your screens, the better you are with it, the more sophisticated your apps will be.

To take the next step and turn this storyboard into a full app, check out iOS Storyboards: Segues and More.

If you have any questions or comments, please don’t hesitate to join the forum discussion below.