Use Interface Builder to visually lay out your app's user interface. To edit the user interface, select a user interface file in the Project navigator (
), and the file opens in Interface Builder in the editor area. All projects created from a template contain a Main.storyboard file that contains the user interface for your app. For watchOS apps, the file is called Interface.storyboard. For iOS apps, there’s also a LaunchScreen.storyboard file for the view that is displayed while the app is launching. A storyboard (.storyboard) file contains a set of view controllers and their views. To open Interface Builder in a separate window, double-click the user interface file in the Project navigator.
The canvas shows your user interface as it appears on a device. For iOS and watchOS apps, the first time you open a storyboard file, a sheet prompts you to choose a device family (for example, iPhone 6s or Apple Watch 38mm). Later, you can change the device using the device configuration controls below the canvas.
The library in the utilities area (
) contains resources that you can add to your project or files. To add an object to the user interface, drag the resource from the Object library (
) to the canvas. To view the objects in a list or a grid, toggle the icon in the lower-left corner of the library. To filter the objects, enter text in the filter bar at the bottom of the library. For example, to find a button, enter button in the filter bar.
Drag all of the objects you want in your user interface to the canvas. Reposition the objects by dragging them to where you want, using the gridlines to help align and center the objects. To change text (for example, to edit the title of a button), double-click the object and enter the text.
The File inspector (
) and Quick Help inspector (
) in the utilities area are available throughout your project and display information depending on what you select in the navigator and editor areas. The other inspectors are specific to what is selected on the canvas. To edit the attributes of an object, select the object on the canvas and open the Attributes inspector (
). To get information about the size and position of a view, click the Size inspector (
).
To view the user interface on different device types, click the “View as” button below the canvas and select a device. To further configure the device, select an orientation and adaptation. For tvOS apps, select an interface style.
If the objects in the canvas don’t appear in the location you expect, use Auto Layout constraints to set rules for how the objects should scale and reposition. To center an object in a view, select the object and in the lower-right corner of the canvas, click the align icon (
). To place the object in the center of the view, select Horizontally in Container and Vertically in Container, and click Add 2 Constraints in the align tool popover.
Similarly, set the position of other objects, and optionally, set the position relative to an adjacent object. To pin the bottom of a label to the top of a button, select the label and click the Add New Constraints icon (
). In the add new constraints tool popover, select the dashed red line below the box, and click Add 1 Constraint. To check the constraints, change the device configuration below the canvas or run the app in Simulator again.
The outline view provides a hierarchical view of your objects in the user interface file. If the outline view is collapsed, click the toggle (
) below the canvas to expand it. You should be able to see the objects you added to the canvas under View Controller Scene. The outline view also shows Auto Layout errors. Click the red arrow to see the details of what went wrong, and then click an error to highlight the associated view.
Every scene in a storyboard references a view controller class that contains the code that manipulates the view. If you have multiple scenes in the storyboard, select the scene and click the Identity inspector (
) to get the associated view controller class. To connect objects on the canvas to your code, open the assistant editor, and in the jump bar at the top of the assistant editor, choose Automatic followed by a class implementation file—for example, choose ViewController.swift.
Add an outlet if you want to reference an interface object in your code—for example, change its value at runtime. To create an outlet, Control-drag from the object on the canvas to the code in the assistant editor where property declarations are allowed. In the popover that appears, enter the property name and click Connect.
To add an action method that’s called when the user interacts with a control (for example, taps a button, enters text, or moves a slider), Control-drag from the control to the method implementation section of the class source file. In the popover that appears, enter the method name, and click Connect (optionally, specify the types and the event that invokes the action). You can enter the code for the action method now, or enter it later using the source editor.
To view and edit the connections for an object, select the object and open the Connections inspector.
In the assistant editor, you can view a live preview of the user interface as you create it. From the assistant editor selection bar, choose a user interface file from the Preview menu. For example, choose Main.storyboard (Preview), and the assistant editor shows the layout of the first view your users will see. For iOS apps, use the control at the bottom of the preview to switch between portrait and landscape modes. If you add localization to your app, you can select a language from the pop-up menu in the lower-right corner. If you don’t have localization yet but want to see how your layout handles different string lengths, choose Double-Length Pseudolanguage from the language menu.
For macOS apps, add your own items to the Touch Bar by dragging an NSTouchBar object onto a window or onto a custom view. Then add your NSTouchBarItem objects, and connect the items to your app. Use Xcode to preview your items in the Touch Bar on a Mac or in the Touch Bar simulator.
Next Step: Write your code.