iOS Storyboards: Getting Started

Adding Constraints

Wait, what’s that red circle doing there? That’s a warning that the views you added have no idea how to position themselves in the cell. As your app runs on different devices with different screen sizes, the cell’s size will change. This is where Auto Layout comes in.

Select the Horizontal Stack view you added in the cell, then click on the Add New Constraints button that looks like a tie fighter.

That button will open a dialog that lets you specify constraint values. Specify the constraints to add for the Stack view as follows:

When you’re done, select the image and give it a Width constraint of 81.

Fixing the Layout Issues

With each set of constraints you add, the controls on the storyboard adjust their positions to match.

It’s important to avoid any layout errors, and right now, there’s still an error. Sometimes, Xcode is able to suggest the constraints you need to add to fix it. In this case, those suggestions will work, but remember that Xcode won’t always be right in future cases. :]

Click on the small red circle and it will show you the layout errors. Click the new red circle and tap Change Priority.

Change the font size of the lower label to 14 and set the image of the Image view to 4Stars. Then, use the Size inspector to change the default height of the cells in the table view to 60 and uncheck Automatic for both the table view and the cell.

Adding Items to Your List

A list isn’t really a list when it only has a single item. You can either duplicate the cells you just created or tell the table view to show more. In this case, you’ll do the latter.

Select Table View Section from the Document Outline and, in the Attributes inspector, set the number of Rows to 3.

Your last step is to give your cells some real data. Enter some people’s names and some games, then change some images to rate them. And don’t forget to give this screen a title: Just double-click on the empty space above the table view and type Players.

Build and run; you should see the list you just created.

Your next step is to build a view to let the user add a new player.

Building the Add Player Scenes

This screen will not be functional without code to make it work, but nothing is holding you back from creating the interface for these forms.

To start, you’ll add a “+” button in the top-right corner of the Players Scene.

Add a Bar Button Item to the upper-right corner of the scene. The corner will highlight automatically as you drag the button over that area. Then, change its System Type to Add.

The Add button should open a new scene with a form for the user to enter the player’s information; you’ll create that form next.

Connecting Scenes Through Segues

Drag a navigation controller onto your scene. It will come with a table view controller. Then, control-drag from the Add button to the newly-added navigation controller. Select Show from the pop-up menu.

Build and run, then tap the Add button.

You will see the new view controller appear from the bottom of the screen. When you drag or swipe that scene down from its header, you dismiss it.

The connection you created from the Add button to the navigation controller is called a Segue. And since it came from an interactive element on the screen, namely the button, you trigger the segue by tapping the button it’s connected to.

Apple introduced this card-like presentation in iOS 13. Previously, any view controller presented like this would take the full screen, and you needed a couple of lines of code to dismiss it. So iOS 13 made things look nicer with no code at all … That’s what’s called a double win! :]

Constructing the Form

The form you want to create should look like this:

In the newly-created view controller, double-click on its title from the storyboard and change it to Add Player. Then add two Bar Button Item instances, one to the upper-left corner and one to the upper-right corner. Change the System Type of the left one to Cancel and the one on the right to Done.

Next, select the table view in that scene, change its Content to Static Cells and change Sections to 2. Each section has three rows. You only need one under each section, so delete the last two.

Finally, change the Style of the table view to Grouped, the header of the first section to Player name and use an empty string for the title of the second one.

Build and run, then tap the + button to open the Add Player form. It should look like this:

Setting Up the Cells

The cell in the first section should be a text field. So drop a Text Field on the cell. Then change the Border style of that field to None.

Once you change its style, the control corners of the bounding box of the text field will appear. Manually set its size to fit the cell – yes without constraints – it will work. :]

In the first table view you created, you added each element you wanted inside the cell. Xcode also provides a few presets for table cells that you can choose from. They may not always fit your needs, but in some simple cases, they fit nicely.

To try them out, select the cell in the second section then change its Style to Right Detail and the Accessory to Disclosure Indicator. Double-click the word Title and replace it with Game.

Build and run and check that your form looks exactly like this:

Now, you can populate the list of games.