Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Demonstrating Layout Anchors on iOS
//: 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment