In this episode, we get our feet wet by creating a very basic user interface using Auto Layout. I'm going to use Xcode 9 in this episode, but Xcode 8 should work just as well.
Setting Up the Project
Create a new project by choosing the Single View App template. Click Next and give the project a name. Make sure Devices is set to Universal if you're using Xcode 8. Click Next, tell Xcode where you'd like to save the project, and click Create.
Exploring the Storyboard
We won't be writing any code in this episode. We will be working in the project's main storyboard. Open Main.storyboard in the Project Navigator and take a look at its contents. It currently contains one view controller scene.
Adding Some Content
Let's add some contents to the view controller, for example, a label and a button. Set the text of the label to Auto Layout Fundamentals and set the button's title to Start. Center the label and do the same for the button. Note that the blue lines are not constraints. The blue lines are guidelines that Xcode provides us with to stick with Apple's Human Interface Guidelines.
Even though the user interface looks fine in interface builder, if we run the application in the simulator, for example, in the iPhone SE simulator, you'll notice that the user interface doesn't look quite right. We can easily solve this by adding a few constraints to the label and the button.
Adding Constraints
Select the label in the Document Outline or in the view controller scene. Let's start by pinning the label to the top of the view controller's view. Open the Pin menu at the bottom right and click the red bar at the top. To add the constraint, click the Add 1 Constraint button at the bottom.
By clicking the button a few things happen. You can see a blue bar at the top of the label, indicating that we added a constraint. At the same time, a red arrow appears in the Document Outline, indicating that the current layout is unsatisfiable. This means that we don't have enough constraints to create a satisfiable layout.
We can easily fix this by centering the label in the view controller's view, the superview of the label. Open the Align menu at the bottom and click the second from last checkbox, Horizontally in Container. This will center the label horizontally in its superview. Click the Add 1 Constraint button to add the constraint. The blue vertical line that appears indicates that the label is now centered in its superview.
Let's run the application again in the simulator to see the result. As you can see, the label is now correctly positioned in the iPhone SE simulator. Even if we rotate the device, the user interface updates automatically. The button, however, still needs some work. Let's do that now.
Select the button and open the Pin menu at the bottom. Instead of pinning it to the top of the superview, we pin it to the bottom of the label. Click the red bar at the top and click the Add 1 Constraint button at the bottom. The blue line indicates that we added the constraint, pinning the button to the bottom of the label. The red lines indicate that the current layout is unsatisfiable. We still need to add one more constraint to create a satisfiable layout.
With the button still selected, click the Align menu at the bottom, check the checkbox Horizontally in Container, and click Add 1 Constraint. The vertical blue line indicates that the button is now centered horizontally in its superview. Run the application one more time in the simulator to see the results. Even if you rotate the device, the user interface looks fine.
Even if we select a different simulator, for example, the iPhone X simulator, the user interface should still look fine. Let's try that out. As you can see, the user interface looks fine even on an iPhone X with a larger screen. Rotating the device doesn't impact the user interface.
What's Next
We've created a very basic layout. In the next episode, we take a closer look at constraints. What are they? And how we can work with them in Auto Layout?
