How To Change Swift Constraints To Make Autolayout Programmatically

In previous article, we have learnt how to change swift constraints use auto layout tool bar visually ( How To Add Constraints In Xcode 10 To Implement Auto Layout ). In this article i will show you an example about how to use class UIKit.NSLayoutConstraint, UIKit.NSLayoutAnchor and Visual Format Language to add constraints to UIView object programmatically.

Please Note, no matter which method you use to add constraints to UIView object, you should first set the UIView object’s translatesAutoresizingMaskIntoConstraints property’s value to false, otherwise when you change constraints to the UIView object, it will throw an error message like [LayoutConstraints] Unable to simultaneously satisfy constraints.

1. Add Constraints To UIView Object Use NSLayoutConstraint Class.

Invoke NSLayoutConstraint class’s init method to create constraint object. Do not forget activate the constraint object after create it. You can read more at apple NSLayoutConstraint init method document.

// Initialize a NSLayoutConstraint object.
let topConstraint = NSLayoutConstraint.init(item: backgroundView, attribute: NSLayoutConstraint.Attribute.top, relatedBy: NSLayoutConstraint.Relation.equal, toItem: self.view, attribute: NSLayoutConstraint.Attribute.top, multiplier: 1.0, constant: backgroundViewMargin)
        
// Activate top constraint to enable it.
topConstraint.isActive = true

2. Add Constraints To UIView Object Use NSLayoutAnchor Class.

NSLayoutAnchor class make add constraint more simple with less code. Each UIView object has topAnchor, leftAnchor, widthAnchor and heightAnchor …… attributes which is an instance of NSLayoutAnchor class’s subclass. You can call the NSLayoutAnchor class’s constraint method to add constraint. Do not forget make the constraint object active after create it. You can read more at NSLayoutAnchor class document.

// Get top NSLayoutConstraint object.
let topConstraint = redView.topAnchor.constraint(equalTo: backgroundView.topAnchor, constant: redViewMargin)

// Activate above constraint object to make it effective.
topConstraint.isActive = true

3. Add Constraints To UIView Object Use Visual Format Language.

Besides above two method, you can also use Visual Format Language to add constraints to UIView object. Visual format language is just a text string that define the constraints layout meanings. For example “H:|-100-[greenView(200)]” means greenView’s width is 200 pt, and the distance between it’s left edge to it’s parent view left edge is 100 pt. You can read apple Visual Format Language document for detail explain.

Below is the source code about how to use swift visual format language to add constraints to UIView object.

// First define a horizontal visual format language text string. Please note the string left and greenView is the placeholder string, they will be replaced in later code. The greenView's width is 100pt.

let horizontalVFL = "H:|-left-[greenView(100)]"

// Define a vertical visual format language text string. The string top and greenView is also placeholder string. The greenView's height is 200pt.
let verticalVFL = "V:|-top-[greenView(200)]"

// Define a dictionary object, the key is the direction space constraint placeholder string in above VFL string. The value is space distance value in that direction.
let metrics = ["left":100, "top":100]

// Define a dictionary object, the key is the view name placeholder string in above VFL string. The value is the first view item.
let views = ["greenView": greenView]

// Create horizontal constraint use horizontal VFL string with passed dictionary objects.
let horizontalConstraints = NSLayoutConstraint.constraints(withVisualFormat: horizontalVFL, options: NSLayoutConstraint.FormatOptions.alignAllLeading, metrics: metrics, views: views)

// Create vertical constraint use vertical VFL string with passed dictionary objects.
let verticalConstraints = NSLayoutConstraint.constraints(withVisualFormat: verticalVFL, options: NSLayoutConstraint.FormatOptions.alignAllLeading, metrics: metrics, views: views)

// Add above horizontal and vertical constraints to parent view to enable constraints.
parentView.addConstraints(horizontalConstraints)
parentView.addConstraints(verticalConstraints)

4. Add Constraints Programmatically In Swift Example.

There are three UIView object in this example, a gray view, a red view and a green view. Red view and green view is gray view’s subview. The gray view’s constraints is added use NSLayoutConstraint class’s init method, the red view’s constraints is added use NSLayoutAnchor class’s constraint method, the green view’s constraints is added use Visual Format Language. When you change the screen orientation, the red view and green view will change it’s size to match the screen change automatically.

READ :   Swift UIView Animation Example

add swift constraints programmatically example

5. Add Swift Constraints Programmatically Source Code.

After you create a Xcode project, edit ViewController.swift file use below source code.  You will need to override the viewWillTransition function, this function is triggered when the screen orientation is changed, so we exchange the screen width and height value in that function.

//
//  ViewController.swift
//  SwiftMakeConstraintsProgrammaticallyExample
//
//  Created by song zhao on 7/24/19.
//  Copyright © 2019 dev2qa.com. All rights reserved.
//

import UIKit.NSLayoutAnchor

class ViewController: UIViewController {
    
    // Get iOS device screen width and height.
    var screenWidth = UIScreen.main.bounds.width
    var screenHeight = UIScreen.main.bounds.height
    
    // Create background view object, other views will be added to this view.
    var backgroundView = UIView()
    let backgroundViewMargin = CGFloat(20)
    
    // Create a red view object.
    var redView = UIView()
    // redViewMargin is relative to it's parent view ( backgroundView ).
    let redViewMargin = CGFloat(10)
    let redViewWidth = CGFloat(300)
    let redViewHeight = CGFloat(200)
    
    // Create a green view object.
    var greenView = UIView()
    // greenViewMarginLeft is also relative to it's parent view ( backgroundView ).
    let greenViewMarginLeft = 100
    // greenViewMarginTop, greenViewWidth, greenViewHeight are all need to be calculated at run time, so set it's value to 0 when declare.
    var greenViewMarginTop = 0
    var greenViewWidth = 0
    var greenViewHeight = 0
    

    override func viewDidLoad() {
        super.viewDidLoad()
        
        drawViews()
        
    }
    
    // This function will be invoked when iOS device change it's screen orientation between portrait and landscape.
    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        
        // Because screen orientation is changed, so exchange screen width and height.
        let tmpScreenWidth = screenWidth
        screenWidth = screenHeight
        screenHeight = tmpScreenWidth
        
        // When screen orientation is changed, remove backgroundView from screen, then create and add it again in later source code.
        backgroundView.removeFromSuperview()
        
        drawViews()
    }
    
    
    func drawViews() -> Void{
        
        // Calculate greenViewMarginTop value.
        greenViewMarginTop = Int(redViewHeight) + 20
        
        // Calculate greenViewWidth value. To make green view fully visible in app screen so minus green view margin left and double background view margin.
        greenViewWidth = Int(screenWidth) - 2*Int(backgroundViewMargin) - greenViewMarginLeft - Int(redViewMargin)
        
        greenViewHeight = Int(screenHeight) - 2*Int(backgroundViewMargin) - greenViewMarginTop - Int(redViewMargin)
        
        // Add backgroundView to screen and create constraint use NSLayoutConstraint.
        addBackgroundViewByNSLayoutConstraint()
        
        // Add redView to backgroundView and create constraint use NSLayoutAnchor
        addViewConstraintsByNSLayoutAnchor()
        
        // Add greenView to backgroundView and create constraint use visual format language.
        addViewConstraintsByVFL()
        
    }
    

    /* Create background view and add constraints to it use NSLayoutConstraint class. */
    func addBackgroundViewByNSLayoutConstraint() -> Void{
        
        backgroundView = UIView()
        
        // Set background view background color.
        backgroundView.backgroundColor = UIColor.lightGray
        
        // Do not need to set backgroundView frame. 
        //backgroundView.frame = CGRect(x:self.backgroundViewPositionX, y:self.backgroundViewPositionY, width:Int(self.screenWidth) - 2 * self.backgroundViewPositionX, height:Int(self.screenHeight) - 2 * self.backgroundViewPositionY)
        
        /* Must set the UIView's property translatesAutoresizingMaskIntoConstraints's value to false before add constraints to the UIView object. Otherwise you will get error message like [LayoutConstraints] Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want.*/
        backgroundView.translatesAutoresizingMaskIntoConstraints = false
        
        // Add backgroundView to the screen main view.
        self.view.addSubview(backgroundView)
        
        // Below code use NSLayoutConstraint class's init method to add constraints to backgroundView.
        
        // Set top constraint to backgroundView.
        let topConstraint = NSLayoutConstraint.init(item: backgroundView, attribute: NSLayoutConstraint.Attribute.top, relatedBy: NSLayoutConstraint.Relation.equal, toItem: self.view, attribute: NSLayoutConstraint.Attribute.top, multiplier: 1.0, constant: backgroundViewMargin)
        
        // Activate top constraint to make it take effect.
        topConstraint.isActive = true
        
        // Set bottom constraint to backgroundView.
        let bottomConstraint = NSLayoutConstraint.init(item: backgroundView, attribute: NSLayoutConstraint.Attribute.bottom, relatedBy: NSLayoutConstraint.Relation.equal, toItem: self.view, attribute: NSLayoutConstraint.Attribute.bottom, multiplier: 1.0, constant: -backgroundViewMargin)
        
        // Activate bottom constraint to enable it.
        bottomConstraint.isActive = true
        
        // Set and activate left, right constraint to backgroundView.
        let leftConstraint = NSLayoutConstraint.init(item: backgroundView, attribute: NSLayoutConstraint.Attribute.left, relatedBy: NSLayoutConstraint.Relation.equal, toItem: self.view, attribute: NSLayoutConstraint.Attribute.left, multiplier: 1.0, constant: backgroundViewMargin)
        
        leftConstraint.isActive = true
        
        let rightConstraint = NSLayoutConstraint.init(item: backgroundView, attribute: NSLayoutConstraint.Attribute.right, relatedBy: NSLayoutConstraint.Relation.equal, toItem: self.view, attribute: NSLayoutConstraint.Attribute.right, multiplier: 1.0, constant: -backgroundViewMargin)
        
        rightConstraint.isActive = true
    }

    
    /* Create red view and add it as background view's subview, use NSLayoutAnchor class to add constraints to it, so the constraint is relative to backgroundView. */
    func addViewConstraintsByNSLayoutAnchor() -> Void{
        
        // Set red view's background color.
        redView.backgroundColor = UIColor.red
        
        // Set red view's translatesAutoresizingMaskIntoConstraints property to false because we want to add constraints to red view to programmatically change it's size and position responsively.
        redView.translatesAutoresizingMaskIntoConstraints = false
        
        // Add redView as subview of background view.
        backgroundView.addSubview(redView)
        
        // Below code use NSLayoutAnchor to add constraints to above red view.
        
        // Add and activate top constraint for red view.
        let topConstraint = redView.topAnchor.constraint(equalTo: backgroundView.topAnchor, constant: redViewMargin)
        topConstraint.isActive = true
        
        // Add and activate left constraint for red view.
        let leftConstraint = redView.leftAnchor.constraint(equalTo: backgroundView.leftAnchor, constant: redViewMargin)
        leftConstraint.isActive = true
        
        // Add and activate red view width constraint.
        let widthConstraint = redView.widthAnchor.constraint(equalToConstant: redViewWidth)
        widthConstraint.isActive = true
        
        // Add and activate red view height constraint.
        let heightConstraint = redView.heightAnchor.constraint(equalToConstant: redViewHeight)
        heightConstraint.isActive = true
        
    }
    
    /* Create a green view and add it as backgroundView's subview. Use visual format language to add constraints to the green view, it is relative to backgroundView. */
    func addViewConstraintsByVFL() -> Void{
    
        // Set green view background color.
        greenView.backgroundColor = UIColor.green
        
        // Set it's translatesAutoresizingMaskIntoConstraints property to false to enable add constraints to it in programmatically.
        greenView.translatesAutoresizingMaskIntoConstraints = false
        
        // Add greenView as backgroundView's child.
        backgroundView.addSubview(greenView)
        
        // Add constraints use visual format language text.
        
        // The horizontal visual format language string. This string text means the greenView's width is the value of greenViewWidth variable, and the space direction is between greenView left edge to the parent view left edge. The left and greenView is a placeholder string.
        let horizontalVFL = "H:|-left-[greenView(\(greenViewWidth))]"
        
        // The vertical visual format language string. This string text means the greenView's height is the value of variable greenViewHeight, and the space direction is between greenView top edge to the parent view top edge. The string top and greenView is placeholder string also.
        let verticalVFL = "V:|-top-[greenView(\(greenViewHeight))]"
        
        // The metrics is a dictionary object which specify the left and top placeholder's value, the key must be same as placeholder string in above visual format language string.
        let metrics = ["left":greenViewMarginLeft, "top":greenViewMarginTop]
        
        // The views is a dictionary object which specify the view object in the visual format language string, the key should be same with the view's placeholder name in the VFL string.
        let views = ["greenView": greenView]
        
        // Create horizontal constraint to greenView.
        let horizontalConstraints = NSLayoutConstraint.constraints(withVisualFormat: horizontalVFL, options: NSLayoutConstraint.FormatOptions.alignAllLeading, metrics: metrics, views: views)
        
        // Create vertical constraint to greenView.
        let verticalConstraints = NSLayoutConstraint.constraints(withVisualFormat: verticalVFL, options: NSLayoutConstraint.FormatOptions.alignAllLeading, metrics: metrics, views: views)
        
        // Add above horizontal and vertical constraints to backgroundView.
        backgroundView.addConstraints(horizontalConstraints)
        backgroundView.addConstraints(verticalConstraints)
    }
}

Reference

  1. How To Create A Swift Project In Xcode

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.