Help autolayout out, visually
Difficulty: Beginner | Easy | Normal | Challenging
This article has been developed using Xcode 11.4.1, and Swift 5.2.2
Updated for Xcode 12.2 and Swift 5.3.1
- You will be expected to be aware how to make a Single View Application in Swift.
The example with a UILabel
This project is going to show how to create a
UILabel with a fixed width and height, placed nicely onto the Storyboard.
Move to the storyboard
Adding the UILabel
You can access the Storyboard by selecting it in the project navigator
From here we add a
UILabel to the storyboard by selecting add object which is a plus at the top of the Xcode window
which is then drag and dropped onto the storyboard — if you get it just in the centre blue guidelines appear making it clear that the object is in the center of the view. An animated GIF to make this clear? OK
Adding the constraints
Finally! The heart of this article. The technique to add constraints if to control-drag from object to object.
Doing so leads to the following constraints:
With an animated GIF to show how this is done:
Note that in this video I used both the label as displayed on the
UIViewController and the one on the left-hand side of the screen on the View Controller Scene
have you seen the little yellow dot that is on the left hand side. That’s an Interface Builder warning.
In this case? It’s just that the label might cause clipping and Xcode recommends that we make the
width >= 42 rather than
42 itself. If you want to do that to get rid of the warning, why don’t you do that? You certainly can (just click the yellow dot and you’ll be able to)
Adding constraints in the storyboard is a common thing you’ll need to do as an iOS developer. I hope this article has given you a little bit of a hand, and resolved any issues that you’ve got. If you want to see the completed project, download from the REPO.
If you’ve any questions, comments or suggestions please hit me up on Twitter