Demonstrating Layout Anchors on iOS

iOS Layout Anchors.swift

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

import UIKit
import XCPlayground

XCPlaygroundPage.currentPage.needsIndefiniteExecution = true

var container = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
container.backgroundColor = UIColor.greenColor()
XCPlaygroundPage.currentPage.liveView = container

// First label - centered
var moneyFace = UILabel()
moneyFace.font = UIFont.systemFontOfSize(100)
moneyFace.text = "🤑"
moneyFace.textAlignment = .Center
moneyFace.backgroundColor = UIColor.blackColor()
moneyFace.translatesAutoresizingMaskIntoConstraints = false

container.addSubview(moneyFace)

container.centerXAnchor.constraintEqualToAnchor(moneyFace.centerXAnchor).active = true
container.centerYAnchor.constraintEqualToAnchor(moneyFace.centerYAnchor).active = true

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

container.addSubview(moneyBag)

moneyBag.topAnchor.constraintEqualToAnchor(container.layoutMarginsGuide.topAnchor).active = true
moneyBag.leftAnchor.constraintEqualToAnchor(container.leftAnchor).active = true

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

container.addSubview(flyingMoney)

flyingMoney.bottomAnchor.constraintEqualToAnchor(container.layoutMarginsGuide.bottomAnchor).active = true
flyingMoney.rightAnchor.constraintEqualToAnchor(container.layoutMarginsGuide.rightAnchor).active = true

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

container.addSubview(redLine)

redLine.heightAnchor.constraintEqualToConstant(10).active = true
redLine.widthAnchor.constraintEqualToAnchor(container.widthAnchor).active = true
redLine.bottomAnchor.constraintEqualToAnchor(container.bottomAnchor).active = true

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

container.insertSubview(blueishBackground, atIndex: 0)

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

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