Today we will look into iOS AutoLayout in Xcode. We’ll implement and use AutoLayout and Constraint in our storyboards. These components are vital in keeping the storyboards designs consistent across screens of all sizes, by laying out views and defining their positions relative to other views instead of hardcoding.
iOS AutoLayout
iOS AutoLayout is a system that makes it easy to support multiple screen sizes with just one interface by making the same interface react to changes.
AutoLayout does this by setting a set of layout constraints which describe the interface universally for all screens and sizes.
Before we get into AutoLayout implementation, let’s see how the storyboards we’ve being creating till now look on different screens.
Create a new iOS Single View Application named AutoLayouts and open the Main.storyboard and add a UIButton on the ViewController.
As you can see in the above image, when we take the button on the screen, XCode helps us in positioning the button along the blue guidelines.
We’ll stick with that guideline advice. Now to see the preview screen, instead of building and running the application on the simulator, we’ll open the assistant editor from the top right second button on the toolbar, click on automatic and choose preview from the dropdown. We’ve added three different screen sizes.
OOPS! The storyboard was displaying the button center horizontally. What’s gone wrong here? We need to set up the AutoLayout and constraints. Following image shows a way to do it.
We need to set two important constraints to the button. We drag it to the open space in the view. We first make it Center Horizontally in the container. You’ll see red lines in the view container(there scary!).
Those lines denote missing constraints or ambiguities. Clicking on the red arrow in the left panel shows us the error causing those red lines.
The error here is that the Y coordinate constraint is not defined. So XCode doesn’t know where to position the button vertically.
We’ve fix that error by adding another constraint that specifies where the button is positioned vertically as shown in the above image itself.
The constraints setup can be viewed in the left and right panels of the storyboard. The constraints for each view are described in the View Controller Scene hierarchy as shown below.
Essentially, the constraints on a particular view are described using three colored lines:
- Blue line : This means all the constraints of the particular view are set correctly
- Red line : This means that some constraints are missing. There is ambiguity
- Orange line : This means that the constraints are set but the view position in the interface builder does not correspond to the constraints set. In short, the view is misplaced
Before we look into misplaced views we’ll see the constraints present in the right panel as shown below.
We’ve updated the constraint for vertical spacing of the button by changing the constant value as shown in the above image. We’ll look into details of the other attributes in the next tutorial.
Now let’s look into the misplaced views and how we handle them in AutoLayouts.
Observe closely the above image. We’ve dragged the button whose constraints had already been set.
The Interface Builder drew two orange boxes: one with a dashed border and one with a solid border. The dashed box displays the views frame according to Auto Layout.
The solid orange box is the views frame according to how we placed it in the scene.
These two should match up, but here they don’t. To match them one way is to Update Frames. Update Frames takes the view back to the position according to the AutoLayout constraints (the orange dotted box). If we wish to keep with the new view positions, just Update Constraints.
Note: Misplaced views are displayed in the preview in the correct positions (the dotted box one) according to the AutoLayout as shown in the image above.
This brings and end to iOS AutoLayout tutorial. AutoLayout may appear to be scary at times (owing to the red/orange lines). But as we get more versed with it, it’ll be easier to play around with. Compared to defining a view programmatically, AutoLayout save a lot of coding.