How to Add a Toolbar to Your iOS App

You may want a toolbar as part of your iOS app. To eliminate the Navigation controller in the Detail view and set it up so that you always see the button to display the Master view in a popover, you’ll need to add the toolbar to the Test Drive controller in the storyboard and create an outlet to the toolbar.

The outlet is needed to be able to add and remove buttons. Follow these steps to add the toolbar (needed by the popover) to the Test Drive controller.

1

In the Project navigator, select Main_iPad.storyboard.

In the View selector, display the Utility area.

2

Select the segue from the Master View controller (it is really from the Table View cell, but you can’t see that) to the Test Drive controller in the Canvas to display it in the Attributes inspector.

Optionally, you could select Push Segue from Table View Cell to TestDrive in the Master View Controller – Master Scene in the Document Outline.

If the Attributes inspector isn't visible, select it in the Inspector selector.

3

In the Attributes inspector, choose Replace from the Style drop-down menu, choose Detail Split from the Destination drop-down menu, and enter TestDrive in the Identifier field.

You’ll notice that doing so resizes the view so it can display in the Detail view. That means Test Drive will no longer be displayed in the Master view. If you really want Test Drive to still display in the Master view, you can take that on as your personal exercise.

4

In the Document Outline (or in the Canvas — as you can see you can use either), select the SeeTheUSA Image View in Test Drive Controller – TestDrive Scene.

Pin the image view to the edges of the screen with Editor→Pin using these four subcommands: Leading Space to Superview, Trailing Space to Superview, Top Space to Superview, and Bottom Space to Superview.

5

Drag in a toolbar from the Library in the Utility area and delete the Item button (it’s included in the toolbar by default).

In the Library, the toolbar item is way down at the bottom of the gallery. Don’t confuse the toolbar item with a Navigation bar.

You're getting there, but now you’ll need to connect the toolbar to the outlet in the DetailViewCotroller base class.

6

Select the Test Drive controller in the Document Outline and open the Connections inspector.

You’d open the Connections inspector as you’d open any inspector: by clicking its icon in the Inspector selector.

7

In the Connections inspector, drag from the Toolbar outlet to the toolbar on the canvas.

If you deleted the DetailViewCotroller’s detailDescriptionLabel outlet, you’ll have to delete it in the storyboard as well. (If you don’t, you get a runtime error. Just Control-click the Detail View controller entry in the Document Outline to open the Connections window.)

You’ll see a yellow warning triangle next to the detailDescriptionLabel line in the Outlets section of the window. Simply delete that outlet by clicking the x in front of the Label-Detail view content goes here line.

Because you’ve added the toolbar, you’ll have to change the math controlling the route your car takes in the TestDriveController.

8

Update the TestDriveController’s testDrive:method in TestDriveController.m with the code in bold.

This was an unused outlet.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.