002_Autolayout_Introduction_With_Code.swift

import UIKit

class ViewController: UIViewController {
    
    // TOP LEFT
    let view1 : UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .red
        return view
    }()
    
    // TOP RIGHT
    let view2 : UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .red
        return view
    }()
    
    // BOTTOM RIGHT
    let view3 : UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .red
        return view
    }()
    
    // BOTTOM LEFT
    let view4 : UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .red
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        view.addSubview(view1)
        view.addSubview(view2)
        view.addSubview(view3)
        view.addSubview(view4)
        
        // Attach view1 to TOP and LEADING (LEFT) corner
        view1.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
        view1.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
        
        // Attach view2 to TOP and TRAILING (RIGHT) corner
        view2.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
        view2.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
        
        // view1 and view2 same height and width
        view1.widthAnchor.constraint(equalTo: view2.widthAnchor).isActive = true
        view1.heightAnchor.constraint(equalTo: view2.heightAnchor).isActive = true
        
        // Attach view3 to BOTTOM and TRAILING
        view3.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
        view3.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
        
        // Attach view4 to BOTTOM and LEADING
        view4.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
        view4.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
        
        // view2 and view3 same height and width
        view3.widthAnchor.constraint(equalTo: view2.widthAnchor).isActive = true
        view3.heightAnchor.constraint(equalTo: view2.heightAnchor).isActive = true
        
        // view4 and view3 same height and width
        view4.widthAnchor.constraint(equalTo: view3.widthAnchor).isActive = true
        view4.heightAnchor.constraint(equalTo: view3.heightAnchor).isActive = true
        
        // horizontal spacing to view1 and view2
        view1.trailingAnchor.constraint(equalTo: view2.leadingAnchor, constant: -20).isActive = true
        
        // vertical spacing to view1 and view4
        view1.bottomAnchor.constraint(equalTo: view4.topAnchor, constant: -20).isActive = true
    }
}