Designing a user interface can be challenging. Not only do you need to design a user interface that’s easy to use, but you also need to design an adaptive user interface that can respond to any changes the user might make to a window’s size. If the user shrinks a window, your user interface must shrink accordingly without cutting any items off. If the user enlarges a window, your user interface must expand accordingly to maintain a consistent appearance.

To help create adaptive user interfaces, Xcode provides constraints that fix the edges of various user interface items to a window’s edge or the edge of other user interface items. In this chapter, you’ll learn more about constraints and storyboards to help make user interface design easier than ever before.

Using Stack View

If your user interface contains a handful of items such as a text field, a button, and a label, it’s fairly straightforward to place constraints on these items so they stay in the correct place. However, if your user interface contains multiple items, then it can get messy to place so many constraints on each item. Change one constraint and your entire user interface can fail to adapt properly, which often means wasting time trying to get your multiple constraints working. Figure 22-1 shows how messy multiple constraints can look on a crowded user interface.

To solve this problem, Xcode offers a feature called Stack View. The idea behind stack view is that groups of user interface items often need to stay together. Rather than set constraints for each item individually, you group them together in a stack view, then set constraints for that single stack view.

To see how to create and use a stack view, follow these steps:

1. From within Xcode choose File New Project.
2. Click Application under the OS X category.
3. Click Cocoa Application and click the Next button. Xcode now asks for a product name.
4. Click in the Product Name text field and type StackViewProgram.
5. Make sure the Language pop-up menu displays Swift and that no check boxes are selected.
6. Click the Next button. Xcode asks where you want to store the project.
7. Choose a folder to store your project and click the Create button.
8. Click the MainMenu.xib file in the Project Navigator.
9. Click on the window icon in the pane that appears to the right of the Project Navigator pane. Your program’s user interface appears.
10. Choose View Utilities Show Object Library. The Object Library appears in the bottom right corner of the Xcode window.
11. Drag three check boxes on to the user interface window so they appear stacked on top of each other. Notice that unless you precisely align each check box, they won’t appear organized.
12. Drag the mouse to select all three check boxes as shown in Figure 22-2. (Another way to select multiple items is to hold down the Shift key and click on each item you want to select.)

    

    Figure 22-2. Dragging is a fast way to select multiple items

13. Choose Editor Embed In Stack View (or click the Stack View icon in the bottom right corner of the middle Xcode pane). Xcode groups your selected items inside a single stack view.
14. Move the mouse pointer over the stack view of three check boxes, hold down the Control key, and drag the mouse toward the right edge of the window.
15. Release the Control key and the mouse button. A pop-up window appears.
16. Choose Trailing Space to Container. Xcode displays the constraint for the entire stack view.
17. Move the mouse pointer over the stack view of three check boxes, hold down the Control key, and drag the mouse toward the bottom edge of the window.
18. Release the Control key and the mouse button. A pop-up window appears.
19. Choose Bottom Space to Container. Xcode displays the constraint for the entire stack view.
20. Choose Product Run. The program’s user interface appears.
21. Drag the bottom right corner of the window to shrink and enlarge the window. Notice that as you change the width and height of the window, the stack of three check boxes all move together as a group.
22. Choose StackViewProgram Quit StackViewProgram.

By using a stack view, you can keep grouped items together and only use one set of constraints for the entire group rather than exhaustively place constraints on each item individually.

Fixing Constraint Conflicts

Ideally, constraints should keep items a specific distance from the edge of the window or the edge of another user interface item. However if you shrink or expand a window, it’s possible for constraints to create unexpected problems.

Let’s see how setting two constraints on a user interface item can create a problem:

1. Make sure the StackViewProgram project is loaded in Xcode.
2. Click on the MainMenu.xib file in the Project Navigator pane.
3. Click on the window icon in the pane that appears to the right of the Project Navigator pane. Your program’s user interface appears.
4. Choose Edit Select All (or press Command+A). Xcode selects your stack view that’s currently on the user interface window.
5. Press the Delete key on your keyboard, or choose Edit Delete to delete all user interface items from the window.
6. Choose View Utilities Show Object Library.
7. Drag a single text field in the middle of the user interface window. (Don’t worry about the exact positioning.)
8. Move the mouse pointer over the text field, hold down the Control key, and drag the mouse to the right edge of the window.
9. Release the Control key and the mouse. A pop-up window appears.
10. Choose Trailing Space to Container. Xcode creates a constraint from the right edge of the text field to the right edge of the window.
11. Move the mouse pointer over the text field, hold down the Control key, and drag the mouse to the left edge of the window.
12. Release the Control key and the mouse. A pop-up window appears.
13. Choose Leading Space to Container. Xcode creates a constraint from the left edge of the text field to the left edge of the window.
14. Choose Product Run. The user interface window appears.
15. Move the mouse pointer over the right edge of the window and expand the window width by dragging the mouse to the right. Notice that the text field expands to the right.
16. Move the mouse pointer over the right edge of the window and shrink the window width by dragging the mouse to the left. Notice that the text field shrinks. If you keep shrinking the window width, the text field eventually disappears altogether, which is probably not what you want.
17. Choose StackViewProgram Quit StackViewProgram.

Right now we have two constraints that keep the text field a fixed distance from the two window edges, but they do nothing to keep the text field from disappearing if the window shrinks too much. One way to fix this is to create a compression constraint.

A compression constraint keeps a user interface item from shrinking or expanding too much. To create a compression constraint, you hold down the Control key and drag the mouse within the boundaries of that user interface element.

1. Make sure the StackViewProgram project is loaded in Xcode.
2. Click on the MainMenu.xib file in the Project Navigator pane.
3. Move the mouse pointer over the text field.
4. Hold down the Control key and drag the mouse to the left or right, keeping the mouse pointer within the boundary of the text field.
5. Release the Control key and the mouse. A pop-up menu appears as shown in Figure 22-3.

   

   Figure 22-3. Defining a compression constraint

6. Choose Width. Xcode displays a compression constraint underneath the text field as shown in Figure 22-4.

   

   Figure 22-4. A compression constraint appears underneath a user interface item

7. Choose Product Run. The user interface window appears.
8. Move the mouse pointer over the right edge of the window and try dragging the window to expand or shrink its width. Notice that you can’t do that because of the compression constraint.
9. Choose StackViewProgram Quit StackViewProgram.

The compression constraint tells Xcode to keep the text field a fixed width, and the left and right constraints tell Xcode to keep the text field a fixed distance from the left and right edges of the window. To satisfy all of these constraints, the window can no longer be resized in width.

What if we want to keep the text field width no smaller than its current width, but allow the window to resize? One solution is to use constraint priorities.

Priorities define which constraints must be satisfied first. Each time you create a constraint, Xcode gives it a priority of 1000, which is the highest priority possible. If you give a constraint a lower priority, then that constraint will allow constraints with higher priorities to take precedence. Let’s see how changing priorities on constraints works:

1. Make sure the StackViewProgram project is loaded in Xcode.
2. Click on the MainMenu.xib file in the Project Navigator pane.
3. Click on the text field to select it.
4. Chose View Utilities Show Size Inspector. The Size Inspector pane appears in the upper right corner of the Xcode window.
5. Click Edit to the right of the Width constraint. A pop-up window appears as shown in Figure 22-5.

   

   Figure 22-5. Editing a constraint

6. Click on the downward-pointing arrow to the right of the Priority text field. A pop-up menu appears as shown in Figure 22-6.

   

   Figure 22-6. Changing the priority of a constraint

7. Choose Low (250). Notice that Xcode now displays the width constraint as a dotted line to visually show you that its priority is lower than the constraints with a solid line as shown in Figure 22-7.

   

   Figure 22-7. A constraint with a lower priority appears as a dotted line

8. Choose Product Run. The user interface window appears.
9. Move the mouse pointer over the right edge of the window and try dragging the window to expand or shrink its width. Notice that if you shrink the window width, the text field disappears again.
10. Choose StackViewProgram Quit StackViewProgram.

Changing constraint priorities may not always give you the result you want so you may need to change how the constraint works. Most constraints define a fixed value that the constraint must satisfy. For more flexibility, you can also change this equal constraint to a greater than or equal or a less than or equal constraint.

1. Make sure the StackViewProgram project is loaded in Xcode.
2. Click on the MainMenu.xib file in the Project Navigator pane.
3. Click on the text field to select it.
4. Chose View Utilities Show Size Inspector. The Size Inspector pane appears in the upper right corner of the Xcode window.
5. Click Edit to the right of the Width constraint. A pop-up window appears (see Figure 22-5).
6. Click on the pop-up menu to the right of the Constant label. A pop-up menu appears as shown in Figure 22-8.

   

   Figure 22-8. Changing an equal sign to a greater than or equal to or less than or equal to sign

7. Choose the Greater than or equal to sign.
8. Click on the downward-pointing arrow to the right of the Priority text field so a menu appears, and choose High (750).
9. Choose Product Run. Notice that if you shrink the width of the window, the compression constraint will only shrink the text field a limited distance before stopping the text field from disappearing altogether. If you expand the width of the window, the text field expands.
10. Choose StackViewProgram Quit StackViewProgram.

When your user interface doesn’t adapt correctly, try one or more of the following options:

• Add or delete constraints
• Change constraint priorities
• Change constraints from equaling a fixed value to greater than or equal or less than or equal relationships

Each user interface problem with adapting to window resizing can be different, so solving that problem could be as simple as modifying one constraint or as complicated as modifying multiple constraints. If groups of user interface items move together, group them in a stack view for simplicity.

Often times you may need to experiment with modifying different constraints to see how they work in various combinations. Just be aware of your options for modifying constraints, and you’ll eventually find the best solution for your particular user interface.

Working with Storyboard References

The two ways to design user interfaces involve .xib files and .storyboard files. Storyboard files represent scenes (windows) connected by segues. For a simple program that consists of a handful of windows, a storyboard may be fine, but if your program’s user interface consists of many windows, then a storyboard can get clumsy and cluttered with multiple segues linking scenes.

The more scenes your user interface needs, the more complicated your storyboard can be to understand as shown in Figure 22-9.

To avoid storing your entire user interface in a single, cluttered storyboard, Xcode lets you divide a storyboard into parts using storyboard references. A storyboard reference lets you store scenes and segues in a separate storyboard file.

A storyboard reference replaces one or more scenes and segues with a storyboard reference box as shown in Figure 22-10. You can have multiple storyboard reference boxes where each one represents a separate storyboard file.

You can create a storyboard reference in two ways:

• Select the storyboard scenes you want to separate from a storyboard file and choose Editor Refactor to Storyboard
• Drag a Storyboard Reference from the Object Library and connect it to an existing scene in a storyboard

To see how to use storyboard references, follow these steps:

1. From within Xcode choose File New Project.
2. Click Application under the OS X category.
3. Click Cocoa Application and click the Next button. Xcode now asks for a product name.
4. Click in the Product Name text field and type StoryProgram.
5. Make sure the Language pop-up menu displays Swift and that Use Storyboards check box is selected.

    Note  If you fail to select the Use Storyboards check box, Xcode will store your user interface in a .xib file instead of a .storyboard file.

6. Click the Next button. Xcode asks where you want to store the project.
7. Choose a folder to store your project and click the Create button.
8. Click the Main.storyboard file in the Project Navigator. Your program’s user interface appears displaying a single view.
9. Choose View Utilities Show Object Library.
10. Drag a Push Button and place it on the View Controller window.
11. Drag a Tab View Controller into your storyboard to the right of the View Controller window that contains the push button.
12. Move the mouse pointer over the push button, hold down the Control key, and drag the mouse over the Tab View Controller as shown in Figure 22-11.

    

    Figure 22-11. Control-dragging creates a segue between view controllers

13. Release the Control key and the mouse. A pop-up window appears.
14. Choose show. Xcode draws a segue between the two view controllers.
15. Click on the Tab View Controller to select it.
16. Choose Editor Refactor to Storyboard. A sheet drops down to ask the name you want to give your storyboard as shown in Figure 22-12.

    

    Figure 22-12. Control-dragging creates a segue between view controllers

17. Click in the Save As text field and type Tab.storyboard
18. Click the Save button. Xcode saves the Tab View Controller in a Tab.storyboard file and displays a storyboard reference box in the Main.storyboard file.
19. Click on the Tab.storyboard file in the Project Navigator pane. Xcode shows the Tab View Controller.

Summary

Every program’s user interface is crucial to letting users control a program. It doesn’t matter how powerful your program may be if the user interface frustrates users and discourages them from using the program.

Since every user interface needs to respond to changes the user might make to the size of a window, stack views let you group related items together and apply constraints on that entire stack view. Without grouping related items together, you would have to apply constraints to each item individually, which could get messy and be difficult to fix if they don’t respond the way you expect.

If you have constraint conflicts, you can modify priorities of each constraint and/or modify how a constraint works. When you create a constraint initially, Xcode makes the constraint equal to a fixed value. To provide flexibility, you can change this equal sign to a greater than or equal, or less than or equal sign.

To keep your user interface items visible, you can also apply compression constraints. Unlike ordinary constraints that link an item to another item or the edge of a window, a compression constraint defines the width and/or height of a user interface item. Compression constraints keep user interface items from disappearing if the user resizes a window.

For designing user interfaces that display windows or views in a specific order, you might find storyboard files easier to use than multiple .xib files. Rather than store your entire user interface in a single storyboard file (which can get cluttered and hard to understand), you can create storyboard references.

A storyboard reference divides a user interface into multiple storyboard files. By separating a user interface into multiple storyboard files, you can design and understand the structure of your user interface much easier.