How to activate & deactivate constraints in Swift

Oscar de la Hera Gomez
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.

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.

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

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.

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()

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.

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.

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.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details