How to build a constraints for a single view

In this tutorial, the following steps will explain you how to build a constraints for a single view:

Step 1: Define Variables

Step 2: Initialize Views

Step 3: Build the Constraints for a Single View

Step 4: Build and Run

Step 1: Define Variables

To start, build three variables of type UI view Open ViewController.swift and include the following code above the viewDidLoad method:

var vwBlue:UIView!
var vwRed:UIView!
var vwGreen:UIView!

Step 2: Initialize Views

Build a function called initViews at the bottom of the view controller void as its return type. This function will start the views and include them to the view hierarchy. Ensure to call this function in viewDidLoad after calling the superclass’s viewDidLoad method.

func initViews() -> Void
{
 //Initialize
 vwRed = UIView()
 vwBlue = UIView()
 vwGreen = UIView()

 //Prep auto layout
 vwRed.setTranslatesAutoresizingMaskIntoConstraints(false)
 vwBlue.setTranslatesAutoresizingMaskIntoConstraints(false)
 vwGreen.setTranslatesAutoresizingMaskIntoConstraints(false)

 //Coloring
 vwRed.backgroundColor = UIColor.redColor()
 vwBlue.backgroundColor = UIColor.blueColor()
 vwGreen.backgroundColor = UIColor.greenColor()

 //Add them to the view
 self.view.addSubview(vwRed)
 self.view.addSubview(vwBlue)
 self.view.addSubview(vwGreen)
}

When using Auto Layout on views builded in code, there are some caveats to be aware of. The first is connected to the value of the property translatesAutoresizingMaskIntoConstraints. This property is true by default, which means Auto Layout constraints will be Buildedbased on the view’s autoresizing mask. We want the view to respect the Auto Layout constraints we will add so this property should be set to false.

The second one is to remain in mind is the view life cycle. Before Auto Layout constraints can be included to a view, it must be included to superview. Or else, a runtime exception is thrown. Recall that Auto Layout describes where views are positioned based on relationships. If a view has no superview, the operating system has no reference point to tell the Auto Layout constraints to.

Step 3: Build the Constraints for a Single View

Let’s start with a simple example of the Visual Format Language. For the red view, vwRed, we will include Auto Layout constraints that compose it the same size as its superview. This is useful in a scenario where you include a background image.

Before the Visual Format Language can be used, each of the views that we require must be referenced inside a dictionary. This is how the views will be identified by the Visual Format Language.

Build a function called BuildConstraints with a void return type at the bottom of the view controller class. Don’t worry about the syntax. We’ll revisit the implementation of the BuildConstraints function in a moment.

func createConstraints() -> Void
{
 //Views to add constraints to
 let views = Dictionary(dictionaryLiteral: ("red",vwRed),("blue",vwBlue),("green",vwGreen))

 //Horizontal constraints
 allow horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|[red]|", options: nil, metrics: nil, views: views)
 self.view.addConstraints(horizontalConstraints)

 //Vertical constraints
 allow verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|[red]|", options: nil, metrics: nil, views: views)
 self.view.addConstraints(verticalConstraints)
}

Step 4: Build and Run

Call this function at the end of the initViews function we build in advance. Build and run the project by tap on Command + R or by selecting the play button at the top left. The iOS Simulator will run displaying the red view taking up the entire screen as intended.