- 3.1 Introduction
- 3.2 Technologies Overview
- 3.3 Building the App's UI
- 3.4 Creating Outlets with Interface Builder
- 3.5 Creating Actions with Interface Builder
- 3.6 Class <tt>ViewController</tt>
- 3.7 Wrap-Up
This chapter is from the book
This chapter is from the book
This chapter is from the book
3.4 Creating Outlets with Interface Builder
You’ll now use Interface Builder to create the outlets for the UI components that the app interacts with programmatically. Figure 3.32 shows the outlet names that we specified when creating this app. A common naming convention is to use the UI component’s class name without the UI class prefix at the end of an outlet property’s name—for example, billAmountLabel rather than billAmountUILabel. (At the time of this writing, Apple had not yet published their Swift coding guidelines.) Interface Builder makes it easy for you to create outlets for UI components by control dragging from the component into your source code. To do this, you’ll take advantage of the Xcode Assistant editor.
)
Fig. 3.32 | Tip Calculator’s UI components labeled with their outlet names.
Opening the Assistant Editor
To create outlets, ensure that your scene’s storyboard is displayed by selecting it in the Project navigator. Next, select the Assistant editor button (
) on the Xcode toolbar (or select View > Assistant Editor > Show Assistant Editor). Xcode’s Editor area splits and the file ViewController.swift (Fig. 3.33) is displayed to the right of the storyboard. By default, when viewing a storyboard, the Assistant editor shows the corresponding view controller’s source code. However, by clicking Automatic in the jump bar at the top of the Assistant editor, you can select from options for previewing the UI for different device sizes and orientations, previewing localized versions of the UI or viewing other files that you’d like to view side-by-side with the content currently displayed in the editor. The comments in lines 1–7 are autogenerated by Xcode—later, we delete these comments and replace them with our own. Delete the method didReceiveMemoryWarning in lines 18–21 as we will not use it in this app. We’ll discuss the details of ViewController.swift and add code to it in Section 3.6.
)
Fig. 3.33 | ViewController.swift displayed in the Assistant editor.
Creating an Outlet
You’ll now create an outlet for the blue Label that displays the user’s input. You need this outlet to programmatically change the Label’s text to display the input in currency format. Outlets are declared as properties of a view controller class. To create the outlet:
Control drag from the blue Label to below line 11 in ViewController.swift (Fig. 3.34) and release. This displays a popover for configuring the outlet (Fig. 3.35).
Fig. 3.34 | Control dragging from the scene to the Assistant editor to create an outlet.
- In the popover, ensure that Outlet is selected for the Connection type, specify the name billAmountLabel for the outlet’s Name and click Connect.
)
){kind=link}
Xcode inserts the following property declaration in class ViewController:
@IBOutlet weak var billAmountLabel: UILabel!We’ll explain this code in Section 3.6.3. You can now use this property to programmatically modify the Label’s text.
Creating the Other Outlets
Repeat the steps above to create outlets for the other labeled UI components in Fig. 3.32. Your code should now appear as shown in Fig. 3.36. In the gray margin to the left of each outlet property is a small bullseye (
) symbol indicating that the outlet is connected to a UI component. Hovering the mouse over that symbol highlights the connected UI component in the scene. You can use this to confirm that each outlet is connected properly.
Fig. 3.35 | Popover for configuring an outlet.
)
Fig. 3.36 | Code after adding outlets for the programmatically manipulated UI components.