AutoLayout by code
2018, Oct 15
AutoLayout by code
Basic Setup
let firstView = UIView()
let secondView = UIView()
override func viewDidLoad() {
super.viewDidLoad()
firstView.backgroundColor = .darkGray
secondView.backgroundColor = .blue
view.addSubview(firstView)
firstView.addSubview(secondView)
setupAutoresizingMask()
activeNSLayoutConstraintConstaints()
activateVisualFormat()
activeLayoutAnchors()
}
Using setupAutoresizingMask
private func setupAutoresizingMask() {
firstView.frame = CGRect(x: 50, y: 50, width: view.bounds.width - 100, height: view.bounds.height - 100)
secondView.frame = CGRect(x: 25, y: 25, width: firstView.bounds.width - 50, height: firstView.bounds.height - 50)
firstView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
secondView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
}
Using NSLayoutConstraint (iOS 6.0 부터 사용됨)
private func activeNSLayoutConstraintConstaints() {
firstView.translatesAutoresizingMaskIntoConstraints = false // 반드시 false로 시작
secondView.translatesAutoresizingMaskIntoConstraints = false
// firstView <-> View
NSLayoutConstraint(item: firstView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1, constant: 50).isActive = true
NSLayoutConstraint(item: firstView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1, constant: 50).isActive = true
NSLayoutConstraint(item: firstView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1, constant: -50).isActive = true
NSLayoutConstraint(item: firstView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1, constant: -50).isActive = true
// secondView <-> firstView
NSLayoutConstraint(item: secondView, attribute: .top, relatedBy: .equal, toItem: firstView, attribute: .top, multiplier: 1, constant: 50).isActive = true
NSLayoutConstraint(item: secondView, attribute: .leading, relatedBy: .equal, toItem: firstView, attribute: .leading, multiplier: 1, constant: 50).isActive = true
NSLayoutConstraint(item: secondView, attribute: .trailing, relatedBy: .equal, toItem: firstView, attribute: .trailing, multiplier: 1, constant: -50).isActive = true
NSLayoutConstraint(item: secondView, attribute: .bottom, relatedBy: .equal, toItem: firstView, attribute: .bottom, multiplier: 1, constant: -50).isActive = true
}
Using activateVisualFormat (iOS 6.0 부터 사용됨)
private func activateVisualFormat() {
firstView.translatesAutoresizingMaskIntoConstraints = false
secondView.translatesAutoresizingMaskIntoConstraints = false
let views: [String: Any] = ["firstView": firstView, "secondView":secondView]
let metrics: [String: Any] = ["margin": 50]
var allConstraints: [NSLayoutConstraint] = []
allConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-margin-[firstView]-margin-|", metrics: metrics, views: views)
allConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-margin-[firstView]-margin-|", metrics: metrics, views: views)
allConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-30-[secondView]-30-|", metrics: nil, views: views)
allConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-30-[secondView]-30-|", metrics: nil, views: views)
NSLayoutConstraint.activate(allConstraints)
}
Visual Format Syntax(이유는 모르겠으나 링크가 이상함. 필요한분은 하단링크 복/붙으로 이동하시길) https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/VisualFormatLanguage.html
Using activateLayoutAnchors (iOS 9.0)
private func activelayoutAnchors() {
firstView.translatesAutoresizingMaskIntoConstraints = false
firstView.topAnchor.constraint(equalTo: view.topAnchor, constant: 50).isActive = true
firstView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 50).isActive = true
firstView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -50).isActive = true
firstView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -50).isActive = true
secondView.translatesAutoresizingMaskIntoConstraints = false
secondView.topAnchor.constraint(equalTo: firstView.topAnchor, constant: 50).isActive = true
secondView.leadingAnchor.constraint(equalTo: firstView.leadingAnchor, constant: 50).isActive = true
secondView.trailingAnchor.constraint(equalTo: firstView.trailingAnchor, constant: -50).isActive = true
secondView.bottomAnchor.constraint(equalTo: firstView.bottomAnchor, constant: -50).isActive = true
}