How to activate & deactivate constraints in Swift

A step by step guide on updating and changing the constraints for a view in Swift depending on screen orientation or dimensions. Github repository included.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 02/10/2023 at 11:11
Last Updated on 02/11/2023 at 21:38
Two flowers that represents Swift and XCode, side by side. Beneath them sits the text "Activate and Deactivate Constraints."

A step by step guide on changing the constraints for a view in Swift depending on screen orientation or dimensions. Github repository included.

The following guide uses our Open Source Swift project to offer a step by step walkthrough on changing the position of a label on a screen depending on the orientation of the device.

If you are looking for a quick solution, critical functionality can be found in Step One and Step Five.

Subscribe

This guide uses TinyConstraints and executes the solution by activating and deactivating the relevant constraints; which first deactivates all the constraints before activating the relevant constraints for each orientation.

Discover Tiny Constraints

We recommend that you clone our Open Source Swift Starter Project, checking out the main branch and carrying out the steps below. The changes can be found on the tutorial/modify-constraints branch.

git clone git@github.com:delasign/swift-starter-project.git
View RepositoryHow to create a SwiftLint enabled Swift XCode projectSearch our blog for other Swift tutorials

Step One: Setup the utilities

A screenshot of XCode showing the three utilities listed below.

If you don't have one already, create a Utils folder at the root of your project. Then add the following utilities.

Please note that these utilities come with our Open Source starter project and if you downloaded it and are starting from there, you can skip this step.

A | Get device orientation

A screenshot of Xcode showing the getDeviceOrientation function detailed below.

Add the getDeviceOrientation utility using the tutorial below.

How to get the device orientation of an iPhone or iPad in Swift

B | Deactivate Constraints

A screenshot of Xcode with a highlight on the Deactivate Constraints utility location, as well as its code.

Create a DeactivateConstraints.swift file in the Constraints folder under Utilities and copy in the code below.

C | Activate Constraints

A screenshot of Xcode with a highlight on the Activate Constraints utility location, as well as its code.

Create a ActivateConstraints.swift file in the Constraints folder under Utilities and copy in the code below.

Step Two: Create the label variable

A screenshot of XCode in the CustomUIView.swift file with a highlight on where we declared the UILabel.

In CustomUIView.swift, create a new label variable.

let variablePositionLabel: UILabel = Styleguide.createAttributedStyle()
How to create an attributed label in Swift

Step Three: Create the constraints

A screenshot of XCode on the CustomUIView.swift file with a highlight on where we declared the NSLayoutConstraints.

Under your newly created label, create all the constraints that you will need across the experience.

Please note that these constraints must be declared as optionals.

Step Four: Setup label & constraints

A screenshot of XCode on the CustomUIView+UI.swift file with a highlight of where we called setupVariablePositionLabel in setupUI as well as the setupVariablePositionLabel function declaration and code.

In CustomUIView+UI.swift, add the label to the UI and create all the constraints.

Make sure that you call setupVariablePositionLabel() in setupUI function.

Please note that you must set all the constraints to isActive: false to avoid errors.

Step Five: Create update constraint functionality

A screenshot of XCode on the CustomUIView+Update.swift function with a highlight on the updateLayoutConstraints functionality and the changes that we made to that function.

In CustomUIView+Update.swift, update the updateLayoutConstraints() to the function below.

Please note that we have added code to make the label sizeToFit() in the onContentUpdate, and that you need to add your constraints in the positions of the placeholders in the file below.

Step Six: Update constraints on orientation change or screen size changes

A screenshot of XCode showing the functionality that must be added to begin listening to device orientation changes, as well as to process updates in device orientation.

Add the required functionality to listen for orientation changes via notifications using the tutorial below.

Make sure that you call updateLayoutConstraints() when receiving updates in device orientation.

How to observe device orientation changes in Swift

Alternatively, if you are seeking to use this for Mac or a Multitasking iPad app, please implement the viewWillTransition function using the tutorial below and notify your views via a notification, or by calling a similar function in the view.

Make sure that you call updateLayoutConstraints() when receiving updates in the viewWillTransition function.

How to observe changes in screen size in Swift

Step Seven: Verify

Screenshots of an iPad showing how the variablePositionLabel changes position depending on orientation.

Run the app on XCode and witness how the label starts correctly and seamlessly updates position as you change orientation.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe