How to Add the Weather View Controller to Your iOS App - dummies

How to Add the Weather View Controller to Your iOS App

By Jesse Feiler

Here’s where the rubber meets the road. To add the Weather view controller to your iOS app— complete with a web view for displaying the weather — you need to do the following:

1Select Objects in the Utility area’s Library pane and then select a view controller from the pane and drag it onto your storyboard.

A new scene is created.

2Select the new view controller on the storyboard.

Doing so reveals its attributes in the (already opened) Attributes inspector.

3In the View Controller section of the Attributes inspector, enter Weather in the Title field. Also enter Weather in the Storyboard ID field in the Identity inspector.

Be sure to press Return when entering text in a text field in the Attributes inspector.

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

Adding an identifier isn’t a requirement, but it’s a good habit to get into. As for the Title field, giving anything a title always makes it easier to figure out what’s what in the storyboard.

4Drag a toolbar from the Utility area’s Library pane.

Position it at the top of the view.

5Delete the Item button.

This button comes by default with the toolbar when you drag it in from the Library.

6Select the Weather cell in the Master View controller (it’s there under the Table View heading) and Control-drag from there to View Controller – Weather Scene.

You can do this either in the canvas or in the Document Outline or both. You may also want to rearrange the canvas so that your new view controller is near the Weather cell while you draw the connection.

If you haven’t done so already, as you work through the cells in the Master View Controller, add an Xcode-specific label to the Table View Cell for each one. It makes your life a lot easier.

7Select Replace from the Selection Segue pop-up menu that appears.

You use a segue whenever you want to create a transition from one view controller to another. A segue performs the visual transition between two view controllers and supports push (navigation), modal, and custom transitions. All you have to do (as you just saw) is Control-drag from a button or Table View cell to the view controller you want to be displayed.

A push segue causes the new view controller (with a Back button) to slide into place when the user taps a button; the Navigation bar items are updated appropriately.

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. (This requirement that the user do something is the modal part of a modal segue.) Segues support the standard visual transition styles, such as Cover Vertical, Flip Horizontal, Cross Dissolve, and Partial Curl.

In addition, segue objects are used to prepare for the transition from one view controller to another. Segue objects contain information about the 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.

A Replace segue causes the existing view controller to be replaced by a new one.

You’ll notice that the view resizes itself. It defaults to a Destination that’s the same as the originating view. You’ll need to fix that. (The Destination here is the Master view.)

8Select the segue on the storyboard Canvas or in the Document Outline and, back in the Attributes inspector, make sure that Replace appears in the Style menu in the Attribute inspector; then enter Weather in the Identifier field and press Return.

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

9If necessary, choose Detail Split from the Destination drop-down menu.

Notice that the segue is selected in the Document Outline as well as on the Canvas (it turns from gray to white), and the view controller has resized its view.

10Select the Table View cell containing the Weather label in either the Canvas or the Document Outline and, in the Attributes inspector’s Accessory field, make sure that the Accessory has been set to None.

Some other view controllers in the storyboard aren’t launched by segues, and you’ll add those as needed.