How to Add a Toolbar to Your iOS App
How to Create an Outlet for the Map Controller in Your iOS App
How to Add a Button to Your iOS App

How to Add the Weather View Controller to Your iOS App

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:

1

Select 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.

2

Select the new view controller on the storyboard.

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

3

In 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.

4

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

Position it at the top of the view.

5

Delete the Item button.

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

6

Select 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.

7

Select 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.)

8

Select 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.

9

If 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.

10

Select 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.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Use Inspector and Quick Help Pane for iOS App Development
How to Add a New View Controller to Your iOS App
How to Add the Events Controller to Your iOS App
How to Use the Navigator Area in the Workspace Window for iOS Apps
How to Create an iOS App
Advertisement

Inside Dummies.com