Storyboard Constraints
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
Prerequisites:
- 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.
CenterX from UILabel to UIStoryboard
CenterY from UILabel to UIStoryboard
Height from UILabel to UILabel
Width from UIlabel to UILabel
Doing so leads to the following constraints:
With an animated GIF to show how this is done:
