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 trial

iOS Introduction to Auto Layout in iOS Auto Layout in Code Layout Anchors

Danny Kilkenny
Danny Kilkenny
4,507 Points
Posted by Danny Kilkenny
Danny Kilkenny
4,507 Points

Layout 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])
 */
    }
Lukas G.
Lukas G.
4,842 Points
Lukas G.
Lukas G.
4,842 Points

I 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...

Gillian Reynolds-Titko
Gillian Reynolds-Titko
6,021 Points
Gillian Reynolds-Titko
Gillian Reynolds-Titko
6,021 Points

Danny, 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
David Lin
35,864 Points
David Lin
David Lin
35,864 Points

The 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
bader alkanderi
4,544 Points
bader alkanderi
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
KOJI NAKAGAWA
11,261 Points
KOJI NAKAGAWA
KOJI NAKAGAWA
11,261 Points

Hello 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)
    ])
}