autolayout-playground.swift

//: Playground - noun: a place where people can play

import UIKit
import PlaygroundSupport

PlaygroundPage.current.needsIndefiniteExecution = true

var container = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
container.backgroundColor = UIColor.green
PlaygroundPage.current.liveView = container

// First label - centered
var moneyFace = UILabel()
moneyFace.font = UIFont.systemFont(ofSize: 100)
moneyFace.text = "🤑"
moneyFace.textAlignment = .center
moneyFace.backgroundColor = UIColor.black
moneyFace.translatesAutoresizingMaskIntoConstraints = false

container.addSubview(moneyFace)

//container.centerXAnchor.constraint(equalTo: moneyFace.centerXAnchor).isActive = true
//container.centerYAnchor.constraint(equalTo: moneyFace.centerYAnchor).isActive = true

moneyFace.centerXAnchor.constraint(equalTo: container.centerXAnchor).isActive = true
moneyFace.centerYAnchor.constraint(equalTo: container.centerYAnchor).isActive = true

// Second label - top left corner
var moneyBag = UILabel()
moneyBag.font = UIFont.systemFont(ofSize: 100)
moneyBag.text = "💰"
moneyBag.translatesAutoresizingMaskIntoConstraints = false

container.addSubview(moneyBag)

moneyBag.topAnchor.constraint(equalTo: container.layoutMarginsGuide.topAnchor).isActive = true
moneyBag.leftAnchor.constraint(equalTo: container.leftAnchor).isActive = true

// Third label - bottom right corner
var flyingMoney = UILabel()
flyingMoney.font = UIFont.systemFont(ofSize: 100)
flyingMoney.text = "💸"
flyingMoney.translatesAutoresizingMaskIntoConstraints = false

container.addSubview(flyingMoney)

flyingMoney.bottomAnchor.constraint(equalTo: container.layoutMarginsGuide.bottomAnchor).isActive = true
flyingMoney.rightAnchor.constraint(equalTo: container.layoutMarginsGuide.rightAnchor).isActive = true

// Adding a full-length 10pt high red line that will stick to the bottom of the container
var redLine = UIView()
redLine.backgroundColor = UIColor.red
redLine.translatesAutoresizingMaskIntoConstraints = false

container.addSubview(redLine)

redLine.heightAnchor.constraint(equalToConstant: 50).isActive = true
redLine.bottomAnchor.constraint(equalTo: container.layoutMarginsGuide.bottomAnchor, constant: -150).isActive = true
redLine.leftAnchor.constraint(equalTo: container.layoutMarginsGuide.leftAnchor).isActive = true
redLine.trailingAnchor.constraint(equalTo: container.layoutMarginsGuide.centerXAnchor).isActive = true

var yellowLine = UIView()
yellowLine.backgroundColor = UIColor.yellow
yellowLine.translatesAutoresizingMaskIntoConstraints = false

container.addSubview(yellowLine)

yellowLine.heightAnchor.constraint(equalToConstant: 50).isActive = true
yellowLine.topAnchor.constraint(equalTo: redLine.topAnchor, constant: 20).isActive = true
yellowLine.leadingAnchor.constraint(equalTo: redLine.trailingAnchor, constant: 8).isActive = true
yellowLine.trailingAnchor.constraint(equalTo: container.trailingAnchor, constant: -8).isActive = true

var middle = UIView()
middle.backgroundColor = UIColor.gray
middle.translatesAutoresizingMaskIntoConstraints = false

container.addSubview(middle)

middle.heightAnchor.constraint(equalToConstant: container.frame.height).isActive = true
middle.widthAnchor.constraint(equalToConstant: 1).isActive = true
middle.centerXAnchor.constraint(equalTo: container.centerXAnchor).isActive = true



// Adding a semi-transparent background on top of the container (with consideration for margins)
var blueishBackground = UIView()
blueishBackground.backgroundColor = UIColor.blue.withAlphaComponent(0.9)
blueishBackground.translatesAutoresizingMaskIntoConstraints = false

container.insertSubview(blueishBackground, at: 0)

blueishBackground.leftAnchor.constraint(equalTo: container.layoutMarginsGuide.leftAnchor).isActive = true
blueishBackground.rightAnchor.constraint(equalTo: container.layoutMarginsGuide.rightAnchor).isActive = true
blueishBackground.topAnchor.constraint(equalTo: container.layoutMarginsGuide.topAnchor).isActive = true
// For the bottom constraint, we want to move it up a bit because of the red line
blueishBackground.bottomAnchor.constraint(equalTo: container.layoutMarginsGuide.bottomAnchor, constant: -10).isActive = true

// Let's see how this looks like
container.layoutIfNeeded()
container