Build a User Interface

You create your app’s user interface in Interface Builder. Select a user interface file in the project navigator, and the file’s contents open in Interface Builder in the editor area of the workspace window. A user interface file has the filename extension .storyboard or .xib. Default user interface files are supplied by Xcode when you create new projects from its built-in templates.

../art/StoryboardIB_2x.png../art/StoryboardIB_2x.png

The contents of .xib and .storyboard files are stored by Xcode in XML format. At build time, Xcode compiles your .xib and .storyboard files into binary files known as nibs. At runtime, nibs are loaded and instantiated to create new views.

To add user interface elements, drag objects from the utility area into Interface Builder, where you arrange the elements, set their attributes, and establish connections between them and the code in your source files. As you lay out your app’s user interface elements in Interface Builder, you can write the code that implements their behavior in the assistant editor.

../art/IBandAssistant_2x.png../art/IBandAssistant_2x.png

Add User Interface Elements from the Object Library

Interface Builder has two major areas: the dock (on the left) and the canvas (on the right). The dock lists the objects contained in the user interface file. The canvas is where you lay out these objects in your app’s user interface.

../art/DockAndCanvas_2x.png../art/DockAndCanvas_2x.png

The outline view in the dock shows all the objects nested inside higher-level objects.

../art/OutlineView_2x.png

For xib files, you can choose to display the high-level objects in an icon view instead of the outline view by clicking the Hide and Show Document Outline control (../art/DockViewControl_2x.png).

../art/IconDock_2x.png../art/IconDock_2x.png

For storyboard files, only an outline view appears in the dock, which you can close and open by clicking the Hide and Show Document Outline control (../art/DockViewControl_2x.png). Every individual scene in a storyboard has its own scene dock directly below the canvas. The scene dock, shown below, displays objects only in icon view.

../art/SceneDock_2x.png

To add an object to your app’s user interface, open the utility area for the workspace window by clicking ../art/TB_ViewUtilities_2x.png in the view selector in the toolbar. Select the object library from the library pane by clicking ../art/LB_Objects_2x.png in the library selector bar. Drag an object (like Button in the screenshot) from the library to either the outline view in the dock or onto the canvas.

../art/DragButton_2x.png../art/DragButton_2x.png

As you add objects to Interface Builder, you resize them by their handles and reposition them by dragging. As you move items, dashed blue lines help you align and position the item within the view.

Above the object library in the utility area are the Interface Builder inspectors. You use these inspectors to specify some of the interface objects’ appearance and behavior. In the screenshot below, the Attributes inspector (../art/AttributesInspectorSelected_2x.png) is used to specify the button type Custom.

../art/ArcherButton_2x.png../art/ArcherButton_2x.png

Lay Out User Interface Objects for Automatic Resizing and Positioning

Use Auto Layout to define relationship constraints for your app’s user interface so that when one object changes its size or position, that object and its neighboring objects adjust their sizes and positions appropriately. For example, you can center an image horizontally in a storyboard scene. As the user rotates the iOS device, the image remains horizontally centered in both landscape and portrait orientations of the device.

With Auto Layout constraints governing the layout, the objects in your user interface automatically resize and reposition themselves whenever:

When you Control-drag between two objects, Interface Builder presents you with a list of appropriate constraints. Add constraints to your objects by choosing from this list. In the screenshot, the constraint to Center Horizontally in Container is selected for the image view and its containing view.

../art/AddingConstraint_2x.png../art/AddingConstraint_2x.png

To see the constraints for an object, select the object from the outline view in the Interface Builder dock. Constraints are represented on the canvas by solid blue lines. View their properties in the size inspector (../art/UB_IBSize_2x.png). From the size inspector, click the action (../art/ActionIcon_2x.png) icon to edit the properties of a constraint in the attributes inspector.

../art/ViewConstraints_2x.png../art/ViewConstraints_2x.png

If you double-click a constraint on the canvas, a pop-up window also lets you view and edit properties of that constraint.

../art/ViewAndEditAConstraint_2x.png../art/ViewAndEditAConstraint_2x.png

Connect User Interface Objects to Code

You write the code that implements the behavior of your user interface objects. Your code communicates with user interface objects through action and outlet connections.

Create an action connection when you need to send a message from a control to your code. A control is a user interface object that causes instant actions or visible results when the user manipulates the object. When the user clicks a button, for example, the button sends an action message telling your code to execute an appropriate action. Text fields, sliders, and switches are examples of commonly used controls in iOS; checkboxes, scroll bars, and text fields are commonly used controls in Mac OS.

Create an outlet connection when you need to send a message from your code to a user interface object. The object can be a control or any other object defined in your storyboard of xib file, such as a label, progress indicator, or map view. When your code determines that a button should disappear, for example, your code sends a message through an outlet telling the button to hide itself.

Send Action Messages from a Control to Your Code

Whenever the user activates a control, such as by tapping it, the control should send a message instructing your code to perform some action. The easiest way to configure a control to send an action message to your code is by Control-dragging from the control in Interface Builder to your object’s implementation file.

With Interface Builder open in the standard editor pane, select the control you want to configure, and select the Assistant Editor button (../art/TB_ViewSegment_Assistant_2x.png) in the workspace toolbar. The assistant editor opens your object’s implementation file.

Control-drag from the control in Interface Builder to the implementation file. (In the screenshot, the assistant editor displays the implementation file of the view controller for the Warrior button.) Xcode indicates where you can insert an action method in your code.

../art/insert_action_2x.png

Release the Control-drag. The assistant editor displays a Connection menu. In this menu, type the name of the action method (chooseWarrior in the screenshot below), and click Connect.

../art/name_the_action_method_2x.png

In the implementation file, Xcode inserts a skeletal definition for the new method, as shown below. The IBAction return type is a special keyword indicating that this instance method can be connected to your storyboard or xib file. Xcode also sets the action selector for the control to this method. As a result, the method gets invoked whenever the control receives an action message.

../art/skeletal_action_method_2x.png

To this skeletal definition, add the source code that implements the action method. Whereas activation of the control is implemented by the system, you must implement the control’s behavior. In the screenshot below, an action method starts a new game when the user clicks the Warrior button.

../art/implement_action_method_2x.png

Send Messages to a User Interface Object Through an Outlet

To enable your code to send messages to a user interface object (telling a label to display a text string, for example, or telling a button to appear or disappear), connect the user interface object to an outlet in your code. The easiest way to make an outlet connection is by Control-dragging from a user interface object in Interface Builder to the implementation file for another object. For example, to create an outlet in your view controller and connect a button to that outlet, Control-drag from the button in Interface Builder to the view controller’s implementation file in the assistant editor. Xcode indicates where you can insert an outlet declaration in your code.

../art/insert_outlet_2x.png

Release the Control-drag. The assistant editor displays a Connection menu. From this menu, choose Outlet, type the name of the outlet (warriorButton in the screenshot below), and click Connect.

../art/name_the_outlet_2x.png

Interface Builder adds the declaration for the outlet to the class. (Outlets are defined as IBOutlet properties. The IBOutlet keyword tells Xcode that this property can be connected to your storyboard or xib file.)

../art/property_defined_2x.png

Design the User Interface of Your iOS App with Storyboards

You use a storyboard to graphically lay out the user’s path through your iOS app. Use Interface Builder to specify your user interface in terms of:

A scene represents an onscreen content area. On iPhone and iPod touch, a screen generally contains a single scene. On iPad, a screen can be composed of more than one scene. A segue represents the transition from one scene to the next scene, such as when one scene slides over another.

The screenshot shows the default storyboard for an iOS project that you create in Xcode with the Master-Detail Application template. This storyboard contains three scenes and two segues. The leftmost scene represents a navigation controller, which manages user navigation between the master and detail scenes. When working from this template, add additional scenes as necessary by dragging view controllers from the object library to the canvas and configuring the view controller with the Identity inspector (../art/UB_IBIdentity_2x.png). Drag objects from the objects library to lay out each scene. Configure the objects and the segues with the Attributes inspector (../art/UB_IBAttributes_2x.png).

../art/interface_builder-storyboard_2x.png

Your master scene might, for example, contain a table listing multiple items. Each item in the master scene might then have a corresponding detail scene that provides additional information about the item. The navigation controller provides the back button that returns the user to the master scene from all detail scenes.

../art/MasterDetailViews_2x.png

Look Up Documentation for an Object

You can find concise class reference documentation for a user interface object without taking your focus away from Interface Builder. With a file open in Interface Builder, open the utility area by clicking the right button (../art/TB_ViewUtilities_2x.png) in the view selector in the toolbar. Select the Quick Help button (../art/QuickHelp_2x.png) in the inspector selector bar. In Interface Builder, click the object about which you want information. Documentation appears in the inspector pane of the utility area.

../art/QuickHelpIB_2x.png

For complete reference information about the object, click the title of the reference document listed in Quick Help. The reference document opens in the documentation viewer window. You can also open relevant programming guides, sample code, and other related documents by clicking their titles in Quick Help.

For additional information about settings you configure in the inspectors, move the pointer over a control in an inspector. A help tag appears.

../art/IBHelpTag_2x.png

Find Help for Using Interface Builder

Step-by-step instructions for performing common Interface Builder tasks are available directly in Xcode. Control-click anywhere on the Interface Builder canvas to see a short list of the most common operations. Choose Show All Help Topics to see all help articles for the source editor.

../art/IBHelpShortCut_2x.png../art/IBHelpShortCut_2x.png

Because the Control-click key combination is used by Interface Builder to make connections, you must Control-click on the canvas—not on any object in the user interface—to get the shortcut menu with the list of help articles.

Select a task, and a help article appears in the Xcode documentation viewer window.

../art/IBHelpArticle_2x.png../art/IBHelpArticle_2x.png