Creating Outlets in Interface Builder
- You can use Interface Builder to create the outlets for the UI components that the app interacts with programmatically.
- 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.
- 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.
Example for Outlets in Interface Builder
- Consider that you have viewcontroller with one label and You have to create the outlet for this label.
- 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 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.
- You’ll now create an outlet for the Label that displays the user’s input.
- Also, You need this outlet to programmatically change the Label’s text to display the input in currency format.
- So, Outlets declared properties of a view controller class.
To create the outlet:
- Control-drag from the Label to below the Class of view controller in ViewController.swift and release. This displays a popover for configuring the outlet.
- Moreover, In the popover, ensure that Outlet selected for the Connection type, specify the name billAmountLabel for the outlet’s Name and click Connect.
Xcode inserts the following property declaration in class ViewController:
@IBOutlet weak var billAmountLabel: UILabel!
- You can now use this property to programmatically modify the Label’s text.
- Also, Repeat the above steps to create outlets for the other UI components if needed during programming.