How to Add a New View Controller to Your iOS App - dummies

How to Add a New View Controller to Your iOS App

By Jesse Feiler

Your first step in adding a new view controller to your iOS app is to select the iPad storyboard file in the Project navigator. With the storyboard displayed, you then make sure that the Utility area is visible by clicking its icon in the Xcode toolbar’s View selector. With that done, you can now hide the Project navigator by clicking its icon in the Xcode toolbar’s View selector.

As the last step in getting your canvas ready, click the Attributes inspector button in the Inspector selector in the Utility area.

To add the Test Drive controller, you need to do the following:

1Select Objects in the Utility area’s Library pane, and then drag a new view controller from the pane into your storyboard.

Whereas you can add controls and other views to views only when the storyboard elements are full size, you can add view controllers at any zoom level.

A new scene is created.

2Select the Table view in the Master View Controller – Master Scene and then select the Attributes inspector.

If you look at the Canvas, you see a Table view with Prototype Cells, and a cell with the text of Title.

You’ll notice that, in the Table View section of the Attributes inspector, the Dynamic Prototypes option is selected.

Right now, if you select a cell, nothing happens. That’s because with Dynamic Prototype cells, you have to implement a method in your view controller to do something when a cell is selected.

Use the Attributes inspector to change the Master view from Dynamic Prototypes to Static Cells.

Static cells are used when you know in advance what needs to be displayed in a cell.

3In the Attributes inspector, select Static Cells from the Content drop-down menu.

You’ll notice a change in the Table view. The heading Prototype Cells will disappear and you’ll see three cells each with the text Title.

4In the Outline view, expand the disclosure triangle next to the table view and you’ll see a Table View section.

Expand the Table View section and you’ll see three Table View cells. Expand the first Table View cell and you’ll find a content view and then a label. Select the label, and in the Attributes inspector Title field, enter Test Drive.

5Select the first Table View cell (the cell, not the Test Drive label) in the Document Outline, and Control-drag from the cell in the Master View controller to the view controller you just added. Then release the mouse button.

Control-clicking from a button or Table View cell and dragging to the view controller you want displayed creates a selection segue or an accessory action. When you release the mouse button, you’ll see the Storyboard Segues contextual menu, which pops up onscreen.

6Select Push from the Selection Segue pop-up menu.

A segue performs the visual transition between two view controllers and supports push (navigation), modal, and custom transitions.

A push segue changes the scene — and the user sees the new view controller’s view (with its Back button) slide into place when the user taps a button.

In contrast to a push segue, a modal segue presents the view controller modally, with the transition style you specify, and requires the user to do something to get back to the previous view controller. As for custom transitions, segues support the standard visual transition styles such as Cover Vertical, Flip Horizontal, Cross Dissolve, and Partial Curl.

Segue objects are used to prepare for the transition from one view controller to another, which means segue objects contain information about both view controllers involved in a transition. When a segue is triggered — but before the visual transition occurs — the storyboard runtime calls the current view controller’s prepareForSegue:sender: method so that it can pass any needed data to the view controller that’s about to be displayed.

You’ll notice that selecting Push from the Storyboard Segue’s pop-up menu causes the Navigation bar to appear but also shrinks the view.

7Select the Push segue in the Master View Controller scene. After making sure that Push appears on the Style menu in the Attributes inspector, enter TestDrive in the inspector’s Identifier field; then press return (or enter).

You won’t always use the identifier, but it’s good practice to name it so that you can identify the segue.

The field in the storyboard isn’t updated until you press return, or sometimes until you click in another field in that inspector.

8Choose Detail Split from the Attributes inspector’s Destination drop-down menu.

The size of the view in the Test Drive controller changes.

9Finally, select the two unused Table View cells in the Document Outline and delete them by pressing Delete.

The default destination was set to Current, which meant that it was set to the Master view, because that’s where you were dragging from. With that default, the view controller had been resized for the Master view, which is 320 points wide in the standard Split View Controller. But you want the destination to be in the Detail view; choosing Detail Split in this step does that for you.

You can see that the view has now been sized down and that a Navigation bar has been added to the top of the view. If you expand the view controller in the View Controller Scene in the Document Outline, you can see that a Navigation bar was added there as one would expect.

You’ll also notice that a Disclosure Indicator (the chevron — a right-arrowhead-like shape on the right side of the Test Drive cell) has also been added.

When you select the Detail cell and create the Push segue with the Detail view as the destination, the new Test Drive controller becomes embedded in the Detail view’s Navigation controller. This Navigation controller manages the view controller stack for everything in the Detail view of the Split View Controller.