Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialDanny Kilkenny
4,507 PointsLayout Anchor Self Guided Challenge
Hello,
Did anyone complete the challenge at the end of the Layout Anchor video from "Introduction to Auto Layouts"? I have some code but it doesn't seem to be working and I'm confused on when to add the ".layoutMarginsGuide" and just how to match up the anchors correctly.
Thanks, Danny
func setupPurpleViewConstraints() {
purpleView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
purpleView.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor, constant: 8.0),
purpleView.bottomAnchor.constraint(equalTo: view.topAnchor, constant: -8.0),
purpleView.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor, constant: -8.0),
purpleView.topAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor, constant: 8.0)
])
/*
let purpleViewLeadingSpaceConstraint = NSLayoutConstraint(item: purpleView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leadingMargin, multiplier: 1.0, constant: 8.0)
let purpleViewBottomSpaceConstraint = NSLayoutConstraint(item: purpleView, attribute: .bottom, relatedBy: .equal, toItem: orangeView, attribute: .top, multiplier: 1.0, constant: -8.0)
let purpleViewTrailingSpaceConstraint = NSLayoutConstraint(item: purpleView, attribute: .trailing, relatedBy: .equal, toItem: blueView, attribute: .leading, multiplier: 1.0, constant: -8.0)
let purpleViewTopSpaceConstraint = NSLayoutConstraint(item: purpleView, attribute: .top, relatedBy: .equal, toItem: self.topLayoutGuide, attribute: .bottom, multiplier: 1.0, constant: 8)
view.addConstraints([
purpleViewLeadingSpaceConstraint,
purpleViewTopSpaceConstraint,
purpleViewBottomSpaceConstraint,
purpleViewTrailingSpaceConstraint
])
*/
}
func setupBlueViewConstraints() {
blueView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
blueView.topAnchor.constraint(equalTo: view.bottomAnchor, constant: 8.0),
blueView.bottomAnchor.constraint(equalTo: view.topAnchor, constant: -8.0),
blueView.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor, constant: -8.0),
blueView.widthAnchor.constraint(equalToConstant: 0.0)
])
/*
let blueViewTopSpaceConstraint = NSLayoutConstraint(item: blueView, attribute: .top, relatedBy: .equal, toItem: self.topLayoutGuide, attribute: .bottom, multiplier: 1.0, constant: 8.0)
let blueViewBottomSpaceConstraint = NSLayoutConstraint(item: blueView, attribute: .bottom, relatedBy: .equal, toItem: orangeView, attribute: .top, multiplier: 1.0, constant: -8.0)
let blueViewTrailingSpaceConstraint = NSLayoutConstraint(item: blueView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailingMargin, multiplier: 1.0, constant: -8.0)
let equalWidthConstraints = NSLayoutConstraint(item: blueView, attribute: .width, relatedBy: .equal, toItem: purpleView, attribute: .width, multiplier: 1.0, constant: 0.0)
view.addConstraints([blueViewTopSpaceConstraint, blueViewBottomSpaceConstraint, blueViewTrailingSpaceConstraint, equalWidthConstraints])
*/
}
Gillian Reynolds-Titko
6,021 PointsDanny, here is my code (i'm using Swift 2.3). I use constraintEqualToAnchor. My code almost works, except that the constant on 8.0 for the layoutMarginsGuide.topAnchor pushes the purple rectangle further into the status bar.
func setupPurpleViewConstraints() {
purpleView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activateConstraints([purpleView.leadingAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.leadingAnchor, constant: 8.0),
purpleView.bottomAnchor.constraintEqualToAnchor(orangeView.topAnchor, constant: -8.0),
purpleView.trailingAnchor.constraintEqualToAnchor(blueView.leadingAnchor, constant: -8.0),
purpleView.topAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.topAnchor, constant: 8.0)])
}
3 Answers
David Lin
35,864 PointsThe following works perfectly for me:
func setupOrangeViewConstraints() {
orangeView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activateConstraints([
orangeView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor),
orangeView.bottomAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.bottomAnchor, constant: -50.0),
orangeView.heightAnchor.constraintEqualToConstant(57.0),
orangeView.widthAnchor.constraintEqualToConstant(200.0)])
}
func setupPurpleViewConstraints() {
purpleView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activateConstraints([
purpleView.leadingAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.leadingAnchor, constant: 8.0),
purpleView.bottomAnchor.constraintEqualToAnchor(orangeView.topAnchor, constant: -8.0),
purpleView.trailingAnchor.constraintEqualToAnchor(blueView.leadingAnchor, constant: -8.0),
purpleView.topAnchor.constraintEqualToAnchor(self.topLayoutGuide.bottomAnchor, constant: 8.0)])
}
func setupBlueViewConstraints() {
blueView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activateConstraints([
blueView.trailingAnchor.constraintEqualToAnchor(view.layoutMarginsGuide.trailingAnchor, constant: -8.0),
blueView.bottomAnchor.constraintEqualToAnchor(orangeView.topAnchor, constant: -8.0),
blueView.widthAnchor.constraintEqualToAnchor(purpleView.widthAnchor, constant: 0.0),
blueView.topAnchor.constraintEqualToAnchor(self.topLayoutGuide.bottomAnchor, constant: 8.0)])
}
bader alkanderi
4,544 Points// this is my answer it worked with me , regards
class MyViewController: UIViewController {
let blueView = UIView()
let greenView = UIView()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(greenView)
view.addSubview(blueView)
}
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
blueView.translatesAutoresizingMaskIntoConstraints = false
greenView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activateConstraints([
NSLayoutConstraint(item: blueView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 100.0),
NSLayoutConstraint(item: blueView, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 150.0),
NSLayoutConstraint(item: blueView, attribute: .Left, relatedBy: .Equal, toItem: view, attribute: .LeftMargin, multiplier: 1.0, constant: 8.0),
NSLayoutConstraint(item: blueView, attribute: .Top, relatedBy: .Equal, toItem: self.topLayoutGuide, attribute: .Bottom, multiplier: 1.0, constant: 8.0),
NSLayoutConstraint(item: blueView, attribute: .Right, relatedBy: .Equal, toItem: view, attribute: .RightMargin, multiplier: 1.0, constant: -8.0),
// Add constraint code below
NSLayoutConstraint(item: greenView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 75.0),
NSLayoutConstraint(item: greenView, attribute: .Left, relatedBy: .Equal, toItem: view, attribute: .LeftMargin, multiplier: 1.0, constant: 8.0),
NSLayoutConstraint(item: greenView, attribute: .Bottom, relatedBy: .Equal, toItem: self.topLayoutGuide, attribute: .Top, multiplier: 1.0, constant: 8.0),
NSLayoutConstraint(item: greenView, attribute: .Right, relatedBy: .Equal, toItem: view, attribute: .RightMargin, multiplier: 1.0, constant: -8.0)
])
}
}
KOJI NAKAGAWA
11,261 PointsHello Danny,
Did you find an answer already?
In regards to the layoutMarginsGuide, as far as I understand, you need it only when you need margin (for this case: leading margin or trailing margin)
For the layout, if you get constraint from correct view, it should work. for example, for the case of below code, you got constant -8.0 from top of the orangeView, not View.
purpleViewBottomSpaceConstraint = NSLayoutConstraint(item: purpleView, attribute: .bottom, relatedBy: .equal, toItem: orangeView, attribute: .top, multiplier: 1.0, constant: -8.0)
therefore, if you put not View.topAnchor but orangeView.topAnchor it should work.
purpleView.bottomAnchor.constraint(equalTo: orangeView.topAnchor, constant: -8.0),
here is my answer and it worked (Swift3)
func setupOrangeViewConstraints(){
orangeView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
orangeView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
orangeView.bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor, constant: -50.0),
orangeView.heightAnchor.constraint(equalToConstant: 57.0),
orangeView.widthAnchor.constraint(equalToConstant: 200.0)
])
}
func setupPurpleViewConstraints(){
purpleView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
purpleView.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor, constant: 8.0),
purpleView.bottomAnchor.constraint(equalTo: orangeView.topAnchor, constant: -8.0),
purpleView.trailingAnchor.constraint(equalTo: blueView.leadingAnchor, constant: -8.0),
purpleView.topAnchor.constraint(equalTo: self.topLayoutGuide.bottomAnchor, constant: 8.0)
])
}
func setupBlueViewConstraints() {
blueView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
blueView.topAnchor.constraint(equalTo: self.topLayoutGuide.bottomAnchor, constant: 8.0),
blueView.bottomAnchor.constraint(equalTo: orangeView.topAnchor, constant: -8.0),
blueView.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor, constant: -8.0),
blueView.widthAnchor.constraint(equalTo: purpleView.widthAnchor)
])
}
Lukas G.
4,842 PointsLukas G.
4,842 PointsI also tried it and it did not work out. Looks like you are also working with Swift 3 and so am I. Maybe thats why? Although I don't really see how that would explain it...