-
-
Save im-jersh/7e0f308d30f1491d9c73639fa82becfd to your computer and use it in GitHub Desktop.
Demonstrating Layout Anchors on iOS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //: Playground - noun: a place where people can play | |
| import UIKit | |
| import PlaygroundSupport | |
| 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 | |
| // 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: 10).isActive = true | |
| redLine.widthAnchor.constraint(equalTo: container.widthAnchor).isActive = true | |
| redLine.bottomAnchor.constraint(equalTo: container.bottomAnchor).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.2) | |
| 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment