Write Programmatic Constraints for Swift Projects

Great layouts!

Image for post
Image for post

Photo by John Towner @heytowner

Difficulty: Beginner | Easy | Normal | Challenging
This article has been developed using Xcode 12.1, and Swift 5.3

Prerequisites:

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:

Image for post
Image for post

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)

Image for post
Image for post

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.

Image for post
Image for post

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!

Image for post
Image for post

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store