How to add constraints programmatically using Swift

The goal of this article is to explain how you can add constraints programmatically in the Swift language.

To programmatically add constraints in Swift, you can use the NSLayoutConstraint class to define the constraints you want to add.

Concepts That Will Be Used To Add Constraints Are The Following

The translatesAutoresizingMaskIntoConstraints is a property of UIView in the UIKit framework. It is a boolean value that determines whether the view's autoresizingMask properties are translated into Auto Layout constraints. When translatesAutoresizingMaskIntoConstraints is set to NO, the autoresizingMask is ignored and the view is resized accrding to any constraints that have been set up using the Auto Layout system.

A widthAnchor is a property of UIView in the UIKit framework that refers to a layout anchor representing the width of the view.

A heightAnchor is a property of UIView in the UIKit framework that refers to a layout anchor representing the height of the view.

A leadingAnchor is a property of UIView in the UIKit framework that refers to a layout anchor representing the leading edge of the view. The leading edge is the left edge of the view for a left-to-right language, or the right edge of the view for a rightto- left language.

A trailingAnchor is a property of UIView in the UIKit framework that refers to a layout anchor representing the trailing edge of the view. The trailing edge is the right edge of the view for a left-to-right language, or the left edge of the view for a right-toleft language.

The constraint(equalTo:) is a method of the NSLayoutAnchor class in the UIKit framework that creates a constraint between two layout anchors. The constraint specifies that the layout attribute of one view should be equal to the layout attribute of another view.

Here's an example of how you can add a constraint to a view in Swift

In this example, you will learn how to add subviews programmatically step by step. Let's start.

Basic setup

In this step, you will create a basic login screen with the initial setup like the below

<div class="code-mirror  language-swift" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token keyword">import</span> <span class="token class-name">UIKit</span>
<span class="token keyword">class</span> <span class="token class-name">RegisterViewController</span><span class="token punctuation">:</span> <span class="token class-name">UIViewController</span> <span class="token punctuation">{</span>
   <span class="token keyword">override</span> <span class="token keyword">func</span> <span class="token function-definition function">viewDidLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">viewDidLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token function">setupUIComponents</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
   <span class="token punctuation">}</span>
   <span class="token keyword">private</span> <span class="token keyword">func</span> <span class="token function-definition function">setupUIComponents</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      view<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token punctuation">.</span>white
      <span class="token comment">// add all views here</span>
   <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</div>

Explanation

In the above code, we created a RegisterViewController class to design a basic register screen. Also, in this example, we will learn how to add constraints to UI components to draw a screen.

Profile Image Setup

In this section, we will set up a profile image view.

<div class="code-mirror  language-swift" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token comment">// profile image view customization</span>
<span class="token keyword">private</span> <span class="token keyword">let</span> profileImageView<span class="token punctuation">:</span> <span class="token class-name">UIImageView</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token keyword"><font color="#000000">   </font>let</span> imageView <span class="token operator">=</span> <span class="token class-name">UIImageView</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
   imageView<span class="token punctuation">.</span>contentMode <span class="token operator">=</span> <span class="token punctuation">.</span>scaleAspectFill
   imageView<span class="token punctuation">.</span>layer<span class="token punctuation">.</span>cornerRadius <span class="token operator">=</span> <span class="token number">16</span>
   imageView<span class="token punctuation">.</span>layer<span class="token punctuation">.</span>masksToBounds <span class="token operator">=</span> <span class="token boolean">true</span>
   imageView<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token class-name">UIColor</span><span class="token punctuation">(</span>white<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> alpha<span class="token punctuation">:</span> <span class="token number">0.1</span><span class="token punctuation">)</span>
   <span class="token keyword">return</span> imageView
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> <span class="token keyword">func</span> <span class="token function-definition function">setupUIComponents</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   view<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token punctuation">.</span>white

   <span class="token comment">// adding constraints to profileImageView</span>
   view<span class="token punctuation">.</span><span class="token function">addSubview</span><span class="token punctuation">(</span>profileImageView<span class="token punctuation">)</span>
   profileImageView<span class="token punctuation">.</span>translatesAutoresizingMaskIntoConstraints <span class="token operator">=<font color="#000000"> </font></span><span class="token boolean">false</span>
   profileImageView<span class="token punctuation">.</span>widthAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalToConstant<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
   profileImageView<span class="token punctuation">.</span>heightAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalToConstant<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
   profileImageView<span class="token punctuation">.</span>centerXAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalTo<span class="token punctuation">:</span> view<span class="token punctuation">.</span>centerXAnchor<span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
   profileImageView<span class="token punctuation">.</span>topAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalTo<span class="token punctuation">:</span> view<span class="token punctuation">.</span>topAnchor<span class="token punctuation">,</span> constant<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</div>

In the above example, you have initialized and customized the profile image view. After that add the constraint to display it on the screen.

Email TextField Setup

In this section, we will set up an email text field.

<div class="code-mirror  language-swift" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token keyword">private</span> <span class="token keyword">let</span> emailTextField<span class="token punctuation">:</span> <span class="token class-name">UITextField</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
   <span class="token keyword">let</span> textField <span class="token operator">=</span> <span class="token class-name">UITextField</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
   textField<span class="token punctuation">.</span>keyboardType <span class="token operator">=</span> <span class="token punctuation">.</span>emailAddress
   textField<span class="token punctuation">.</span>layer<span class="token punctuation">.</span>cornerRadius <span class="token operator">=</span> <span class="token number">8</span>
   textField<span class="token punctuation">.</span>layer<span class="token punctuation">.</span>masksToBounds <span class="token operator">=</span> <span class="token boolean">true</span>
   textField<span class="token punctuation">.</span>layer<span class="token punctuation">.</span>borderWidth <span class="token operator">=</span> <span class="token number">1.0</span>
   textField<span class="token punctuation">.</span>layer<span class="token punctuation">.</span>borderColor <span class="token operator">=</span> <span class="token class-name">UIColor</span><span class="token punctuation">(</span>white<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> alpha<span class="token punctuation">:</span><span class="token number">0.3</span><span class="token punctuation">)</span><span class="token punctuation">.</span>cgColor
   textField<span class="token punctuation">.</span>placeholder <span class="token operator">=</span> <span class="token string-literal"><span class="token string">"Email Address"</span></span>
   textField<span class="token punctuation">.</span>textAlignment <span class="token operator">=</span> <span class="token punctuation">.</span>center
   <span class="token keyword">return</span> textField
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> <span class="token keyword">func</span> <span class="token function-definition function">setupUIComponents</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   view<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token punctuation">.</span>white

   <span class="token comment">// adding constraints to email text field</span>
   view<span class="token punctuation">.</span><span class="token function">addSubview</span><span class="token punctuation">(</span>emailTextField<span class="token punctuation">)</span>
   emailTextField<span class="token punctuation">.</span>translatesAutoresizingMaskIntoConstraints <span class="token operator">=</span> <span class="token boolean">false</span>
   emailTextField<span class="token punctuation">.</span>leadingAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalTo<span class="token punctuation">:</span>view<span class="token punctuation">.</span>leadingAnchor<span class="token punctuation">,</span> constant<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
   emailTextField<span class="token punctuation">.</span>trailingAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalTo<span class="token punctuation">:</span>view<span class="token punctuation">.</span>trailingAnchor<span class="token punctuation">,</span> constant<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
   emailTextField<span class="token punctuation">.</span>heightAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalToConstant<span class="token punctuation">:</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
   emailTextField<span class="token punctuation">.</span>topAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalTo<span class="token punctuation">:</span>profileImageView<span class="token punctuation">.</span>bottomAnchor<span class="token punctuation">,</span> constant<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</div>

In the above example, you have initialized and customized a text field to enter the email address. After that add the constraint to display it on the screen.

Password TextField Setup

In this section, we will set up a password text field.

<div class="code-mirror  language-swift" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token keyword">private</span> <span class="token keyword">let</span> passwordTextField<span class="token punctuation">:</span> <span class="token class-name">UITextField</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
   <span class="token keyword">let</span> textField <span class="token operator">=</span> <span class="token class-name">UITextField</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
   textField<span class="token punctuation">.</span>layer<span class="token punctuation">.</span>cornerRadius <span class="token operator">=</span> <span class="token number">8</span>
   textField<span class="token punctuation">.</span>layer<span class="token punctuation">.</span>masksToBounds <span class="token operator">=</span> <span class="token boolean">true</span>
   textField<span class="token punctuation">.</span>isSecureTextEntry <span class="token operator">=</span> <span class="token boolean">true</span>
   textField<span class="token punctuation">.</span>layer<span class="token punctuation">.</span>borderWidth <span class="token operator">=</span> <span class="token number">1.0</span>
   textField<span class="token punctuation">.</span>layer<span class="token punctuation">.</span>borderColor <span class="token operator">=</span> <span class="token class-name">UIColor</span><span class="token punctuation">(</span>white<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> alpha<span class="token punctuation">:</span>
   <span class="token number">0.3</span><span class="token punctuation">)</span><span class="token punctuation">.</span>cgColor
   textField<span class="token punctuation">.</span>placeholder <span class="token operator">=</span> <span class="token string-literal"><span class="token string">"Password"</span></span>
   textField<span class="token punctuation">.</span>textAlignment <span class="token operator">=</span> <span class="token punctuation">.</span>center
   <span class="token keyword">return</span> textField
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> <span class="token keyword">func</span> <span class="token function-definition function">setupUIComponents</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   view<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token punctuation">.</span>white
   
   <span class="token comment">// adding constraints to passwordTextField</span>
   view<span class="token punctuation">.</span><span class="token function">addSubview</span><span class="token punctuation">(</span>passwordTextField<span class="token punctuation">)</span>
   passwordTextField<span class="token punctuation">.</span>translatesAutoresizingMaskIntoConstraints <span class="token operator">=</span>   <span class="token boolean">false</span>
   passwordTextField<span class="token punctuation">.</span>leadingAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalTo<span class="token punctuation">:</span> view<span class="token punctuation">.</span>leadingAnchor<span class="token punctuation">,</span> constant<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
   passwordTextField<span class="token punctuation">.</span>trailingAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalTo<span class="token punctuation">:</span>view<span class="token punctuation">.</span>trailingAnchor<span class="token punctuation">,</span> constant<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
   passwordTextField<span class="token punctuation">.</span>heightAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalToConstant<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
   passwordTextField<span class="token punctuation">.</span>topAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalTo<span class="token punctuation">:</span> emailTextField<span class="token punctuation">.</span>bottomAnchor<span class="token punctuation">,</span> constant<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</div>

In the above example, you have initialized and customized a text field to enter the password. After that add the constraint to display it on the screen.

Register Button Setup

In this section, we will set up a register button.

<div class="code-mirror  language-swift" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token keyword">private</span> <span class="token keyword">let</span> registerButton<span class="token punctuation">:</span> <span class="token class-name">UIButton</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
   <span class="token keyword">let</span> button <span class="token operator">=</span> <span class="token class-name">UIButton</span><span class="token punctuation">(</span>type<span class="token punctuation">:</span> <span class="token punctuation">.</span>system<span class="token punctuation">)</span>
   button<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token punctuation">.</span>darkGray
   button<span class="token punctuation">.</span><span class="token function">setTitle</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Register"</span></span><span class="token punctuation">,</span> <span class="token keyword">for</span><span class="token punctuation">:</span> <span class="token punctuation">.</span>normal<span class="token punctuation">)</span>
   button<span class="token punctuation">.</span><span class="token function">setTitleColor</span><span class="token punctuation">(</span><span class="token punctuation">.</span>white<span class="token punctuation">,</span> <span class="token keyword">for</span><span class="token punctuation">:</span> <span class="token punctuation">.</span>normal<span class="token punctuation">)</span>
   button<span class="token punctuation">.</span>layer<span class="token punctuation">.</span>cornerRadius <span class="token operator">=</span> <span class="token number">8</span>
   button<span class="token punctuation">.</span>layer<span class="token punctuation">.</span>masksToBounds <span class="token operator">=</span> <span class="token boolean">true</span>
   <span class="token keyword">return</span> button
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> <span class="token keyword">func</span> <span class="token function-definition function">setupUIComponents</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   view<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token punctuation">.</span>white
   
   <span class="token comment">// adding constraints to register button</span>
   view<span class="token punctuation">.</span><span class="token function">addSubview</span><span class="token punctuation">(</span>registerButton<span class="token punctuation">)</span>
   registerButton<span class="token punctuation">.</span>translatesAutoresizingMaskIntoConstraints <span class="token operator">=</span> <span class="token boolean">false</span>
   registerButton<span class="token punctuation">.</span>leadingAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalTo<span class="token punctuation">:</span> view<span class="token punctuation">.</span>leadingAnchor<span class="token punctuation">,</span> constant<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
   registerButton<span class="token punctuation">.</span>trailingAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalTo<span class="token punctuation">:</span> view<span class="token punctuation">.</span>trailingAnchor<span class="token punctuation">,</span> constant<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
   registerButton<span class="token punctuation">.</span>heightAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalToConstant<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
   registerButton<span class="token punctuation">.</span>topAnchor<span class="token punctuation">.</span><span class="token function">constraint</span><span class="token punctuation">(</span>equalTo<span class="token punctuation">:</span> passwordTextField<span class="token punctuation">.</span>bottomAnchor<span class="token punctuation">,</span> constant<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isActive <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</div>

In the above example, you customized a button for the register feature.

Final Output

Some Points to Note Here

• A view should be added to the superview before adding constraints.

• The translatesAutoresizingMaskIntoConstraints should be false in case of adding constraints programmatically.

• Add dependent constraints carefully otherwise the view might not be visible properly on the screen.

Conclusion

Programmatically adding constraints is really fun and easy, but be careful while adding constraints. Dependency constraints should be applied carefully. You can apply different types of constraints like width, height, leading, trailing, top, and bottom.