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 Using Layout Anchors

Martel Storm
Martel Storm
4,157 Points

Using Layout Anchors: I must be super close to the right answer! Little help?

I'm retarded

layout.swift
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.activate([
            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.activate([
            greenView.topAnchor.constraint(equalTo: blueView.bottomAnchor, constant: 8.0),
            greenView.leftAnchor.constraint(equalTo: view.layoutMarginsGuide.leftAnchor, constant: 8.0),
            greenView.rightAnchor.constraint(equalTo: view.layoutMarginsGuide.rightAnchor, constant: 8.0),
            greenView.heightAnchor.constraint(equalToConstant: 75)
            ])

    }
}

1 Answer

Martel,

Here is the code that I got to pass the challenge:

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.activate([
            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.activate([
        greenView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 8),
        greenView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 8),
        greenView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 8),
        greenView.heightAnchor.constraint(equalToConstant: 75.0)
        ])

    }
}

When activating the constraints, you don't need to use the layout guide to get the anchors. These can be accessed directly from the "view" property. If you have any questions, feel free to ask.