In this recipe, we will familiarize ourselves with the Interface Builder application. Interface Builder is a visual tool that enables you to design the user interface for your iOS applications.
Using Interface Builder, you are able to drag-and-drop views and objects onto your canvas area from the libraries pane. These objects can then be connected using outlets and actions so that they can programmatically interact with your code.
To display our view controller within Interface Builder and the Xcode environment, perform the following simple steps:
Select the
ViewController.xibfile from the project navigator window.From the Xcode toolbar, select the viewing options, as shown in the following screenshot:
In the preceding screenshot, this shows what Interface Builder looks like when an XIB file has been chosen from the project navigator window.
Whenever you use Interface Builder to design a user interface, any objects that have been used from the library pane will be connected to the Xcode project that they belong to.
As you can see from the preceding screenshot, the Interface Builder workspace is divided into three main areas. The following table provides a brief description of which area is used for what functions:
You may have noticed the section called Simulated Metrics located on the Attributes tab within the inspector pane window. This area shows you how our interface will look like within the designer, and eventually how it will look like when it is deployed and run on the iOS device.
Here you can specify whether your interface will have a status bar, toolbar, or even a navigation bar. It is worth mentioning that, if you set the Status Bar option to None, it does not mean that our application will start without a status bar.
The Building the user interface for our application recipe
The Creating outlets to Interface Builder objects recipe
The Adding and customizing views recipe in Chapter 2, User Interfaces – Creating the UI