Introduction to Autolayouts programmatically

8 min readJun 1, 2018

This tutorial from codzify.com will give you enough understanding about Autolayout programmatically in iOS App development. Hope you all like it. You can learn many more concepts of iOS App development here.

UIView Autolayout is an very interesting concept in iOS App development. Autolayout takes care of responsive design. iPhone comes with different screen sizes every time. With the help of Autolayouts , you do not have to create your App design each time. Autolayout takes care of responsive design .

I will provide one simple library which you can use freely for Autolayouts. See Autolayouts code in given example, it's too lengthy. So we Simplified code in next Tutorial. But to understand this category you have to clear the basic concepts of Constraints.

What are Autolayout Constraints ?

Note:- To use AutoLayout you have to define Constraints.

Constraints are the specific rules you should assign to particular View like ….

1) No matter whch iPhone screen size is , Give 20px spacing from left.

2) No matter whch iPhone screen size is , Give 20px spacing from right.

3) No matter whch iPhone screen size is , Give 20px spacing from top.

4) No matter whch iPhone screen size is , Give 20px spacing from bottom.

That means there is one view in which there is spacing or padding of 20 px from left, right, bottom and top .

Syntax for writing Constraints:-

let topConstraint = NSLayoutConstraint(item: SpecificUIView, attribute: .attributeName, relatedBy: .Realtion, toItem: superView, attribute: .attribute, multiplier: 1, constant: 12);
   
[superView addConstraint:contraint];

Always remember ,

Suppose label1 is added to view1 then view1(orangeColor View) will be superview of label1.

2) Suppose view1 is added to boxView then boxView will be superview of view1.

3) Suppose boxView is added to superBoxView then superBoxView will be superview of boxView

Constraints Attributes which are mostly used includes :-

1) NSLayoutConstraint.left

2) NSLayoutConstraint.right

3) NSLayoutConstraint.top

4) NSLayoutConstraint.bottom

5) NSLayoutConstraint.width

6) NSLayoutConstraint.height

Task Output :-

Open Xcode Goto File > New >Project >Single View Application > Enter Project Name (eg :- AutolayoutsDemo) and Select Language as Swift> Done.

Now you can see a file on left navigation Menu of Xcode named, Autolayouts_Demo.swift

We start first with AppDelegate.swift File. Copy and paste this code in didFinishLaunchingWithOptions method (the very first method you can see in Appdelegate.swift) .

import UIKit
import CoreData@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {    var window: UIWindow?
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
              
        window = UIWindow(frame: UIScreen.main.bounds)
        let mainController = Autolayouts_Demo() as UIViewController
        let navigationController = UINavigationController(rootViewController: mainController)
        navigationController.navigationBar.isTranslucent = false
        self.window?.rootViewController = navigationController
        self.window?.makeKeyAndVisible()
        
        return true
    }

AppDelegate is the file which is called first when your App Starts . There are many ViewControllers added in your file . So How our App knows which one to start first ? So in didFinishLaunchingApplications we told our code to begin with ViewController file.

UINavigationController is mostly you see in every App. This is an header with teal color as you see in Final Output Image. Word itself tells its mean. It Controls all the navigation .

self.window?.rootViewController = navigationController

In this way you can set Root View Controller . In our case we want ViewController.swift file to be the first one to start.

Autolayouts_Demo.swift file looks like this :-

//  Autolayouts_Demo.swift
//  Created by Manish Methani on 05/05/18.
//  Copyright © 2018 Codzify. All rights reserved.
//import UIKitclass Autolayouts_Demo: UIViewController {
    override func viewDidLoad()
    {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.white
        self.title = "Autolayouts Demo"
       
       // SuperView added to self.view
        let superView = UIView()
        self.view.addSubview(superView)
        superView.backgroundColor = UIColor.red
        
        superView.translatesAutoresizingMaskIntoConstraints = false
        let topConstraint = NSLayoutConstraint(item: superView, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1, constant: 12)
        self.view.addConstraint(topConstraint)
        
        let leftConstraint = NSLayoutConstraint(item: superView, attribute: .left, relatedBy: .equal, toItem: self.view, attribute: .left, multiplier: 1, constant: 20)
        self.view.addConstraint(leftConstraint)
        
        let rightConstraint = NSLayoutConstraint(item: superView, attribute: .right, relatedBy: .equal, toItem: self.view, attribute: .right, multiplier: 1, constant: -20)
        self.view.addConstraint(rightConstraint)
        
        let heightConstraint = NSLayoutConstraint(item: superView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 54)
        self.view.addConstraint(heightConstraint)
        
        
        // Label added to Superview as subview
        let label = UILabel()
        superView.addSubview(label)
        label.textColor = UIColor .white
        label.font = UIFont.systemFont(ofSize: 14, weight: UIFont.Weight(rawValue: 1.0))
        label.text = "Label added to superview as subview"
        
        label.translatesAutoresizingMaskIntoConstraints = false
        let topLabelConstraint = NSLayoutConstraint(item: label, attribute: .top, relatedBy: .equal, toItem: superView, attribute: .top, multiplier: 1, constant: 12)
        superView.addConstraint(topLabelConstraint)
        
        let leftLabelConstraint = NSLayoutConstraint(item: label, attribute: .left, relatedBy: .equal, toItem: superView, attribute: .left, multiplier: 1, constant: 20)
        superView.addConstraint(leftLabelConstraint)
        
        let rightLabelConstraint = NSLayoutConstraint(item: label, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 300)
        superView.addConstraint(rightLabelConstraint)
        
        let heightLabelConstraint = NSLayoutConstraint(item: label, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 24)
        superView.addConstraint(heightLabelConstraint)
        
        
        
        // SuperView1 added relative to SuperView
        let superView1 = UIView()
        self.view.addSubview(superView1)
        superView1.backgroundColor = UIColor.yellow
        
        superView1.translatesAutoresizingMaskIntoConstraints = false
        let topSuperView1Constraint = NSLayoutConstraint(item: superView1, attribute: .top, relatedBy: .equal, toItem: superView, attribute: .bottom, multiplier: 1, constant: 12)
        self.view.addConstraint(topSuperView1Constraint)
        
        let leftSuperView1Constraint = NSLayoutConstraint(item: superView1, attribute: .left, relatedBy: .equal, toItem: self.view, attribute: .left, multiplier: 1, constant: 20)
        self.view.addConstraint(leftSuperView1Constraint)
        
        let widthSuperView1Constraint = NSLayoutConstraint(item: superView1, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant:120)
        self.view.addConstraint(widthSuperView1Constraint)
        
        let heightSuperView1Constraint = NSLayoutConstraint(item: superView1, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant:54)
        self.view.addConstraint(heightSuperView1Constraint)
        
        
        
        // SuperView2 added relative to SuperView1 and Superview
        let superView2 = UIView()
        self.view.addSubview(superView2)
        superView2.backgroundColor = UIColor.orange
        
        superView2.translatesAutoresizingMaskIntoConstraints = false
        let topSuperView2Constraint = NSLayoutConstraint(item: superView2, attribute: .top, relatedBy: .equal, toItem: superView, attribute: .bottom, multiplier: 1, constant: 12)
        self.view.addConstraint(topSuperView2Constraint)
        
        let leftSuperView2Constraint = NSLayoutConstraint(item: superView2, attribute: .left, relatedBy: .equal, toItem: superView1, attribute: .right, multiplier: 1, constant: 12)
        self.view.addConstraint(leftSuperView2Constraint)
        
        let widthSuperView2Constraint = NSLayoutConstraint(item: superView2, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant:200)
        self.view.addConstraint(widthSuperView2Constraint)
        
        let heightSuperView2Constraint = NSLayoutConstraint(item: superView2, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant:54)
        self.view.addConstraint(heightSuperView2Constraint)
        
        
        // SuperView3 added relative to SuperView2
        let superView3 = UIView()
        self.view.addSubview(superView3)
        superView3.backgroundColor = UIColor.green
        
        superView3.translatesAutoresizingMaskIntoConstraints = false
        let topSuperView3Constraint = NSLayoutConstraint(item: superView3, attribute: .top, relatedBy: .equal, toItem: superView2, attribute: .bottom, multiplier: 1, constant: 12)
        self.view.addConstraint(topSuperView3Constraint)
        
        let leftSuperView3Constraint = NSLayoutConstraint(item: superView3, attribute: .left, relatedBy: .equal, toItem: superView2, attribute: .left, multiplier: 1, constant: 12)
        self.view.addConstraint(leftSuperView3Constraint)
        
        let widthSuperView3Constraint = NSLayoutConstraint(item: superView3, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant:80)
        self.view.addConstraint(widthSuperView3Constraint)
        
        let heightSuperView3Constraint = NSLayoutConstraint(item: superView3, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant:54)
        self.view.addConstraint(heightSuperView3Constraint)
        
    }
}

A short description of Example :-

There are 4 views added of self.view.

superview is of Red Colour

superview1 is of Yellow Colour

superview2 is of Orange Colour

superview3 is of Green Colour

And One Label added is added to superView

Superview Constraints

superView.translatesAutoresizingMaskIntoConstraints = false
let topConstraint = NSLayoutConstraint(item: superView, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1, constant: 12)
        self.view.addConstraint(topConstraint)

translatesAutoresizingMaskIntoConstraints:- If you want to use Auto Layout to dynamically calculate the size and position of your view, you must set this property to false, and then provide a non-ambiguous, nonconflicting set of constraints for the view.

Always read constraint like this, “Apply top of superView to top of self.view on which superView is being added as subview at distance of 12px”. There is a relationship between superview and subview. Suppose one view is added to superView then that view becomes subview of that superView. If the second view is added to superView then that view becomes subView of that superView. If one label is added to the first subview then that subView becomes superview for that label. Now if you apply constraint of second Superview with label directly then you are conflicting the constraint.

let leftConstraint = NSLayoutConstraint(item: superView, attribute: .left, relatedBy: .equal, toItem: self.view, attribute: .left, multiplier: 1, constant: 20)
self.view.addConstraint(leftConstraint)

Always read constraint like this, “Apply left of superView to the left of self.view on which superView is being added as subview at distance of 12px”

let rightConstraint = NSLayoutConstraint(item: superView, attribute: .right, relatedBy: .equal, toItem: self.view, attribute: .right, multiplier: 1, constant: -20)
        self.view.addConstraint(rightConstraint)

Always read constraint like this, “Apply right of superView to right of self.view on which superView is being added as subview at distance of 12px”

let heightConstraint = NSLayoutConstraint(item: superView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 54)
        self.view.addConstraint(heightConstraint)

Always read constraint like this, “Apply height of superView to nil on which superView is being added as subview which is not an attribute of 54px”

Label Constraints

label.translatesAutoresizingMaskIntoConstraints = false

let topLabelConstraint = NSLayoutConstraint(item: label, attribute: .top, relatedBy: .equal, toItem: superView, attribute: .top, multiplier: 1, constant: 12)
        superView.addConstraint(topLabelConstraint)

Always read constraint like this, “Apply top of the label to top of superView on which label is being added as subView at distance of 12px”.

let leftLabelConstraint = NSLayoutConstraint(item: label, attribute: .left, relatedBy: .equal, toItem: superView, attribute: .left, multiplier: 1, constant: 20)
        superView.addConstraint(leftLabelConstraint)

Always read constraint like this, “Apply left of the label to left of superView on which label is being added as subView at distance of 12px”

let rightLabelConstraint = NSLayoutConstraint(item: label, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 300)
        superView.addConstraint(rightLabelConstraint)

Always read constraint like this , “Apply width of label to nil which is notAnAttribute on which label is being added as subView with 300px”

let heightLabelConstraint = NSLayoutConstraint(item: label, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 24)
        superView.addConstraint(heightLabelConstraint)

Always read constraint like this , “Apply height of label to nil which is notAnAttribute on which label is being added as subView with 24px”

SuperView1 Constraints

superView1.translatesAutoresizingMaskIntoConstraints = false

let topSuperView1Constraint = NSLayoutConstraint(item: superView1, attribute: .top, relatedBy: .equal, toItem: superView, attribute: .bottom, multiplier: 1, constant: 12)
        self.view.addConstraint(topSuperView1Constraint)

Always read constraint like this , “Apply top of superView1 to bottom of superView on which superView1 is being added as subView at a distance of 12px”

let leftSuperView1Constraint = NSLayoutConstraint(item: superView1, attribute: .left, relatedBy: .equal, toItem: self.view, attribute: .left, multiplier: 1, constant: 20)
        self.view.addConstraint(leftSuperView1Constraint)

Always read constraint like this , “Apply left of superView1 to left of self.view on which superView1 is being added as subView at a distance of 20px”

let widthSuperView1Constraint = NSLayoutConstraint(item: superView1, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant:120)
        self.view.addConstraint(widthSuperView1Constraint)

Always read constraint like this , “Apply width of superView1 to nil which is notAnAttribute on which superView1 is being added as subView with width of 120px”

let heightSuperView1Constraint = NSLayoutConstraint(item: superView1, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant:54)
        self.view.addConstraint(heightSuperView1Constraint)

Always read constraint like this , “Apply height of superView1 to nil which is notAnAttribute on which superView1 is being added as subView with width of 54px”

This tutorial from codzify.com will give you enough understanding about Autolayout programmatically in iOS App development. Hope you all like it. You can learn many more concepts of iOS App development here.