The Object Library

The object library contains the objects that you can add to a storyboard file to compose your interface. Find the Label object by either scrolling down through the list or by using the search bar at the bottom of the library. Select this object in the library and drag it onto the view object on the canvas. Drag the label around the canvas and notice the dashed blue lines that appear when the label is near the center of the canvas. These guidelines will help you lay out your interface.

Using the guidelines, position the label in the horizontal center of the view and the near the top. Eventually, this label will display questions to the user. Drag a second label onto the view and position it in the horizontal center, closer to the middle. This label will display answers.

Next, find Button in the object library and drag two buttons onto the view. Position one below each label.

You have now added four view objects to the ViewController's user interface. Notice that they also appear in the document outline. Your completed interface should looks great!

Now that you have created the view objects, you can configure their attributes. Some attributes of a view, like size, position, and text, can be changed directly on the canvas. For example, you can resize an object by selecting it in the canvas or the comment outline and then dragging its corners and edges in the canvas.

Begin by renaming the labels and buttons. Double-click on each label and replace the text with ???. Then double-click the upper button and change its name to Next Question. Rename the lower button to Show Answer. 

You may have noticed that as result of changing the text in the labels and buttons, and therefore their widths, they are no longer neatly centered in the scene. Click on each of them and drag to center them again.

Running on the simulator. To test your user interface, you are going to run this little project on Xcode's iOS simulator.

To prepare to run on the simulator, find the current scheme pop-up menu on the Xcode toolbar. If it says something generic like iPhone 6s, then the project is set to run on the simulator and you are good to go. If it says something like Bitch's iPhone, then click and choose iPhone 6s from the pop-up menu. The iPhone 6s scheme will be your simulator default throughout this article.

Click the triangular play button in the toolbar. This will build and then run the application. You will be doing this often enough that you may want to learn and use the keyboard shortcut Command-R.

After the simulator launches you will see that the interface has all the views you added, but they are not correctly placed. This is because the labels and buttons currently have a fixed position on a screen larger than iPhone 6s's, and they do not remain centered on the main view. To correct this problem, you will use a technology called Auto Layout.

Here's a brief introduction to Auto Layout. As of now, your interface looks nice in the Interface Builder canvas. But iOS devices come in ever more screen sizes, and applications are expected to support all screen sizes and orientations - and perhaps more than one device type. You need to guarantee that the layout of view objects will be correct regardless of the screen size or orientation of the device running the application. The tool for this task is Auto Layout.

Auto Layout works by specifying position and size constraints for each view object in a scene. These constraints can be relative to neighboring views or container views. A container view is just a view object that contains another view. For example, take a look at the document outline for Main.storyboard. You can see in the document outline that the labels and buttons you added are indented with respect to a view object. This view object is the container of the labels and buttons, and the objects can be positioned and sized relative to this view.

To begin specifying Auto Layout constraints, select the top label by click on it either on the canvas or in the document outline. At the bottom of the canvas, notice the Auto Layout menus. 

With the top label still selected, click on the second icon to reveal the Align menu shown.

Within the Align menu, check the Horizontally in Container checkbox to center the label in the container. Then click the Add 1 Constraint button. This constraint guarantees that on any size screen, in any orientation, the label will be centered horizontally.

Now you need to add more constraints to center the lower label and the buttons with respect to the top label and to lock the spacing between them. Select the four views by Command-clicking on them one after another and then click on the third icon to open the Pin menu.

Click on the red vertical dashed segment near the top of the menu. When you click on the segment, it will become solid red, indicating that the distance of each view is pinned to its nearest top neighbor. Also, check the Align box and then select Horizontal Centers from the pop-up menu. For Update Frames, make sure that you have items of new Constraints selected. Finally, click on the Add 7 Constraints button at the bottom of the menu.

If you made any mistakes while adding constraints, you may see red or orange constraints and frames on the canvas instead of the correct blue lines. If that is the case, you will want to clear the existing constraints, first select the background view. Then click the last icon to open the Resolve Auto Layout issues menu. Select Clear Constraints under the All Views section. This will clear away any constraints that you have added and give you a refresh start on adding the constraints back in.