5 approaches to AutoLayout in Swift

Thursday, 17/12/2020

Tram Ho

This is a translation from medium.com . Please see the original post here: https://medium.com/better-programming/5-auto-layout-approaches-at-swift-b229cf396ee2

To create the user interface to adapt to changes in the screen size and device orientation, we use Auto Layout , a layout system that relies on constraints. This article provides an overview of five different approaches to adding code constraints.

Why use `Auto Layout`

Without Auto Layout the position of the subview per view will be fixed. If we place a subview with a red background color in the center of iPhone 11, then this red center view will be fixed at (207, 448) since iPhone 11 has a horizontal dimension of 414 points ( 828 pixels) and the vertical dimension is 896 points (ie 1792 pixels).

When we run apps on iPhone SE, 8, 12, and iPad Pro, we see the red view no longer in the center of the screen.

When we shoot the screen on the iPhone 11 the red view will also run out of the screen.

1. Use `NSLayoutConstraint`

NSLayoutConstraint determines the relationship between two interface objects by a linear equation with the following format: item1.attribute1 = multiplier × item2.attribute2 + constant

attribute1 and attribute2 are variables that Auto Layout can adjust when resolving these constraints. For example the properties of a constraint are: left , right , top , bottom , leading , trailing , width , height , centerX , centerY , lastBaseLine …
multiplier and constant define the relative positions of the two properties.

For example, when placing a subview on another view , we will use the following code to add Auto Layout for that subview as follows:

private func addConstraintUsingNSLayoutConstraint() {
    subView.translatesAutoresizingMaskIntoConstraints = false

    // X Constraint
    let centerXConstraint = NSLayoutConstraint(
        item: subView,
        attribute: .centerX,
        relatedBy: .equal,
        toItem: view,
        attribute: .centerX,
        multiplier: 1,
        constant: 0
    )
    
    // Y Constraint
    let centerYConstraint = NSLayoutConstraint(
        item: subView,
        attribute: .centerY,
        relatedBy: .equal,
        toItem: view,
        attribute: .centerY,
        multiplier: 1,
        constant: 0
    )
    
    // Width Constraint
    let widthConstraint = NSLayoutConstraint(
        item: subView,
        attribute: .width,
        relatedBy: .equal,
        toItem: view,
        attribute: .width,
        multiplier: 0.5,
        constant: 0
    )
    
    // Height Constraint
    let heightConstraint = NSLayoutConstraint(
        item: subView,
        attribute: .height,
        relatedBy: .equal,
        toItem: nil,
        attribute: .notAnAttribute,
        multiplier: 1,
        constant: 100
    )
    
    view.addConstraints([
        centerXConstraint,
        centerYConstraint,
        widthConstraint,
        heightConstraint,
    ])
}

private func addConstraintUsingNSLayoutConstraint() {

subView.translatesAutoresizingMaskIntoConstraints = false

// X Constraint

let centerXConstraint = NSLayoutConstraint(

item: subView,

attribute: .centerX,

relatedBy: .equal,

toItem: view,

attribute: .centerX,

multiplier: 1,

constant: 0

)

// Y Constraint

let centerYConstraint = NSLayoutConstraint(

item: subView,

attribute: .centerY,

relatedBy: .equal,

toItem: view,

attribute: .centerY,

multiplier: 1,

constant: 0

)

// Width Constraint

let widthConstraint = NSLayoutConstraint(

item: subView,

attribute: .width,

relatedBy: .equal,

toItem: view,

attribute: .width,

multiplier: 0.5,

constant: 0

)

// Height Constraint

let heightConstraint = NSLayoutConstraint(

item: subView,

attribute: .height,

relatedBy: .equal,

toItem: nil,

attribute: .notAnAttribute,

multiplier: 1,

constant: 100

)

view.addConstraints([

centerXConstraint,

centerYConstraint,

widthConstraint,

heightConstraint,

])

}

Set translatesAutoresizingMaskIntoConstraints false with the aim of ignoring the effects of the auto-resizing mask . It will also skip changing the size and position of the view using the frame , bounds and center properties.
The above code creates the constraints: width , height , centerX , and centerY by specifying the relative positions of these properties.

2. Use visual format language (Visual Format Language)

Most of the useful constraints in the UI can be expressed using Visual Formatting Language. The syntax of the visual formatting language for Auto Layout is here .

private func addVisualFormatLanguage() {
    subView.translatesAutoresizingMaskIntoConstraints = false
    let views: [String: Any] = ["superView": view!, "view": subView]
    let metrics = ["width": view.frame.width / 2]
    let horizontalConstraints = NSLayoutConstraint.constraints(
        withVisualFormat: "H:[superView]-(&lt;=0)-[view(width)]",
        options: .alignAllCenterY,
        metrics: metrics,
        views: views
    )
    let verticalConstraints = NSLayoutConstraint.constraints(
        withVisualFormat: "V:[superView]-(&lt;=0)-[view(100)]",
        options: .alignAllCenterX,
        metrics: nil,
        views: views
    )
    view.addConstraints(horizontalConstraints)
    view.addConstraints(verticalConstraints)
}

private func addVisualFormatLanguage() {

subView.translatesAutoresizingMaskIntoConstraints = false

let views: [String: Any] = ["superView": view!, "view": subView]

let metrics = ["width": view.frame.width / 2]

let horizontalConstraints = NSLayoutConstraint.constraints(

withVisualFormat: "H:[superView]-(<=0)-[view(width)]",

options: .alignAllCenterY,

metrics: metrics,

views: views

)

let verticalConstraints = NSLayoutConstraint.constraints(

withVisualFormat: "V:[superView]-(<=0)-[view(100)]",

options: .alignAllCenterX,

metrics: nil,

views: views

)

view.addConstraints(horizontalConstraints)

view.addConstraints(verticalConstraints)

}

view defines key-value pairs for each view in the order of the views.
We use metrics to automatically compute the width .
H specifies this as a horizontal constraint and V indicates a vertical.

3. Use `AutoresizingMask`

AutoresizingMask determines how the object resizes itself when the size of its superview changes. When the size of a view change, it will automatically change the size of the subview under auto-resizing mask of subview it. You specify the value of this auto-resizing mask by combining the constants described in UIView.AutoresizingMask using the OR operator. Combining these constants allows you to specify which size the view will expand or shrink compared to the superview . According to the Apple developer documentation .

private func addAutoresizingMask() {
    subView.translatesAutoresizingMaskIntoConstraints = true
    subView.bounds = CGRect(
        x: 0,
        y: 0,
        width: 207,
        height: 100
    )
    subView.center = CGPoint(
        x: view.bounds.midX,
        y: view.bounds.midY
    )
    subView.autoresizingMask = [
        .flexibleLeftMargin,
        .flexibleRightMargin,
        .flexibleTopMargin,
        .flexibleBottomMargin
    ]
}

private func addAutoresizingMask() {

subView.translatesAutoresizingMaskIntoConstraints = true

subView.bounds = CGRect(

x: 0,

y: 0,

width: 207,

height: 100

)

subView.center = CGPoint(

x: view.bounds.midX,

y: view.bounds.midY

)

subView.autoresizingMask = [

.flexibleLeftMargin,

.flexibleRightMargin,

.flexibleTopMargin,

.flexibleBottomMargin

]

}

In order to use AutoresizingMask , it’s important to set translatesAutoresizingMaskIntoConstraints true
We specify a size and location for the subView
We leave the subView ‘s subView flexibly at top , left , right and bottom to keep its dimensions constant and always at the center of the superview .

4. Use `NSLayoutAnchor`

NSLayoutAnchor builds the constraint by starting with a view object and choosing one of the anchor properties of that object. These properties correspond to the main NSLayoutConstraint.Attribute values used in Auto Layout and provide a suitable NSLayoutAnchor subclass to create constraints for that property. According to the Apple developer documentation .

private func addNSLayoutAnchor() {
    subView.translatesAutoresizingMaskIntoConstraints = false
    
    NSLayoutConstraint.activate([
        subView.heightAnchor.constraint(equalToConstant: 100),
        subView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5),
        subView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        subView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    ])
}

private func addNSLayoutAnchor() {

subView.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([

subView.heightAnchor.constraint(equalToConstant: 100),

subView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5),

subView.centerYAnchor.constraint(equalTo: view.centerYAnchor),

subView.centerXAnchor.constraint(equalTo: view.centerXAnchor),

])

}

5. Use `intrinsicContentSize`

intrinsicContentSize is a get-only property of UIView

It allows a custom view to communicate with the size layout system whose size is based on the content. This intrinsic size must be independent of the content frame because there is no way to communicate dynamically when the width changes to the height-based layout system has changed. The only way to use intrinsicContentSize is to create a new class that UIView . According to the Apple developer documentation .

class CustomView: UIView {
    override var intrinsicContentSize: CGSize {
        return CGSize(width: 207, height: 100)
    }
}

private func useIntrinsicContentSize() {
    let subView = CustomView()
    
    view.addSubview(subView)
    subView.backgroundColor = .red
    subView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        subView.heightAnchor.constraint(equalToConstant: 100),
        subView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5),
        subView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        subView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    ])
    
}

class CustomView: UIView {

override var intrinsicContentSize: CGSize {

return CGSize(width: 207, height: 100)

}

private func useIntrinsicContentSize() {

let subView = CustomView()

view.addSubview(subView)

subView.backgroundColor = .red

subView.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([

subView.heightAnchor.constraint(equalToConstant: 100),

subView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5),

subView.centerYAnchor.constraint(equalTo: view.centerYAnchor),

subView.centerXAnchor.constraint(equalTo: view.centerXAnchor),

])

}

Thanks for reading!

Share the news now

Source : Viblo

5 approaches to AutoLayout in Swift

Why use `Auto Layout`

1. Use `NSLayoutConstraint`

2. Use visual format language (Visual Format Language)

3. Use `AutoresizingMask`

4. Use `NSLayoutAnchor`

5. Use `intrinsicContentSize`

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers

Why use Auto Layout

1. Use NSLayoutConstraint

2. Use visual format language (Visual Format Language)

3. Use AutoresizingMask

4. Use NSLayoutAnchor

5. Use intrinsicContentSize

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers

Why use `Auto Layout`

1. Use `NSLayoutConstraint`

3. Use `AutoresizingMask`

4. Use `NSLayoutAnchor`

5. Use `intrinsicContentSize`