Write Programmatic Constraints for Swift Projects
Great layouts!
Photo by John Towner @heytowner
Difficulty: Beginner | Easy | Normal | Challenging
This article has been developed using Xcode 12.1, and Swift 5.3
Prerequisites:
- You will be expected to be aware how to make a Single View Application in Swift
- This article assumes that you are coding 100% programatically, and are using loadView for which I use this technique
- This article uses a UINavigationController
- A guard is mentioned in this article
- Closures are mentioned in passing
Terminology
Constraints: A constraint on the layout of a view
Storyboard: A way to graphically layout the UI in Xcode
Removing the Storyboard
Although this isn’t really part of this tutorial (there is a full guide on this here but essentially you can select Main.storyboard in the project inspector:
then pressing the delete key (on your keyboard!)
Then the reference must be removed, the easiest way is to select the top level project file in the project inspector (mine is called ProgrammaticConstraints)
and then delete the Main Interface (which is usually set to Main) which can be deleted once again with the use of the delete key on the keyboard.
The third stage of this is deleting the reference in the .plist file.
To do so select Info.plist from the project inspector, and delete the storyboard name from the plist file. A gentle press of the delete key (when the name is selected) will do it!
Now of course running a project with ⌘R will be slightly disappointing, as there isn’t a preprepared view to be displayed within the view controller.
In this particular project, I’ve created a simple menu that then traverses using a UINavigationController, which means that we will pop view controllers onto the view hierarchy using that particular control. For more details take a look at the UINavigationController article.
I won’t cover the creation of this menu in this particular article, but it does give access to another implementation of some lazy controls which is avaliable in the repo for you to download!
The ordinary view controller
We are going to add a simple UILabel into the middle of the host view controller. But how to add the property and perform the configuration of the same? In this article, we are going to perform the configuration in loadView() which means that the compiler doesn't see the UILabel instance as complete until the loadView as finished - so the UILabel property is naturally an optional.
There are a couple of ways of dealing with this — one is to make the label an optional. To solve the problem of potentially force-unwrapping in this example I’ve used a guard.
which really is OK. An alternative is to use an implicitly-inwrapped optional (that is, set up the UILabel instance as a property with var label: UILabel!. Some dislike this approach, but it is functionally identical to the code shown above.
Arguably we have the same issue in both these implementations — the configuration of the UILabel is right in the loadView - so can we abstract that away somehow?
The lazy view controller
We can make the UILabel instance a lazy property. This means that we can use a closure to config the instance only when it is first used. So the configuration only happens on the first load of the property.
The (similar code to those above) is shown here:
Conclusion
This isn’t a complete guide to layout for iOS. However, I hope this particular article has given you a good start and an idea of how I implement constraints in my projects where I’ve decided the UIStoryboard is not quite the right way to go for whatever reason.
Good luck, as ever!
If you’ve any questions, comments or suggestions please hit me up on Twitter
