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
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
[…] Simple Example on constraintsWithVisualFormat […]