While it’s possible to create programs that don’t need to interact with a user at all (such as a program that controls a traffic light), it’s far more common to create programs that display a user interface of some kind. Typically that means showing a window filled with different items such as labels to display text, text fields to allow the user to type something in, and buttons or pull-down menus to give the user control over the program.

Creating an effective user interface depends entirely on the purpose of your program. A business program typically follows standard conventions with pull-down menus and buttons, but a video game may create a custom interface that may not look anything like a standard OS X program. Ultimately a user interface needs to meet the needs of the user. Given a choice between following standard user interface design conventions or making a user interface easier for the user, focus on the user every time.

To help you better understand user interface design, Apple provides a free document called the OS X Human Interface Guidelines . This document gives a brief overview of what makes a typical OS X user interface work effectively with special emphasis on taking advantage of the latest features of OS X. By doing this, your OS X program will look modern and up to date. Failure to take advantage of the latest OS X features means your program could look dated even if it’s brand new.

In previous chapters you’ve designed simple user interfaces using Xcode. In this chapter, we’ll dig a little deeper into the different parts of Xcode that focus on helping you design user interfaces.

Remember, there is no “perfect” design for a user interface. The “perfect” user interface is one that makes tasks as simple and effortless as possible to the point where the user doesn’t even notice interacting with any user interface whatsoever. A user interface acts as the middleman or translator between you and the program. The goal of any user interface is to make users feel as if they’re communicating and manipulating a program directly.

Understanding User Interface Files

The Cocoa framework defines classes for creating every possible user interface item from a button (the NSButton class) and a text field (NSTextField) to a slider (NSSlider) or a date picker (NSDatePicker). Theoretically, it’s possible to create an entire user interface using nothing but Swift code. However, this can be tedious because you can’t see how your user interface looks until you actually run your program. This can be as clumsy as trying to paint a picture by describing exactly where you need to put a paintbrush on a canvas and the specific angle and direction to move your hand.

Rather than force you to write Swift code to define your user interface, Xcode offers a feature called Interface Builder . The idea behind Interface Builder is that you can design your user interface by dragging and dropping items on to a window.

The advantage of dragging and dropping items to create a user interface means you can see how your user interface looks so you can rapidly adjust and modify it. In addition, by separating the design of your user interface from your Swift code, you can now make changes to your user interface without affecting your Swift code and vice versa.

In the old days when programmers had to write code to create a user interface, modifying the user interface code risked affecting the code that made the program work (and vice versa). That meant modifying a program went slowly because you had to constantly test to make sure your changes didn’t affect another part of your program.

By keeping your user interface isolated from your Swift code, Xcode lets you create reliable programs faster than before. Now you can swap out one user interface and replace it with another one without affecting your code, or you can modify your code without affecting your user interface.

Xcode gives you two choices for how to store your user interface:

• In an .xib file
• In a .storyboard file

An .xib file (which stands for Xcode Interface Builder) typically contains a single window or view of your user interface. A simple program might have one .xib file for its user interface, but a more sophisticated program would likely need several .xib files to store different windows.

A .storyboard file consists of one or more views and segues where a view typically represents a window that appears on the screen and a segue defines the transition from one view to the next.

You can actually combine both .xib and .storyboard files in a single project to create your program’s user interface. Since .storyboard files are used to create iOS apps, .storyboard files are becoming more common for creating OS X user interfaces as well. (Chapter 14 explains more about storyboards and segues.)

The basic component of a user interface is a view, which displays information on the screen. A view can be an entire window or just a box that can display information such as a table, a scrolling list of text, or a picture. Whether you’re using .xib or .storyboard files, user interfaces always consist of one or more views containing other user interface items, such as buttons and text fields.

Searching the Object Library

To display your program’s user interface, you need to click on the .xib or .storyboard file in the Project Navigator pane. Once you’ve selected a user interface file to modify, you can then drag items from the Object Library (in the bottom right corner of the Xcode window) and place it anywhere on your user interface. To view the Object Library, choose View Utilities Show Object Library.

There are two ways to search the Object Library. One way is to simply scroll up and down until you find the item you want. Since the Object Library lists every possible user interface item available, scrolling can be clumsy and slow.

A faster method is to use the search field at the bottom of the Object Library pane as shown in Figure 13-1. Just type part of the name of the user interface item you want to use and the Object Library filters out every item that doesn’t match what you typed.

To see how to search the Object Library, 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 UIProgram.
5. Make sure the Language pop-up menu displays Swift and that no check boxes are selected. Notice at this point you could choose to use storyboards by selecting the “Use Storyboards” check box as shown in Figure 13-2. Keep the “Use Storyboards” check box clear for now.

   

   Figure 13-2. When creating a new project, you have the option of using storyboards for your user interface

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. Your program’s user interface appears.
9. Click the UIProgram icon, as shown in Figure 13-3, to display the window of your program’s user interface.

   

   Figure 13-3. The UIProgram icon represents your user interface window

10. Choose View Utilities Show Object Library. The Object Library appears in the bottom right corner of the Xcode window.
11. Scroll up and down through the Object Library. Notice the names and variety of different items you can add to your user interface.
12. Click in the search field at the bottom of the Object Library and type text. Notice that the Object Library now only shows those items that have “text” in their names or descriptions as shown in Figure 13-4.

    

    Figure 13-4. Searching the Object Library for “text”

13. Click in the search field at the bottom of the Object Library and click the close icon (the X inside the gray circle on the far right of the search field) to clear the search field.
14. Type button. Notice that the Object Library now only shows those items that have “button” in their names or descriptions. If you know all or even part of the name or purpose of the item you want, it’s far faster to search for it in the Object Library than scrolling through the lengthy list of every user interface item available.

User Interface Items That Display and Accept Text

Although the Object Library contains a huge number of available items that you can place on a user interface, most items can be grouped into categories by function. Remember, a user interface has three functions:

• Display information to the user
• Accept data from the user
• Allow the user to control the program

The simplest way to display information on a user interface is through a label. In the Cocoa framework, a label is based on the NSTextField class. Essentially a label is a text field that you can’t edit. To identify the class of any item in the Object Library, just click on it and a pop-up window appears that describes the item’s purpose and the class it’s based on as shown in Figure 13-5.

Any user interface item based on the NSTextField can be used to display and accept text, although it’s more common to use a label for displaying text and any other type of text field for letting the user type in text. The list of user interface items based on the NSTextField is shown in Figure 13-6:

• Label – Displays text but does not allow the user to enter or edit text.
• Text Field – Lets the user enter and edit text.
• Secure Text Field – Masks entered text with characters such as hiding typed passwords from view.
• Text Field with Number Formatter – Lets the user enter and edit formatted numbers easily.
• Wrapping Label – Displays text on multiple lines.
• Wrapping Text Field – Lets the user enter and edit text that appears on multiple lines.

User Interface Items That Restrict Choices

Letting the user enter data in a text field provides maximum flexibility. However, this flexibility also means that your program has no idea what type of data the user might enter. If a program expects the user to type in a number for an age, but the user types in “forty-nine” instead, the program will likely crash because it expects a number but received a word.

Even worse, a program could ask for someone’s age and a user could type a negative number or an outrageously high number such as 239, which is clearly impossible for someone’s age. To ensure that users enter in correct data, you can use a variety of different user interface items that lets the user choose a range of valid options. User interface items that display text (including numbers) choices include:

• Pop Up Button (NSPopUpButton) – Displays a menu of valid options.
• Radio Group (NSMatrix) – Displays a list of radio buttons where only one can be chosen at any given time.
• Check Box (NSButton) – Displays one or more check boxes to let the user select multiple options.
• Combo Box (NSComboBox) – Acts like a combination text field and pop-up button where the user can either type in text or choose from a list of valid options.

User interface items that allow the user to select a range of valid numeric options include:

• Date Picker (NSDataPicker) – Lets the user choose a date including day, month, and year.
• Horizontal/Vertical/Circular Slider (NSSlider) – Lets the user move a slider to select a fixed range of valid numeric values.
• Stepper (NSStepper) – Increments or decrements a value by a fixed amount.

With text options, you need to list all valid options that the user can choose. With numeric options, you just need to list a range of all valid options such as letting the user choose a number between 1 and 100.

User Interface Items That Accept Commands

The most common user interface item is one that accepts commands so the user can control a program. The two most common types of user interface items that accept commands are buttons and menus. Each button or menu item represent a single command, so when the user clicks on a button or menu item, that command tells the program to do something.

Both buttons and menu items allow the view to communicate back to the controller using something called target-action as shown in Figure 13-7. The target is a button or menu item, which triggers an action back in the controller, such as running an IBAction method.

User interface buttons are based on the NSButton class. Menu items are based on the NSMenuItem class. The Object Library displays a variety of different types of buttons and menu items, but they all work alike where the button or menu item represents a command. To make that command work, you need to connect the button on the user interface to an IBAction method in a Swift file.

User Interface Items That Groups Items

One type of user interface item does nothing but group and organize other items on the user interface, such as displaying a box around related buttons or text. These user interface items are more decorative so you likely won’t need to connect them to Swift code using IBOutlets or IBAction methods. Some examples of items that group and organize other user interface items include:

• Table View (NSTableView) – Displays data in rows.
• Collection View (NSCollectionView) – Displays data in rows and columns.
• Box (NSBox) – Displays a box that draws a border around related items.
• Tab View (NSTabView) – Displays a two or more tabs that can change the data that appears inside a box as shown in Figure 13-8.

  

  Figure 13-8. A Tab View can group two or more groups of related items in the same box

• Windows (NSWindow) – Displays a window that can hold other user interface items.
• Toolbar (NSToolbar) – Displays icons that represent commands.

Although the Object Library contains many other items, they typically fall in one of these four categories:

• Items that display or accept text.
• Items that let the user choose from a limited range of valid options.
• Items that let the user choose a command to control the program.
• Items that group or organize other user interface items.

Using Constraints in Auto Layout

No matter what type of items you place on a user interface, you need to consider what happens if the user resizes the window. A window that’s too big might leave too much empty space on the user interface. A window that’s too small might cut off items as shown in Figure 13-9.

There are two ways to make sure a user interface remains usable when the user resizes a window. First, you can define minimum and maximum sizes for a window to keep a window from shrinking or expanding too much. Second, you can set constraints on individual items that define the distance between neighboring items and the edges of the window.

In most cases, you can use both methods. That way you can define a minimum and maximum size for a window, and define how items on your user interface should adapt to changes in the window size.

Defining Window Sizes

A window displays your program’s user interface on the screen. Xcode lets you define the following for a window as shown in Figure 13-10 :

• The initial size of the window.
• The minimum size of the window.
• The maximum size of the window.
• The initial position of the window on the screen.

To define the size of a window of an .xib file in Xcode, follow these steps:

1. Click on the .xib file in the Project Navigator pane. Xcode displays the user interface stored in the .xib file.
2. If necessary, click the Hide Document Outline icon that appears in the bottom left corner as shown in Figure 13-11.

   

   Figure 13-11. The Hide Document Outline icon

3. Click on the bottom icon that represents the window of your user interface as shown in Figure 13-12.

   

   Figure 13-12. The bottom icon represents your user interface window

4. Choose View Utilities Show Size Inspector. The Size Inspector pane appears (see Figure 13-10).

Windows stored in .storyboard files work slightly differently than .xib files. To define the size of a window of a .storyboard file in Xcode, follow these steps:

1. Click on the .storyboard file in the Project Navigator pane. Xcode displays the user interface stored in the .storyboard file.
2. Click on the View Controller of the window you want to modify as shown in Figure 13-13.

   

   Figure 13-13. The View Controller defines your user interface window

3. Choose View Utilities Show Size Inspector. The Size Inspector pane appears (see Figure 13-10).

Xcode gives you two ways to change the size of a window. First, you can drag a side or corner of the window (or view controller) using the mouse. Second, you can click in the Width and Height text fields next to the Size label to choose a precise size for your window’s width and height as shown in Figure 13-14 .

To define the minimum and/or maximum size of a window involves a two-step process. First, you need to select the Minimum Size and/or Maximum Size check box. Second, you need to type or choose a width and height to define the minimum or maximum size for your window as shown in Figure 13-15.

Finally, you can define the initial position of a window when it first appears. You can do this by either dragging on the window icon on the simulated screen or by typing in an X and Y value into the Initial Position text fields as shown in Figure 13-16.

The two pop-up menus underneath the simulated screen lets you define how to determine the initial position of a window:

• Fixed from Left/Right – Defines a fixed value between the window edge and the screen edge
• Proportional Horizontal/Vertical – Defines a proportional value between the window edge and the screen edge, based on the size of the screen
• Center Horizontally/Vertically – Defines the window to appear in the center of the screen

To see how you can specify a window’s position and minimum/maximum size, let’s create a simple program and modify its window.

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 WindowProgram.
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 WindowProgram icon to make the window of the user interface appear.
10. Choose View Utilities Show Size Inspector. The Size Inspector pane appears.
11. Click the Minimum Content Size check box. Xcode displays the current width and height of the window, so keep those values.
12. Click the Maximum Content Size check box and change the Width and Height text fields to 600.
13. Drag the gray window rectangle in the Initial Position category to the far bottom right corner. The Size Inspector pane should look like Figure 13-17.

    

    Figure 13-17. Specifying a minimum, maximum, and initial position of a window

14. Choose Product Run. Notice that the program’s window appears in the bottom right corner since that’s where you defined its initial position.
15. Move the mouse pointer over the left edge of the window, hold down the left mouse button, and drag the mouse left and right. Notice that you can only widen and shrink the window to a fixed size. That’s because you defined both a minimum and maximum size for the window.
16. Choose WindowProgram Quit WindowProgram.

Placing Constraints on User Interface Items

Defining a minimum size for a window can keep the user from shrinking a window so small that it cuts off the items that appear on the user interface. However, what happens if the user expands a window? Then the items in the window should ideally adjust their position to adapt to the expanded window size.

Constraints define the distance between two items such as between a button and the edge of the window or between two buttons. Xcode gives you three ways to place constraints on a user interface item:

• Control-drag the mouse from a user interface item to another item or the edge of a window
• Choose Editor Pin or Resolve Auto Layout Issues
• Click the Pin or Resolve Auto Layout Issues icons in the bottom right corner as shown in Figure 13-18

To use the Control-drag method to place a constraint, follow these steps:

1. Move the mouse pointer over the user interface item you want to constrain.
2. Hold down the Control key and drag the mouse toward another user interface item or the edge of the window.
3. Release the Control key and the mouse button when the mouse pointer appears near the other user interface item or window edge. A pop-up window appears similar to Figure 13-19.

Depending on the direction you Control-drag the mouse, you’ll see different options in the pop-up window.

Besides Control-dragging to a window edge, you can also Control-drag from one user interface item over another user interface item. Doing this lets you define the distance between two items on the user interface such as the distance between two buttons or one button and a text field.

When you Control-drag the mouse over another user interface item, a pop-up window appears. If you’re defining the distance between two items that are side by side, the pop-up window will display the Horizontal Spacing option. If you’re defining the distance between two items that are stacked one on top of another, the pop-up window will display the Vertical Spacing option.

The Control-drag method lets you place constraints visually on different user interface items. Another way to define constraints is to click on the user interface item you want to constrain, and then click on the Pin icon to display a pop-up window. To define constraints through the Pin icon, follow these steps:

1. Click on the user interface item that you want to constrain.
2. Click the Pin icon. A pop-up window appears, showing four constraints to the left, right, up, and down as shown in Figure 13-20.

   

   Figure 13-20. The Pin icon displays a pop-up window of constraints

3. Click on a constraint to select it (the left and right constraints are selected in Figure 13-20 so they’re shown in red, but the up and down constraints are now selected so they appear as dotted lines).
4. Click in any of the additional check boxes.
5. Click on the Add X Constraints button at the bottom of the pop-up window to define a constraint.

The Pin pop-up window lets you define additional types of constraints for your selected user interface item:

• Width or Height – This keeps the size of your selected user interface item at a fixed size
• Equal Widths or Heights – This keeps two or more selected user interface items at the same fixed size
• Aspect Ratio – This keeps the ratio between the selected user interface item properly proportioned if it’s resized
• Align – This aligns two or more selected user interface items

A third way to define constraints is to let Xcode choose constraints for you. This lets you add constraints quickly, but at the risk that Xcode may not define constraints correctly. Fortunately, you can always edit constraints later.

To let Xcode choose constraints, follow these steps:

1. Click on the user interface item that you want to constrain.
2. Click the Resolve Auto Layout Issues icon to display a pop-up window as shown in Figure 13-21 (or choose Editor Resolve Auto Layout Issues).

   

   Figure 13-21. The Resolve Auto Layout Issues pop-up window

3. Choose Add Missing Constraints or Reset to Suggested Constraints.

If you choose the options in the top half of the window, you’ll affect only the selected user interface item. If you choose the options in the bottom half of the window, you’ll affect all user interface items whether on the currently displayed window whether you selected them or not.

Remember, adding constraints can be a trial and error process of defining a constraint and seeing how it works before modifying or deleting it altogether. As you add constraints, Xcode displays constraint lines around your user interface item. If Xcode doesn’t think you have enough constraints, all constraints on that item will appear as orange. The moment Xcode thinks you have enough constraints on an item, the constraints will appear in blue.

To see how constraints work with user interface items, follow these steps:

1. Make sure your WindowProgram project is loaded in Xcode.
2. Click the MainMenu.xib in the Project Navigator pane.
3. Click the Window icon to make the user interface window visible.
4. Choose View Utilites Show Object Library. The Object Library appears in the bottom right corner of the Xcode window.
5. Drag a Push Button item from the Object Library and place it anywhere on your window.
6. Move the mouse pointer over the Push Button that you just placed on the window.
7. Hold down the Control key and drag the mouse to the right until the entire window turns blue. Then let go of the Control key and the mouse. A pop-up menu appears (see Figure 13-19).
8. Choose Trailing Space to Container. Xcode displays a constraint between the edge of the window and the right edge of the push button as shown in Figure 13-22.

   

   Figure 13-22. Connecting a constraint to a window edge

9. Choose Product Run. Your window appears in the initial position you defined earlier.
10. Move the window to the center of the screen and resize the right edge. Notice that when you resize the right edge of the window, the button moves its position at the same time.
11. Choose WindowProgram Quit WindowProgram.

Editing Constraints

Once you’ve defined one or more constraints, you can always delete or edit existing constraints. To delete a constraint, you have several options:

• Click on the constraint and then press the Delete or Backspace key
• Click on the user interface item that has the constraint and open the Size Inspector pane, then click on the constraint and press the Delete or Backspace key

You can also delete or clear all constraints from a single user interface item or from all items on the currently displayed user interface. To do this, you have two options:

• Choose Editor Resolve Auto Layout Issues
• Click on the Resolve Auto Layout Issues icon in the bottom right corner of the window

With either option, you’ll see a menu divided in a top half and a bottom half as shown in Figure 13-23. Clicking Clear Constraints in the top half clears constraints only from any currently selected items. Clicking Clear Constraints in the bottom half clears constraints from all items in the currently displayed user interface whether you selected them or not.

Rather than delete a constraint, you can edit it. Editing lets you modify how it behaves. Three values you can modify about a constraint include:

• Constant – A fixed value that defines the value of the constraint
• Priority – A numeric value that determines which constraints must be followed first
• Modifier – A numeric value that defines a ratio that affects two values such as an item’s height to its width or one item’s width to a second item’s width

To edit a constraint, follow these steps:

1. Click on the user interface item that contains the constraint you want to edit.
2. Choose View Utilities Show Size Inspector. The Size Inspector pane lists all defined constraints as shown in Figure 13-24.

   

   Figure 13-24. Viewing a list of defined constraints in the Size Inspector pane

3. Click the Edit button on the far right of the constraint you want to modify. A pop-up window appears as shown in Figure 13-25.

Notice that to the right of the Constant: label, there’s a pop-up menu showing an equal sign (=). If you click on this pop-up menu, you can select greater than or equal to, less than or equal to, or equal to.

Further to the right of the Constant: label is a drop-down field that displays a number. If you click on the downward-pointing arrow, you’ll be able to choose between three options:

• A numeric value that you can type or edit
• Use Standard Value – Lets Xcode decide the best value
• Use Canvas Value – Uses the current distance on the screen to define a fixed value

Keep in mind that a fixed value or Canvas Value may behave differently on different size monitors. You may need to experiment until you find the right value for your particular user interface.

Priorities are used to resolve conflicts between two or more constraints that may contradict each other, such as one constraint keeping a button pinned to the right edge of a window and a second constraint keeping the same button pinned to the left edge of a window while a third constraint keeps the button a fixed width. By modifying priorities, you can make sure your constraints don’t conflict.

Finding the right combination of constraints can be tedious and frustrating at times. To simplify setting constraints, Xcode offers two ways to define constraints for you:

• Add Missing Constraints – Keeps any existing constraints you’ve defined and adds new ones Xcode thinks you’re missing
• Reset to Suggested Constraints – Deletes all constraints you may have set for an item and replaces it with its own constraints

When you first define constraints, Xcode displays them in orange to let you know that you don’t have enough constraints to define the position of an item on your user interface. Once you’ve defined enough constraints to specify a position, then Xcode displays constraints in blue.

If you define constraints, you may see a dotted orange line that represents the outline of your currently selected item. This dotted line is a frame and shows where your item will appear when you actually run your program.

To move an item into its proper location, you need to choose either Editor Resolve Auto Layout Issues Update Frames, or click on the Resolve Auto Layout Issues icon in the bottom right corner of the Xcode window and choose Update Frames (see Figure 13-23).

To see how Xcode can automatically define constraints, follow these steps:

1. Make sure your WindowProgram project is loaded in Xcode.
2. Click the MainMenu.xib in the Project Navigator pane.
3. Click the Window icon to make the user interface window visible.
4. Click on the Push Button your program’s window to select that button.
5. Choose Editor Resolve Auto Layout Issues. A pop-up menu appears (see Figure 13-23).
6. Choose Clear Constraints in the top half of the menu. (The top half of the menu affects only the selected item, which is the push button. The bottom half of the menu affects all items on the window. In this case, the only item is the push button, so you could actually select Clear Constraints in the top or bottom half of the menu.) Xcode removes the constraint from the button.
7. Choose Editor Resolve Auto Layout Issues. A pop-up menu appears (see Figure 13-23).
8. Choose Add Missing Constraints in the top half of the menu. Xcode adds constraints that it thinks the push button needs as shown in Figure 13-26.

   

   Figure 13-26. Xcode automatically adds all necessary constraints

9. Choose Product Run. Your window appears in the initial position you defined earlier.
10. Move the window to the center of the screen and resize the left edge. Notice that when you resize the left edge of the window, the button moves its position at the same time.
11. Choose WindowProgram Quit WindowProgram.

Defining Constraints in an OS X Program

To fully understand how constraints work, you need to see how they work in an actual program. Then you can see how your user interface adjusts each time you resize its window. In this sample program, we’ll define relationships constraints for a push button and a text field, and also define an aspect ratio for an image.

Earlier in this chapter you created an OS X project called UIProgram so we’ll use that to see how constraints work:

1. Make sure your UIProgram project is loaded in Xcode.
2. Click the MainMenu.xib file in the Project Navigator.
3. Click on the UIProgram icon to make the window of the user interface appear.
4. Choose View Utilities Show Object Library to make the Object Library appear in the bottom right corner of the Xcode window.
5. Drag one Push Button, one Text Field, and one Text View on the user interface so that it looks similar to Figure 13-27.

   

   Figure 13-27. The user interface of the InheritProgram

   While this user interface may look fine right now, it will look awful as soon as the user resizes the window. Choose Product Run and then resize the window to see how shrinking the window cuts off or hides items on the user interface. Now expand the size of the window and notice all the empty space inside the expanded window. Exit out of your program by choosing UIProgram Quit UIProgram.

   First, let’s define the window’s minimum size by following these steps:

6. Move the mouse pointer over the bottom right corner of the frame that surrounds your user interface window.
7. Drag the mouse until you see blue guidelines showing the boundary between your button and window edge as shown in Figure 13-28.

   

   Figure 13-28. Adjusting the size of the user interface window

8. Click the frame surrounding the user interface window and choose View Utilities Show Size Inspector to display the window constraints (see Figure 13-16).
9. Click the Minimum Size check box to define the current window size as its minimum size.
10. Choose Product Run. Resize the user interface window. Notice that you can only shrink the window to a certain size.
11. Choose UIProgram Quit UIProgram.

By defining a minimum window size, you’ve kept your user interface from getting cut off or having items disappear if the user shrinks the window too small. Now let’s add constraints to make the user interface adapt if the user expands the window size .

1. Move the mouse pointer over the button, hold down the Control key, and drag the mouse to the right and stop right before the window’s right edge as shown in Figure 13-29.

   

   Figure 13-29. Adjusting the size of the user interface window

2. Release the Control key and the mouse. A pop-up window appears.
3. Choose Trailing Space to Container. Notice that the constraints appear in orange to show that you don’t have enough constraints on the button yet.
4. Move the mouse pointer over the button, hold down the Control key, and drag the mouse down and stop right before the window’s bottom edge.
5. Release the Control key and the mouse. A pop-up window appears.
6. Choose Bottom Space to Container.
7. Click on the text field to select it.
8. Choose Editor Resolve Auto Layout Issues Add Missing Constraints. Xcode adds constraints automatically as shown in Figure 13-30.

   

   Figure 13-30. Constraints on the text field

9. Move the mouse pointer anywhere over the Text View.
10. Hold down the Control key and drag the mouse at a 45 degree angle up or down as shown in Figure 13-31.

    

    Figure 13-31. Defining an aspect ratio constraint

11. Release the Control key and the mouse. A pop-up window appears.
12. Choose Aspect Ratio to keep the width and height in proportion. Xcode displays orange constraints around the Text View to indicate that you don’t have enough constraints on the Text View.
13. Click the Resolve Auto Layout Issues icon in the bottom right corner and choose Add Missing Constraints. Xcode adds missing constraints so they now appear in blue.
14. Choose Product Run.
15. Resize the window. Notice how the user interface items adjust when you expand the window size. As you can see, constraints keep user interface items in their proper place and size no matter how the user resizes the window. Feel free to experiment with editing your constraints to see how they work.
16. Choose UIProgram Quit UIProgram.

Summary

Your program’s user interface determines how people interact with your program. Every user interface needs to display information, retrieve information from the user, and allow the user to choose commands. Ideally a user interface should focus more on using your program and less on figuring out how the user interface works.

The Object Library displays all possible items you can add to your user interface whether you use .xib or .storyboard files. To help you find items in the Object Library, you can type all or part of a word in the search field at the bottom of the Object Library.

Constraints help keep your user interface looking good no matter how the user resizes your program’s windows. The two basic types of constraints involve the following:

• Relationship constraints that define the distance between neighboring items such as between two buttons or a button and the edge of a window.
• Size constraints that define the height, width, or aspect ratio of an item.

You can define constraints on your own, let Xcode define constraints, or use a combination of both. Defining constraints may be a trial and error process until your user interface adapts to resizing windows exactly the way you want.