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 IB. In other words, it’s time for the fun stuff.
){kind=link}
){kind=link}
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.
CAUTION: Libraries, Libraries, Everywhere!
Xcode has more than one library. The Object Library contains the UI elements you’ll be adding in IB, but there are also File Template, Code Snippet, and Media libraries that can be activated by clicking the icons immediately above the Library area.
If you find yourself staring at a library that doesn’t seem to show what you’re expecting, click the icon of a square surrounded by a circle above the library or reselect the Object Library from the View, Utilities menu to make sure that you’re in the right place.
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.
)
FIGURE 5.4 The library contains a palette of objects that can be added to your views.
Using view button (four squares) at the bottom-left of the library, you can switch between list and icon views of the available objects. If you know the name of an object but can’t locate it in the list, use the filter field below the library to quickly find it.
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.
)
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 presented 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 Editing Tools
Instead of having you rely on your visual acuity to position objects in a view, Apple has included some useful tools for fine-tuning your interface design. 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 positioning. These blue, dotted lines are 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.
)
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 IB considers “appropriate” for something of that type and size.
Selection Handles
In addition to the 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 text field in Figure 5.7.
)
FIGURE 5.7 Use the selection 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.
Arrangement and Alignment
When you’re working with UI objects in Interface Builder, you’ll likely start to feel like you’re working in a drawing program. Two commands common in object-based drawing applications are Arrange (where you can position objects in front of or behind one another) and Align (where you can make misplaced objects line up). You’ll find both of these options also exist in Interface Builder.
To arrange objects, you can choose from the Editor, Arrange menu. Use the Arrange selections (Send to Back, Send Forward, and so on) to move UI elements behind or in front of other elements.
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 choosing 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.
)
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 design is the Size Inspector. IB 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).
)
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.
The Arrange drop-down menu gives you quick layout arrangements for the selected object (or objects). Using this menu, you can center the object, align it with other objects, or size it to take up the width or height of the view that holds it. You can do all of this with the main Interface Builder tools as well; this menu is just another place to make quick tweaks to your layout.
Below the Arrange menu are options for controlling layout margins. Layout margins are the amount of space around an object in your design. By default, layout margins are 8 points on the top, bottom, left, and right of each object. You can explicitly set layout margins to include more (or less) space around an object. These margins, however, are only used when using Auto Layout. Bear with me, I’m about to tell you what Auto Layout is.
Notice that the Size Inspector includes a section at the bottom labeled Constraints. Constraints are part of the Auto Layout system that we will be using to create resizable user interfaces in Hour 16. Because you’re likely to run into a few references to Auto Layout before we get there, let’s take a few minutes to get an idea of what this beast is.
The Auto Layout System
While the guides, Size Inspector, and other tools are helpful for laying out interfaces—even interfaces that can adapt to view changes—iOS applications can take advantage of a new powerful tool for managing layouts: the Auto Layout system. Auto Layouts are enabled by default on new projects and make it possible to write applications that adapt to a number of different screen sizes and orientations without needing to modify a single line of code. Do you want to write software to take advantage of all the available iOS device screen sizes? How about layouts that rearrange themselves when you move from portrait to landscape orientations? You’ll want Auto Layouts!
Understanding Constraints
Auto Layout works by building a series of constraints for your onscreen objects. The constraints define distances between objects and how flexible these relationships are.
For example, open the Constraints.storyboard file included in the Projects folder. This storyboard contains a view with a single label positioned in the upper center. Expand the View Controller scene in the document outline so that you can see all the objects it contains. Notice that at the same level in the hierarchy as the label, a Constraints object is showing up, as shown in Figure 5.10.
)
FIGURE 5.10 The Constraints object represents the positioning relationships within a view.
Within the Constraints object are two constraints: horizontal space and vertical space constraints. The horizontal constraint states that the left or right side of the label will be a certain number of points from the left or right edge of the view. These are known as leading and trailing constraints, respectively. A vertical constraint is the distance from the top or bottom of the view to the top or bottom of the label. Intuitively, these are called the top and bottom constraints.
Constraints, however, are more than just entries that tie an object to the view it is within. They can be flexible, ensuring that an object maintains at least or at most a certain distance from another object, or even that two objects, when resized, maintain the same distance between one another.
Constraints that set a specific size or distance between objects are called pinning. The flexibility (or inflexibility of a constraint) is managed by configuring a relationship.
Content Hugging and Content Compression Resistance
Now that you’re viewing an object with constraints, the Size Inspector updates to show a bit more information than we saw earlier. Click the label in the Constraints storyboard file and make sure that the Size Inspector is visible (Option-Command-5), as shown in Figure 5.11.
)
FIGURE 5.11 The Size Inspector shows information about how Auto Layout will affect an object.
The constraints affecting the label itself are shown near the bottom of the Size Inspector information, but there are additional settings now visible for Content Hugging (how friendly!) and Content Compression.
These settings control how closely the sides of an object “hug” the content in the object and how much the content can be compressed or clipped. An object that can expand horizontally but not vertically would set horizontal hugging as a low priority and vertical hugging as a very high priority. Similarly, if the content of the object (say a label) should not be compressed or clipped at all, the content compression resistance settings for both horizontal and vertical compression could be set to a very high priority.
Auto Layout and Automatic Constraints
When Apple introduced Auto Layout in Xcode 4.5, suddenly constraints were everywhere. Any label, button, or object you positioned in your user interface immediately had constraints appear. Each object requires at least two constraints (horizontal positioning and vertical positioning) to determine its location in the interface and (often) two to determine height and width. Add 10 objects, and suddenly you’ve got at least 20 to 40 constraints (and 40 blue lines all over your view).
In later releases of Xcode, Apple made this blue crosshatched nightmare go away. Now, when you position objects in your UI, you won’t see any constraints until you manually add them. That doesn’t mean they aren’t there; Xcode automatically adds constraints when you build your project. For beginners like us, this is perfect. We can lay out our UIs and not worry about constraints until we absolutely need to do something “clever” with object positioning. As already mentioned, we’ll “get clever” with Auto Layout in Hour 16, but for the time being, you can pretend it doesn’t even exist.