Swift NSLayoutConstraint constraintsWithVisualFormat sample code

Swift NSLayoutConstraint constraintsWithVisualFormat sample code – detailed example

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

In this post we will create a detailed sample screen in swift having lots of UI elements using NSLayoutConstraint constraintsWithVisualFormat.

This sample code uses most of the options available in constraintsWithVisualFormat

Swift constraintsWithVisualFormat detailed example 1 - Before Constraints

Swift constraintsWithVisualFormat detailed example 1 – Before Constraints

Swift constraintsWithVisualFormat detailed example 1 - After Constraints

Swift constraintsWithVisualFormat detailed example 1 – After Constraints

Sample Code

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

import Cocoa

@NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {

    @IBOutlet weak var window: NSWindow!

    @IBOutlet weak var screenIcon:NSImageView!
    @IBOutlet weak var screenTitle: NSTextField!
    @IBOutlet weak var findButton: NSButton!

    @IBOutlet weak var searchCriteriaLabel: NSTextField!
    @IBOutlet weak var departmentSearchFieldLabel: NSTextField!
    @IBOutlet weak var departmentTextField: NSTextField!
    @IBOutlet weak var dpmtDescSearchFieldLabel: NSTextField!
    @IBOutlet weak var dpmtDescTextField: NSTextField!

    
    @IBOutlet weak var searchResultsLabel: NSTextField!
    @IBOutlet weak var departmentsResultsLabel: NSTextField!
    @IBOutlet weak var employeesResultsLabel: NSTextField!
    
    @IBOutlet weak var departmentsTableView: NSScrollView!
    @IBOutlet weak var employeesTableView: NSScrollView!
    
    @IBOutlet weak var downloadButton: NSButton!
    
    @IBOutlet weak var firstHorizontalLine: NSBox!
    @IBOutlet weak var secondHorizontalLine: NSBox!
    @IBOutlet weak var thirdHorizontalLine: NSBox!
    
    

    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() {
        autolayoutUsingVisualFormatting()
    }
    func autolayoutUsingVisualFormatting(){
        self.screenIcon.translatesAutoresizingMaskIntoConstraints = false
        self.screenTitle.translatesAutoresizingMaskIntoConstraints = false
        self.findButton.translatesAutoresizingMaskIntoConstraints = false
        self.searchCriteriaLabel.translatesAutoresizingMaskIntoConstraints = false
        self.departmentSearchFieldLabel.translatesAutoresizingMaskIntoConstraints = false
        self.dpmtDescSearchFieldLabel.translatesAutoresizingMaskIntoConstraints = false
        self.departmentTextField.translatesAutoresizingMaskIntoConstraints = false
        self.dpmtDescTextField.translatesAutoresizingMaskIntoConstraints = false
        //self.searchResultsLabel.translatesAutoresizingMaskIntoConstraints = false
        self.departmentsResultsLabel.translatesAutoresizingMaskIntoConstraints = false
        self.employeesResultsLabel.translatesAutoresizingMaskIntoConstraints = false
        self.departmentsTableView.translatesAutoresizingMaskIntoConstraints = false
        self.employeesTableView.translatesAutoresizingMaskIntoConstraints = false
        self.downloadButton.translatesAutoresizingMaskIntoConstraints = false
        self.firstHorizontalLine.translatesAutoresizingMaskIntoConstraints = false
        self.secondHorizontalLine.translatesAutoresizingMaskIntoConstraints = false
        self.thirdHorizontalLine.translatesAutoresizingMaskIntoConstraints = false

        
        let variableBindings = ["screenIcon":self.screenIcon, "screenTitle":self.screenTitle,"findButton":self.findButton,"searchCriteriaLabel":self.searchCriteriaLabel,"departmentSearchFieldLabel":self.departmentSearchFieldLabel,"departmentTextField":self.departmentTextField,"dpmtDescSearchFieldLabel":self.dpmtDescSearchFieldLabel,"dpmtDescTextField":self.dpmtDescTextField,"departmentsResultsLabel":self.departmentsResultsLabel,"employeesResultsLabel":self.employeesResultsLabel,"departmentsTableView":self.departmentsTableView,"employeesTableView":self.employeesTableView,"downloadButton":self.downloadButton,"firstHorizontalLine":self.firstHorizontalLine,"secondHorizontalLine":self.secondHorizontalLine,"thirdHorizontalLine":self.thirdHorizontalLine]
        
        
        let cn1:[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("V:|-10-[screenIcon(30)]", options:.AlignAllBaseline, metrics: nil, views: variableBindings)
        let cn2:[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("V:|-15-[screenTitle]", options:.AlignAllBaseline, metrics: nil, views: variableBindings)
        let cn3:[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("V:|-20-[findButton]", options:.AlignAllBaseline, metrics: nil, views: variableBindings)
        let cn4:[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(20)-[screenIcon]-(10)-[screenTitle(>=150)]", options: .AlignAllBaseline, metrics: nil, views: variableBindings)
        let cn5:[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("H:[findButton]-20-|", options: .AlignAllBaseline, metrics: nil, views: variableBindings)
        
        //First horizontal line separator
        //The horizontal line should be flush with the edges and should be at a vertical spacing of 10 with the screen icon
        
        let cn6 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(0)-[firstHorizontalLine]-(0)-|", options: .AlignAllBaseline, metrics: nil, views: variableBindings)
        let cn7 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("V:[screenIcon]-(10)-[firstHorizontalLine]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)
        
        /*
        Search Criteria Label should have vertical spacing of 10 from the first horizontal line
        Search Criteria Label should have 20 px horizontal spacing from the edge
        */
        
        let cn8: [NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(20)-[searchCriteriaLabel]", options: .AlignAllBaseline, metrics: nil, views: variableBindings)
        let cn9 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("V:[firstHorizontalLine]-(10)-[searchCriteriaLabel]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)

        //Department search label should be 20px horizontal spacing from the left edge
        //Department search label should be 10px vertical spacing from the searchCriteriaLabel
        let cn10 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("V:[searchCriteriaLabel]-(10)-[departmentSearchFieldLabel]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)
        
        let cn11 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(20)-[departmentSearchFieldLabel]", options:NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)

        let cn12 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("V:[searchCriteriaLabel]-(10)-[departmentTextField]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)

        let cn13 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("H:[departmentSearchFieldLabel]-(10)-[departmentTextField(>=150,<=300)]-(10)-[dpmtDescSearchFieldLabel]-(10)-[dpmtDescTextField(>=150,<=300)]-(>=100)-|", options:.AlignAllBaseline, metrics: nil, views: variableBindings)
        
        let cn14 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(0)-[secondHorizontalLine]-(0)-|", options: .AlignAllBaseline, metrics: nil, views: variableBindings)
        let cn15 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("V:[departmentSearchFieldLabel]-(20)-[secondHorizontalLine]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)

        //Table View Labels & Table View Constraints
        let cn16 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("V:[secondHorizontalLine]-(10)-[departmentsResultsLabel]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)
        let cn17 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("V:[secondHorizontalLine]-(10)-[employeesResultsLabel]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)
        let cn18 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(20)-[departmentsResultsLabel]", options: .AlignAllBaseline, metrics: nil, views: variableBindings)
        
        
        let cn19 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("V:[departmentsResultsLabel]-(10)-[departmentsTableView(>=200)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)
        let cn20 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("V:[departmentsResultsLabel]-(10)-[employeesTableView(==departmentsTableView)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)
        

        let cn21 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(20)-[departmentsTableView(>=300,<=1600)]-(30)-[employeesTableView(==departmentsTableView)]-(20)-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)

        let cn22 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("H:[departmentsTableView]-(30)-[employeesResultsLabel]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)
        
        let cn23 :[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(0)-[thirdHorizontalLine]-(0)-|", options: .AlignAllBaseline, metrics: nil, views: variableBindings)
        let cn24:[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("V:[departmentsTableView]-(10)-[thirdHorizontalLine]-50-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: variableBindings)
        
        
        //Download Button Constraints
        let cn25:[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("H:[downloadButton]-(20)-|", options: .AlignAllBaseline, metrics: nil, views: variableBindings)
        let cn26:[NSLayoutConstraint] = NSLayoutConstraint.constraintsWithVisualFormat("V:[thirdHorizontalLine]-(10)-[downloadButton]", 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)
        self.window.contentView?.addConstraints(cn9)
        self.window.contentView?.addConstraints(cn10)
        self.window.contentView?.addConstraints(cn11)
        self.window.contentView?.addConstraints(cn12)
        self.window.contentView?.addConstraints(cn13)
        self.window.contentView?.addConstraints(cn14)
        self.window.contentView?.addConstraints(cn15)
        self.window.contentView?.addConstraints(cn16)
        self.window.contentView?.addConstraints(cn17)
        self.window.contentView?.addConstraints(cn18)
        self.window.contentView?.addConstraints(cn19)
        self.window.contentView?.addConstraints(cn20)
        self.window.contentView?.addConstraints(cn21)
        self.window.contentView?.addConstraints(cn22)
        self.window.contentView?.addConstraints(cn23)
        self.window.contentView?.addConstraints(cn24)
        self.window.contentView?.addConstraints(cn25)
        self.window.contentView?.addConstraints(cn26)

    }

}

You can download the sample code hereSwift ConstraintsWithVisualFormat Sample Code

Posted in Cocoa, Swift Tagged with: , , ,
0 comments on “Swift NSLayoutConstraint constraintsWithVisualFormat sample code
1 Pings/Trackbacks for "Swift NSLayoutConstraint constraintsWithVisualFormat sample code"
  1. […] Also read the detailed example on constraintsWithVisualFormat […]

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news