Swift NSLayoutConstraint constraintsWithVisualFormat Sample Code

Created By: Debasis Das (16-Jan-2016)

In this post we will apply constraints to 4 views in a NSWindow using constraintsWithVisualFormat programmatically.

Note: The autoLayOut checkbox is switched off in the XIB and all the constraints will be added programmatically

In the below sample the following behaviour is desired

• Red View – Header and is of constant height- width is resizable as the window resizes
• Green View – Search Section is of constant height – width of the green view increases as the window resizes
• Blue View – Data View is of dynamic width and height and increases as the screen resizes.
• Cyan View – Footer section is of fixed height and dynamic width
• The screen has a minimum width and height that is derived from the sections

We have intentionally kept the views at vertical & horizontal spacing to understand the behavior

Before applying constraint

Swift NSLayoutConstraint constraintsWithVisualFormat- after applying constraints programmatically

Swift NSLayoutConstraint constraintsWithVisualFormat Sample Code

//  AppDelegate.swift
//  NSLayoutConstraintSwiftSampleCode
//  Created by Debasis Das on 15/01/16.
//  Copyright © 2016 Knowstack. All rights reserved.

import Cocoa

@NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {

    @IBOutlet weak var window: NSWindow!
    @IBOutlet weak var headerView: HeaderView!
    @IBOutlet weak var searchView: SearchView!
    @IBOutlet weak var dataView: DataView!
    @IBOutlet weak var footerView: FooterView!

    func applicationDidFinishLaunching(aNotification: NSNotification) {
        // Insert code here to initialize your application
    }

    func applicationWillTerminate(aNotification: NSNotification) {
        // Insert code here to tear down your application
    }

    override func awakeFromNib() {
        autolayoutUsingVisualFormat()
    }
    
    func autolayoutUsingVisualFormat(){

        //translatesAutoresizingMaskIntoConstraints are set to false for the 4 views
        self.headerView.translatesAutoresizingMaskIntoConstraints = false
        self.searchView.translatesAutoresizingMaskIntoConstraints = false
        self.dataView.translatesAutoresizingMaskIntoConstraints = false
        self.footerView.translatesAutoresizingMaskIntoConstraints = false
        
        let variableBindings = ["headerView":self.headerView,"searchView":self.searchView,"dataView":self.dataView,"footerView":self.footerView]

        //the header is at a horizontal spacing of 20 from both the edges of the screen. The minimum width is greater than equal to 300
        let cn1 = NSLayoutConstraint.constraintsWithVisualFormat("H:|-20-[headerView(>=300)]-20-|", options:.AlignAllBaseline, metrics: nil, views: variableBindings)
        
        //The height of the header is set to a constant 50 and vertical spacing from the top edge of the screen is 20
        let cn2 = NSLayoutConstraint.constraintsWithVisualFormat("V:|-20-[headerView(50)]", options:.AlignAllBaseline, metrics: nil, views: variableBindings)
        
        //The search section view has padding of 20 from both the sides of the screen
        let cn3 = NSLayoutConstraint.constraintsWithVisualFormat("H:|-20-[searchView]-20-|", options:.AlignAllBaseline, metrics: nil, views: variableBindings)

        //there is a gap of 20 vertical spacing between the header view and the search section and the search section is of fixed height of 100
        let cn4 = NSLayoutConstraint.constraintsWithVisualFormat("V:[headerView]-20-[searchView(100)]", options:NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)
        
        //Data view horizontal spacing is 20 from either sides of the screen
        let cn5 = NSLayoutConstraint.constraintsWithVisualFormat("H:|-20-[dataView]-20-|", options:.AlignAllBaseline, metrics: nil, views: variableBindings)
        
        //The vertical spacing between the search view and the data view is 20 and the minimum height of the data section is 300
        let cn6 = NSLayoutConstraint.constraintsWithVisualFormat("V:[searchView]-20-[dataView(>=300)]", options:NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)
        
        //Footer view horizontal spacing is 20 from either sides of the screen
        let cn7 = NSLayoutConstraint.constraintsWithVisualFormat("H:|-20-[footerView]-20-|", options:.AlignAllBaseline, metrics: nil, views: variableBindings)

        //Vertical spacing of 20 between the dataView and the footerView.
        //Footer view is of constant height of 50
        //Footer 20 vertical spacing from the bottom edge of the screen
        let cn8 = NSLayoutConstraint.constraintsWithVisualFormat("V:[dataView]-20-[footerView(50)]-20-|", options:NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)
        
        self.window.contentView?.addConstraints(cn1)
        self.window.contentView?.addConstraints(cn2)
        self.window.contentView?.addConstraints(cn3)
        self.window.contentView?.addConstraints(cn4)
        self.window.contentView?.addConstraints(cn5)
        self.window.contentView?.addConstraints(cn6)
        self.window.contentView?.addConstraints(cn7)
        self.window.contentView?.addConstraints(cn8)

    }
}

//Custom views for the 4 views depicted in 4 different colors
class HeaderView: NSView {    
    override func drawRect(dirtyRect: NSRect) {
        super.drawRect(dirtyRect)
        NSColor.redColor().setFill()
        NSRectFill(dirtyRect);
    }
}

class SearchView: NSView {
    override func drawRect(dirtyRect: NSRect) {
        super.drawRect(dirtyRect)
        NSColor.greenColor().setFill()
        NSRectFill(dirtyRect);
    }
}

class DataView: NSView {
    override func drawRect(dirtyRect: NSRect) {
        super.drawRect(dirtyRect)
        NSColor.blueColor().setFill()
        NSRectFill(dirtyRect);
    }
}

class FooterView: NSView {
    override func drawRect(dirtyRect: NSRect) {
        super.drawRect(dirtyRect)
        NSColor.cyanColor().setFill()
        NSRectFill(dirtyRect);
    }
}

Download the sample code from here NSLayoutConstraintSwiftSampleCodeVisualFormat

Also read the detailed example on constraintsWithVisualFormat

Also read adding constraints programmatically without using the visual format