AutoLayout in Swift:
AutoLayout constraints allow us to create views that dynamically adjust to the size and position of all the views in your view hierarchy. It was introduced in iOS6.
Pros and cons for writing Auto Layout constraints in code
Pros
- Easier to merge in GIT
- The code is easier to debug
- Constraints might be easier to overview
Cons
- There are no visual representations. The IB allows you to see your view in different size classes.
- You might end up with a lot of layout code in your view controllers.
Writing AutoLayout constraints by using Layout Anchors
We need to set the translatesAutoresizingMaskIntoConstraints to false. This is to prevent the view’s auto-resizing mask to be translated into AutoLayout constraints and affecting your constraints.
Secondly, you need to create an array of constraints. In which you define your constraints:
|
1 2 3 4 5 6 7 |
let constraints = [ view.centerXAnchor.constraint(equalTo: superview.centerXAnchor), view.centerYAnchor.constraint(equalTo: superview.centerYAnchor), view.widthAnchor.constraint(equalToConstant: 100), view.heightAnchor.constraint(equalTo: view.widthAnchor) ] NSLayoutConstraint.activate(constraints) |
The above example shows the basics of writing constraints and should be both readable and understandable. However, creates a square and centers in its super view. Similarly, the last line is needed to actually activate the constraints so they make your layout appear as expected.
Each UIView comes with a collection of anchor properties that allow you to set up relations between views:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
extension UIView { /* Constraint creation conveniences. See NSLayoutAnchor.h for details. */ open var leadingAnchor: NSLayoutXAxisAnchor { get } open var trailingAnchor: NSLayoutXAxisAnchor { get } open var leftAnchor: NSLayoutXAxisAnchor { get } open var rightAnchor: NSLayoutXAxisAnchor { get } open var topAnchor: NSLayoutYAxisAnchor { get } open var bottomAnchor: NSLayoutYAxisAnchor { get } open var widthAnchor: NSLayoutDimension { get } open var heightAnchor: NSLayoutDimension { get } open var centerXAnchor: NSLayoutXAxisAnchor { get } open var centerYAnchor: NSLayoutYAxisAnchor { get } open var firstBaselineAnchor: NSLayoutYAxisAnchor { get } open var lastBaselineAnchor: NSLayoutYAxisAnchor { get } } |
Similarly, each Anchor returns subclasses from NSLayoutAnchor which comes with a few common methods to set relationships. In addition, includes equal to, greater than, and less than or equal to the relationship.
Available layout guides
Each and every UIView comes with few layout guides which can also be used as anchors.
layoutMarginsGuide: Set constraints and keep the layout margins as spacingreadableContentGuide: It is used for the Constraints width to a size that is easy for the user to readsafeAreaLayoutGuide: It is used to represents the part of your view which is clear by bars and other content
|
1 2 3 4 5 6 |
let constraints = [ outerSquare.topAnchor.constraint(equalTo: viewController.view.safeAreaLayoutGuide.topAnchor), outerSquare.leftAnchor.constraint(equalTo: viewController.view.safeAreaLayoutGuide.leftAnchor), viewController.view.safeAreaLayoutGuide.bottomAnchor.constraint(equalTo: outerSquare.bottomAnchor), viewController.view.safeAreaLayoutGuide.rightAnchor.constraint(equalTo: outerSquare.rightAnchor) ] |
Supporting Right-to-Left languages
You can also use leadingAnchor and trailingAnchor for leftAnchor and rightAnchor. In conclusion, it will lead to support for Right-to-Left languages to your views. This is mostly important for views like labels in which you want to make sure that they get flipped for Right-to-Left languages.