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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 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.
|
1 2 |
// Use one textField let emailtextField = UITextField() |
|
1 2 3 4 5 6 7 8 9 |
// 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.
|
1 2 |
// Take on view let view1 = UIView() |
Now, create the constrains using Visual Format below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 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.