iOS adding constraints programmatically in Swift - ios

Question

So, I'm done using the IB in Xcode and want to write all UI in Swift.
So what I've done is:
Created a new UIView to contain the elements i want to write - lets call it "TestView"
I've added TestView to a VC as a sub view.
In the TestView class I've added the elements like this:
class TestView: UIView {
var someLabel:UILabel!
override init(frame: CGRect) {
super.init(frame: frame)
self.someLabel = UILabel(frame: CGRect(x: self.frame.midX, y: oneSixthHeight, width: 100, height: 22))
self.someLabel.text = "test"
var constraints:[NSLayoutConstraint] = []
self.someLabel.translatesAutoresizingMaskIntoConstraints = false
let rightsideAnchor:NSLayoutConstraint = NSLayoutConstraint(item: self.someLabel, attribute: .Trailing, relatedBy: .Equal, toItem: self, attribute: .Trailing, multiplier: 1, constant: 1)
constraints.append(rightsideAnchor)
NSLayoutConstraint.activateConstraints(constraints)
}
}
With this I expect the UILabel to be anchored to the right side of the view.
However, I do get this error:
Terminating app due to uncaught exception 'NSGenericException',
reason: 'Unable to activate constraint with items > and > because they have no common ancestor.
Does the constraint reference items in different view hierarchies? That's illegal.'
What am I doing wrong?

Answer 1

You should add constraints only after view is added to the view hierarchy. From your code it is clear that you have not added the UILabel instance to view.

Answer 2

Updated for Swift 3
import UIKit
class ViewController: UIViewController {
let redView: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.backgroundColor = .red
return view
}()
override func viewDidLoad() {
super.viewDidLoad()
setupViews()
setupAutoLayout()
}
func setupViews() {
view.backgroundColor = .white
view.addSubview(redView)
}
func setupAutoLayout() {
// Available from iOS 9 commonly known as Anchoring System for AutoLayout...
redView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20).isActive = true
redView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -20).isActive = true
redView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
redView.heightAnchor.constraint(equalToConstant: 300).isActive = true
// You can also modified above last two lines as follows by commenting above & uncommenting below lines...
// redView.topAnchor.constraint(equalTo: view.topAnchor, constant: 20).isActive = true
// redView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
}
}
Type of Constraints:
/*
// regular use
1.leftAnchor
2.rightAnchor
3.topAnchor
// intermediate use
4.widthAnchor
5.heightAnchor
6.bottomAnchor
7.centerXAnchor
8.centerYAnchor
// rare use
9.leadingAnchor
10.trailingAnchor
etc. (note: very project to project)
*/