- Understanding Interface Builder
- Creating User Interfaces
- Customizing the Interface Appearance
- Connecting to Code
- Further Exploration
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating User Interfaces
In Figures 5.1 and 5.2, you’ve seen an empty view and a fully fleshed-out interface. Now, how do we get from one to the other? In this section, we explore how interfaces are created with Interface Builder. In other words, it’s time for the fun stuff.
If you haven’t already, open the Empty.storyboard file included in this hour’s Projects folder. Make sure the Document Outline area is visible and that the view can be seen in the Editor; you’re ready to start designing an interface.
The Object Library
Everything that you add to a view, from buttons and images to web content, comes from the Object Library. You can view the Library by choosing View, Utilities, Show Object Library from the menu bar (Control+Option+Command+3). If it isn’t already visible, the Utility area of the Xcode interface opens, and Object Library is displayed in the lower right. Make sure that the Objects item is selected in the pop-up menu at the top of the library so that all available options are visible.
When you click and hover over an element in the library, a popover is displayed with a description of how the object can be used in the interface, as shown in Figure 5.4. This provides a convenient way of exploring your UI options without having to open the Xcode documentation.
){kind=link}
)
Figure 5.4. The library contains a palette of objects that can be added to your views.
Adding Objects to a View
To add an object to a view, just click and drag from the library to the view. For example, find the label object (UILabel) in the Object Library and drag it into the center of the view in the Editor. The label should appear in your view and read Label. Double-click the label and type Hello. The text will update, as shown in Figure 5.5, just as you would expect.
){kind=link}
)
Figure 5.5. If an object contains text, in many cases, just double-click to edit it.
With that simple action, you’ve almost entirely replicated the functionality implemented by the code fragment earlier in the lesson. Try dragging other objects from the Object Library into the view (buttons, text fields, and so on). With few exceptions, the objects should appear and behave just the way you’d expect.
To remove an object from the view, click to select it, and then press the Delete key. You may also use the options under the Edit menu to copy and paste between views or duplicate an element several times within a view.
Working with the IB Layout Tools
Instead of relying on your visual acuity to position objects in a view, Apple has included some useful tools for fine-tuning your layout. If you’ve ever used a drawing program like OmniGraffle or Adobe Illustrator, you’ll find many of these familiar.
Guides
As you drag objects in a view, you’ll notice guides (shown in Figure 5.6) appearing to help with the layout. These blue, dotted lines will be displayed to align objects along the margins of the view, to the centers of other objects in the view, and to the baseline of the fonts used in the labels and object titles.
){kind=link}
)
Figure 5.6. Guides help position your objects within a view.
As an added bonus, guides automatically appear to indicate the approximate spacing requirements of Apple’s interface guidelines. If you’re not sure why it’s showing you a particular margin guide, it’s likely that your object is in a position that Interface Builder considers “appropriate” for something of that type and size.
Selection Handles
In addition to the layout guides, most objects include selection handles to stretch an object horizontally, vertically, or both. Using the small boxes that appear alongside an object when it is selected, just click and drag to change its size, as demonstrated using a button in Figure 5.7.
){kind=link}
)
Figure 5.7. Use the resize handles around the perimeter of an object to change its size.
Note that some objects constrain how you can resize them; this preserves a level of consistency within iOS application interfaces.
Alignment
To quickly align several objects within a view, select them by clicking and dragging a selection rectangle around them or by holding down the Shift key, and then choose Editor, Align and an appropriate alignment type from the menu.
For example, try dragging several buttons into your view, placing them in a variety of different positions. To align them based on their horizontal center (a line that runs vertically through each button’s center), select the buttons, and then choose Editor, Align, Horizontal Centers. Figure 5.8 shows the before and after results.
){kind=link}
)
Figure 5.8. Use the Align menu to quickly align a group of items to an edge or center.
The Size Inspector
Another tool that you may want to use for controlling your layout is the Size Inspector. Interface Builder has a number of “inspectors” for examining the attributes of an object. As the name implies, the Size Inspector provides information about sizes, but also position and alignment. To open the Size Inspector, first select the object (or objects) that you want to work with, and then click the ruler icon at the top of the Utility area in Xcode. Alternatively, choose View, Utilities, Show Size Inspector or press Option+Command+5 (see Figure 5.9).
){kind=link}
)
Figure 5.9. The Size Inspector enables you to adjust the size and position of one or more objects.
Using the fields at the top of the inspector, you can view or change the size and position of the object by changing the coordinates in the Height/Width and X/Y fields. You can also view the coordinates of a specific portion of an object by clicking one of the black dots in the size and grid to indicate where the reading should come from.
The Autosizing settings of the Size Inspector determine how controls resize/reposition themselves when the device changes orientation. You’ll learn more about these in Hour 16, “Building Rotatable and Resizable User Interfaces.”
Finally, the same controls found under Editor, Align can be accessed via the pop-up menu at the bottom of the inspector. Choose your objects, and then choose an alignment from the menu.