Different types of ways of setting Auto Layout Constrains in Swift

Different types of Ways of setting Auto Layout Constrains in Swift

In this Blog I am going to describe about the different types of ways of using the Auto Layout in your iOS Application. There are mainly two different types of ways before the SwiftUI Framework announce by the Apple in May 2020. Either by using the Interface builder or by using the Code in the View Controller. Developer use to set constrains through programatically as it provides freedom to developers to change them dynamically.

Auto Layout is a powerful tool for creating flexible, maintainable rules for your user interface

In this post I am going to describe the Auto Layout using programatically .
There are three types of ways of setting the Auto Layout in Code which are as follows

1. NSLayout Anchor

It provides a easier way of creating the constrains . In order to use the NSLayout Anchor , we have to use the anchor property provide of the view. For example , let’s take oneUIView , after that set the Constrains. We can active or deactivate the constrains as per our requirement.

// Take one View
 let child1 = UIView()
// Now remove the translatesAutoresizingMaskIntoConstraints to false
 child1.translatesAutoresizingMaskIntoConstraints = false
 child1.backgroundColor = .blue
// Now Add the childView to the main View
 view.addSubview(child1)


 child1.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
 child1.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
 child1.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width).isActive = true
 child1.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor).isActive = true

// Take one View

let child1 = UIView()

// Now remove the translatesAutoresizingMaskIntoConstraints to false

child1.translatesAutoresizingMaskIntoConstraints = false

child1.backgroundColor = .blue

// Now Add the childView to the main View

view.addSubview(child1)

child1.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

child1.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true

child1.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width).isActive = true

child1.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor).isActive = true

2. NSLayoutConstrains Class

This method of setting constrains is little length to set constrains as compare to other methods but easier to understand as we the equal given by the NSLayout Class to set each and every individual Constrains of an element in your Project.

// Use one textField
 let emailtextField = UITextField()

1 2	// Use one textField let emailtextField = UITextField()

// Mark translatesAutoresizingMaskIntoConstrians
  emailtextField.translatesAutoresizingMaskIntoConstraints = false
        
// Now set the constrains using the related View 
  NSLayoutConstraint.init(item: emailtextField, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1, constant: 100).isActive = true
  NSLayoutConstraint.init(item: emailtextField, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1, constant: -20).isActive = true
  NSLayoutConstraint.init(item: emailtextField, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1, constant: 20).isActive = true
  NSLayoutConstraint.init(item: emailtextField, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 50).isActive = true
  self.view.addSubview(emailtextField)

// Mark translatesAutoresizingMaskIntoConstrians

emailtextField.translatesAutoresizingMaskIntoConstraints = false

// Now set the constrains using the related View

NSLayoutConstraint.init(item: emailtextField, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1, constant: 100).isActive = true

NSLayoutConstraint.init(item: emailtextField, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1, constant: -20).isActive = true

NSLayoutConstraint.init(item: emailtextField, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1, constant: 20).isActive = true

NSLayoutConstraint.init(item: emailtextField, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 50).isActive = true

self.view.addSubview(emailtextField)

3. Using Visual format Language

For using the Visual Format Language we first need to learning the grammar which you can learn from here.

Visual Format Language makes it possible to write all the constrains for an element in just single line of code. But it is not possible to set the constrains alignment as per CenterX and CenterY .

Firstly define as shown below.

// Take on view 
 let view1 = UIView()

1 2	// Take on view let view1 = UIView()

Now, create the constrains using Visual Format below.

// Take the dictionary
 let views: [String: Any] = [
            "view1": view1
        ]
        
        
// Now Change the AutoResizingMaskIntoConstraints to false
 view1.translatesAutoresizingMaskIntoConstraints = false
 view1.backgroundColor = .red
// Add your view to the mainView
 self.view.addSubview(view1)
 view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-20-[view1(30)]|", options: [], metrics: nil, views: views))
 view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-20-[view1(40)]", options: [], metrics: nil, views: views))

// Take the dictionary

let views: [String: Any] = [

"view1": view1

]

// Now Change the AutoResizingMaskIntoConstraints to false

view1.translatesAutoresizingMaskIntoConstraints = false

view1.backgroundColor = .red

// Add your view to the mainView

self.view.addSubview(view1)

view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-20-[view1(30)]|", options: [], metrics: nil, views: views))

view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-20-[view1(40)]", options: [], metrics: nil, views: views))

Conclusion

Creating constrains through programatically help in changing them dynamically. Different ways gives us different advantage and disadvantages. so choose the method as per your use and requirement.

Thanks for reading my Blog. Please refer to my other Blog from here. For more reference Please checkout the Apple Official Docs from here.

Vipin Kumar 8 March 2021

. . .

Different types of ways of setting Auto Layout Constrains in Swift