Swift Autolayout Visual Format Language – Sample Code

Swift Autolayout Visual Format Language – Sample Code

Created By: Debasis Das (7-May-2015)

In this article we will create a simple cocoa application in Swift to demonstrate the Autolayout Visual Format Language where the constraints will be added to the views programmatically, In the various sample code we will see how to add constraints to ensure all the views are resizing proportionately, how to maintain a fixed size for a view while resizing the others.

Note: In this application, we have switched off the autolayout option from the XIB and the entire constraints are being done programmatically

NSAutolayout Sample

NSAutolayout Sample

 Swift Autolayout Visual Format Sample Code

//  AppDelegate.swift
//  SwiftAutoLayoutSampleOne
//  Created by Debasis Das on 5/8/15.
//  Copyright (c) 2015 Knowstack. All rights reserved.

import Cocoa

@NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {

    @IBOutlet weak var window: NSWindow!
    @IBOutlet weak var redView: NSView!
    @IBOutlet weak var greenView: NSView!
    @IBOutlet weak var blueView: NSView!

    func applicationDidFinishLaunching(aNotification: NSNotification) {
        // Insert code here to initialize your application
        redView.translatesAutoresizingMaskIntoConstraints = false
        greenView.translatesAutoresizingMaskIntoConstraints = false
        blueView.translatesAutoresizingMaskIntoConstraints = false
        
        let variableBindings = ["redView": redView, "greenView": greenView, "blueView": blueView]
        
        let horizontalConstraints:[AnyObject] = NSLayoutConstraint.constraintsWithVisualFormat("H:|-20-[redView]-20-[greenView]-20-[blueView]-20-|", options: NSLayoutFormatOptions(0), metrics: nil, views: variableBindings)

        let equalWidthConstraints1:[AnyObject] = NSLayoutConstraint.constraintsWithVisualFormat("[redView(==greenView)]", options: NSLayoutFormatOptions(0), metrics: nil, views: variableBindings)

        let equalWidthConstraints2:[AnyObject] = NSLayoutConstraint.constraintsWithVisualFormat("[greenView(==blueView)]", options: NSLayoutFormatOptions(0), metrics: nil, views: variableBindings)

        let verticalConstraints1:[AnyObject] = NSLayoutConstraint.constraintsWithVisualFormat("V:|-20-[redView]-20-|", options: NSLayoutFormatOptions(0), metrics: nil, views: variableBindings)

        let verticalConstraints2:[AnyObject] = NSLayoutConstraint.constraintsWithVisualFormat("V:|-20-[greenView]-20-|", options: NSLayoutFormatOptions(0), metrics: nil, views: variableBindings)

        let verticalConstraints3:[AnyObject] = NSLayoutConstraint.constraintsWithVisualFormat("V:|-20-[blueView]-20-|", options: NSLayoutFormatOptions(0), metrics: nil, views: variableBindings)

        self.window.contentView.addConstraints(horizontalConstraints);
        self.window.contentView.addConstraints(equalWidthConstraints1);
        self.window.contentView.addConstraints(equalWidthConstraints2);
        self.window.contentView.addConstraints(verticalConstraints1);
        self.window.contentView.addConstraints(verticalConstraints2);
        self.window.contentView.addConstraints(verticalConstraints3);

    }

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

Red, Green and Blue Background View Class

//  RedView.swift
//  SwiftAutoLayoutSampleOne
//  Created by Debasis Das on 5/8/15.
//  Copyright (c) 2015 Knowstack. All rights reserved.

import Cocoa

class RedView: NSView {

    override func drawRect(dirtyRect: NSRect) {
        super.drawRect(dirtyRect)

        NSGraphicsContext.saveGraphicsState()
        var bPath: NSBezierPath = NSBezierPath(rect: dirtyRect)
        let color = NSColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)
        color.set()
        color.setFill()
        bPath.fill()
        NSGraphicsContext.restoreGraphicsState()

    }
    
}

class GreenView: NSView {
    
    override func drawRect(dirtyRect: NSRect) {
        super.drawRect(dirtyRect)
        
        NSGraphicsContext.saveGraphicsState()
        var bPath: NSBezierPath = NSBezierPath(rect: dirtyRect)
        let color = NSColor(red: 0.0, green: 1.0, blue: 0.0, alpha: 1.0)
        color.set()
        color.setFill()
        bPath.fill()
        NSGraphicsContext.restoreGraphicsState()
        
    }
    
}

class BlueView: NSView {
    
    override func drawRect(dirtyRect: NSRect) {
        super.drawRect(dirtyRect)
        
        NSGraphicsContext.saveGraphicsState()
        var bPath: NSBezierPath = NSBezierPath(rect: dirtyRect)
        let color = NSColor(red: 0.0, green: 0.0, blue: 1.0, alpha: 1.0)
        color.set()
        color.setFill()
        bPath.fill()
        NSGraphicsContext.restoreGraphicsState()
    }
}

Swift Autolayout Sample Code
Also Read Objective C Autolayout – Visual Format Language Sample CodeAutolayout Visual Format Language – Objective C Sample Code

Posted in Cocoa, Swift Tagged with: , , ,
0 comments on “Swift Autolayout Visual Format Language – Sample Code
1 Pings/Trackbacks for "Swift Autolayout Visual Format Language – Sample Code"
  1. […] Download the sample code from here Also Read the Swift Autolayout Visual Format Language – Sample Code […]

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