This is the second tutorial in the series of iOS AutoLayout tutorial. In the first tutorial we looked into the basic features of AutoLayout and played around with them on a UIButton in the Interface Builder. In this tutorial, we’ll look into some other nuances of AutoLayout. AutoLayout is enabled by default when you create a new project.
iOS AutoLayout Recap
As we had discussed in the previous tutorial, AutoLayout is a layout system that describes how the view is laid out using descriptive constraints. Let’s add 4 buttons on the four corners of the screen along the guidelines.
Observe the two preview images in the right hand side of the image. They correspond to 3.5 and 5.5 inch screen respectively. As you can see the preview doesn’t show the bottom left and right images in the 3.5 inch screen (try switching to the landscape view too as shown). In the case of 5.5 inch screen the buttons are nowhere close to the margins as we had kept them in the interface builder. Let’s fix them to the margins.
As you can see we’re pinning the buttons to the respective margins ( bottom-left/right for the bottom buttons). You can do the corresponding for the buttons at the top too.
The buttons are surrounded with the orange boxes. To fix those misplaced views, change the constraint values as suggested in the image below.
Note: An easier way to do the same is to click on the warning icon and chose “Fix Misplacement”.
The horizontal constraints, essentially the constraints for the left and right of the views are named as leading and trailing constraints. The image below shows the constraints for the view controller and the leading space to container margin.
Another quick example before we move onto evenly spacing views is adding a View Object and covering the full screen. Let’s give it some background color from the attributes inspector. Now the current screen preview would be similar to the image given below.
Again! We need to set the constraints to specify the edges of the View object. The following image demonstrates the procedure.
Now let’s get onto spacing views evenly.
Evenly Spaced Views
To evenly space views across screens of different sizes, there are two approaches:
- Using Spacer Views
- Using Multipliers
Let’s implement using the first approach. The second approach will be covered in the next tutorial.
Using Spacer Views
We’ve termed spacer views as the UIViews that are between the content views.
We’ll have four spacer views that would be present along the edges and between the content views. The image below shows an initial glimpse of the interface builder with the views.
We’ve named every View in the left pane of the screen. The black views are the spacer views.
As you can see in the preview, the views aren’t being exactly displayed in a screen of different dimensions. In the following steps we’ll show the procedure to set the constraints such that the content views are evenly spaced.
Setting the Constraints
-
- For the First Spacer View, add the constraints to the top, left and bottom margins as 20, 0 and 20 respectively from the pin button at the bottom of the screen. To not leave any missing constraints, we’ll fix the width of the view too(though we’ll later get rid of these explicit widths). The image below describes this step.
Select Update Frame from the resolve AutoLayout issues button at the bottom. This updates the current spacer view according to the constraints specified - Repeat the above step for the Fourth Spacer View by adding the top, right and bottom constraints as 20,0 and 20 respectively. Set the width constraints too. The current Interface Builder should look similar to the image below.
- Have a look at the constraints defined in the left pane. Do they match yours?
- Now select the Left Content View.
Note: Make sure that this view doesn’t overlap with the First Spacer View. Else the left margin constraint of this view would be set to the Superview instead of the spacer view.Set the top, left and bottom constraints of the view as 20, 0 and 20. Set the width constraint too and update the frame. Do the analogous for the Right Content View. The View Controller Scene should like this. 
- Select the Second Spacer View and set the top, bottom and left constraints to 20, 20 and 0
respectively. Set the width and update the frames. Do the same for the Third Spacer View - Now choose the Middle Content View and set the constraints for the top, bottom, left and right as 20, 20 0 and 0. The image below shows how all the views are displayed.
- Now to make the content views evenly space we need to delete the width constraints of the spacer views and set them to equal widths. Then delete the explicit widths from the left and right content views and set customisable width constraints to the three content views as you like.The image below demonstrates the above step and shows the final output.
- For the First Spacer View, add the constraints to the top, left and bottom margins as 20, 0 and 20 respectively from the pin button at the bottom of the screen. To not leave any missing constraints, we’ll fix the width of the view too(though we’ll later get rid of these explicit widths). The image below describes this step.
Note: Don’t forget to Update All the Frames. Select all the spacer views and change their background to white.
This brings and end to iOS AutoLayout even spacing using Spacer view tutorial. Isn’t the above procedure a long and tedious one? We’ll implement a more efficient workaround in our next tutorial.