100 Days of Swift | Swift tutorial for beginners |

Previewing your Layout

If you click on “View as: iPhone 8”, you’ll see a list of devices you can design on. As you can notice, the layout doesn’t adapt well to the iPhone 8 Plus or the iPad. We need to apply Auto Layout to make the content adaptive to any device.

Position and Size

Auto Layout requires 2 things: position and size. As long as you set those constraints, Auto Layout will be happy. There are 2 ways to respect those requirements: Align and Pin.

Align allows you to center things and align elements with each other. Pin lets you set the size and the spacing from the edges of a container.

First Rule of Auto Layout

The first rule of Auto Layout is that all new constraints must be against an element that already has known position and size. For example, the Superview, which is the root screen size, already has a position (x 0, y 0) and size (375 x 667 for iPhone 8) known to Xcode. So, when you Pin or Align against the Superview, Auto Layout will work perfectly.

On the other hand, if you Pin or Align the Hero View against the Book View, Auto Layout will give you warnings, since the Book View doesn’t have any constraint set up.

Add New Constraints

Before applying any constraint to inner elements, we need to make sure that containers are properly set up against the Superview. Without knowing the position and size of the container, any constraint set to the title, phone or play button will be ambiguous.

For the Hero View, let’s click Add New Constraints and set to 0 for the top, right and left constraints. Also, set the height to 452. With this, Auto Layout has enough information about its position (x, y) and size (width, height).

From those constraints, it knows that the Hero View has the same position (x 0, y 0) as the Superview. Then, thanks to the left and right constraints, it knows that the width is 375 on the iPhone 8, and is adaptive to the screen width. Finally, we manually set the height to 452.

Book View Container

For the Book View, we’ll set the values to 0 for the top, right and left constraints. The height will be manually set to 348. With this, our 2 containers have constraints. This means that we can start setting up constraints for the objects inside them.

Home Image Constraints

Let’s do the Home image constraints before the titles, since it’s much simpler. The Home image needs to take the full width and height of the Hero View. So we’ll Add New Constraints to 0 for top, right, bottom and left. This effectively satisfy both position and size.

Centering with Offset

For the title, we want to center it both horizontally and vertically, but with an offset. Otherwise, it will overlap with the device image.

First, click on Add New Constraints and set the width to 160 and height to 172. Then, click on ** Add Constraints** . Click on Align and check both Horizontally in Container and Vertically in Container. This will automatically center the bounding box.

As expected, it overlaps with the device image. That’s not what we want. To add some offset, we can go to the Size Inspector and change to the initial values: x 30, y 86. Like this, there is enough negative spacing between the title and the device image.

Resolve Auto Layout Issues

Now, since the constraints are different from the values entered manually, Auto Layout will show a conflict. Auto Layout will make an assumption based on your constraints, as shown by the yellow dotted lines. You can solve the conflict by clicking on Resolve Auto Layout Issues which is next to Add New Constraints. Let me explain a little bit on the 4 options presented.

• Update Constraints: you think the yellow dotted lines are incorrect. Clicking this will adjust the constraints based on the values changed.
• Add Missing Constraint will add whatever is missing in term of position or size.
• Reset to Suggested Constraints will reset the constraints and let Auto Layout add new ones from scratch.
• Clear Constraints will remove all constraints.

All 4 of these options can specific to a single object or can apply to all objects on the screen.

Finally, you have the Update Frames icon at the far left. Use this if you think that the yellow dotted lines are correct and want the object to move exactly there.

Updating Constraints for Title

In this specific case, we want to update the constraints to follow the values we’ve set manually. Click on Resolve Auto Layout Issues, Update Constraints. This will effectively add the offsets of -77.5 from center X and -54 from center Y.

Device Image Constraint

The device image’s position is entirely dependent on the position of the title. We’d like to center it against the title, so that if the screen is bigger, it’ll center nicely. First, we need to set the width constraint to 123, and height constraint to 319.

Constraints Between Two Objects

Two objects can have a constraint against each other. You can center objects together, align them or give them equal widths or heights. To set a constraint between two objects, Control + Drag from the device image to the title. While holding Shift, select Horizontal Spacing and Center Vertically. This allows you to enable multiple constraints at once.

Let’s change the y position back to 25 and select Update Constraints.

Set Constraints in Document Outline

The play visual effect view simply needs to be centered against the device image. Since it’s hard to select it without selecting the UIButton, we’ll do it in the Document Outline instead. Control Drag from the Visual Effect View to the Art-iPhoneX and select Center Horizontally and Center Vertically while holding Shift. Then, add the width and height constraints to 50.

Set the position back to x 226 and y 148, and click Update Constraints.

Play Button Constraints

For the play button, we simply need to Add New Constraints to 0 for top, right, bottom and left. This will satisfy both position and size.

Stats Visual Effect View

For the statistics container, we’ll set 0 for the right, bottom and left constraints. Also, we’ll set the height to 128.

Stack View

Stack Views allow you to group together similar objects to apply automatic constraints based on the object type and its container properties. Instead of manually setting a bounding box for each object, you configure the Axis, Alignment, Distribution and Spacing to all objects inside the Stack.

Select the 3 labels and line view and click on Embed in Stack. Once embedded, they all share the same Stack properties. Additionally, the Stack dynamically wraps around the objects in a way that respects the Alignment, Distribution and Spacing. It even makes it taller than we’d like.

Let’s add a top and bottom constraint of 20, with a width of 130 to the Stack. Also, you’ll notice that the line view takes the entire height of the box. To fix this, you can set a height constraint of 3 to it.

Stack View Distribution

Our Stack View doesn’t seem to be distributing the content properly. The bigger title takes way more spacing than the line view, for example. We can fix this by playing with the different Distribution properties: Fill, Fill Equally, Fill Proportionally, Equal Spacing, Equal Centering. Let’s set to Equal Centering, since this looks like the closest to what we have to the original design.

Second Stack View

Let’s repeat the same Stack View steps for the second column of labels and line view. Select the 4 objects and click on Embed in Stack View. Then, select the line view and set the width to 130 and height constraint to 3. Finally, set the Stack View Distribution to Equal Centering.

Horizontal Stack View

Stack Views can be stacked as well. Let’s select the 2 Stack Views and stack them together. Since they’re positioned left and right, it’ll automatically set the Axis to Horizontal this time.

Since we want to center our content horizontally, we’ll click on Align, and set to Horizontally in Container. Then, we’ll set the constraints to top 20, bottom 20 and width 300. Next, let’s change the Distribution to Equal Spacing.

Book Image Constraint

We want the book the center horizontally and have a fixed spacing of 50 from the top.

Let’s click Align, Horizontally in Container. Then Add New Constraints with top constraint to 50.

Size Classes

This neat tool allows you to set specific Auto Layout constraints and content based on groups of devices. It looks confusing at first, but it makes total sense once you know how to use it.

There are 3 settings for each orientation: Any, Compact and Regular.

• Any x Any will apply to every device.
• Compact x Regular will apply to all iPhone in portrait.
• Compact x Compact will apply to all iPhones in landscape, except for the iPhone 8 Plus.
• Regular x Regular will target the iPad in both portrait and landscape, except when in Split view.
• Otherwise, Size Classes will tell you which devices are being targeted.

Use this illustration to see which ones are Compact or Regular.

Vary for Traits

You can use the Vary for Traits feature to apply constraints for specific Size Classes. To do that, select any device and click on Vary for Traits. Then, choose width or height.

For example, if you choose iPad and select width, it means that you’re applying constraints specific to Regular x Any, since the iPad has a Regular width trait. When you select the drop-down device, you’ll see all the devices that these constraints will target.

New Stats Column only for Regular Width

Let’s add a new column just for devices that have a Regular width. Select View as iPad (wR hR) and click Vary for Traits. Choose width.

Option Drag a Stack View in the Document Outline and release right below the Stack View. This will create a third column. Now select the wrapping Stack View and go to Size Inspector to double-click the Width equals 300 constraint. Click on the + icon next to 300 and press on Add. Type 450 next to the wR field. Change the text to: DOWNLOAD, 10GB, of source files. Finally, click Done Varying.

This will show the third column on devices that has a Regular width.

Editing Constraints

Now, if we preview our layout, we’ll notice that it reacts beautifully across all devices. The only minor adjustment is the left constraint for the title on the iPhone SE, which is a little too near to the border.

There are 3 ways to edit the constraints.

1. With the layer selected, you can find all the constraints in the Size Inspector.
2. In your View Controller, you can also click the lines directly and edit them in the Size Inspector.
3. Finally, the constraints can also be found in the Document Outline.

Let’s select the title and double-click the Align Center X constraint and set it to -70 instead.

Relation and Priority

I won’t go too much into detail about these advanced Auto Layout techniques, but it’s good to be aware of them. You probably won’t need them as much. When you edit a constraint, you can double-click it in the Size Inspector.

• Relation: you can set a constraint to be Less Than or Equal, Equal or Great Than or Equal. This is useful for dynamic content that can expand. With this, you can give them a minimum or maximum size. It’s sort of the equivalent of min-width and max-width in CSS.
• Multiplier: you can also set a multiplier. This is useful to set an object to be half the size of another for example.
• Priority: when you have potentially conflicting constraints, you can use Priority to give more importance to some.

Conclusion

Our layout is now completely adaptive for the iPhone and iPad in both landscape and portrait modes. Combining Auto Layout, Stack Views and Size Classes will enable you to create layouts that work across current and future device resolutions.