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 Blues and Purples

My purple and blue views aren't showing up. What is wrong?

I've been copying most of the code Pasaan shows but the purple and blue views aren't there. Only my orange view shows up. Can you explain? Oh, and can someone explain why ".topLayoutGuide" isn't showing up on my compiler. If it is just that I have a new iOS style, just say it. Thanks!

6 Answers

Simon Di Giovanni
Simon Di Giovanni
8,429 Points

Ok so thanks for sending your code!

I have checked it and found your problem. In the 'viewDidLoad' method, you've given a colour for the orange view, but not the purple and blue views!

You also need to 'add' the views using view.addSubview()

So, your 'viewDidLoad' method should look like this -

 override func viewDidLoad() {
     super.viewDidLoad()

     orangeView.backgroundColor = UIColor(red: 255/255.0, green: 148/255.0, blue: 0/255.0, alpha: 1)
     view.addSubview(orangeView)

     purpleView.backgroundColor = UIColor(red: 204/255.0, green: 102/255.0, blue: 255/255.0, alpha: 1)
     view.addSubview(purpleView)

     blueView.backgroundColor = UIColor(red: 102/255.0, green: 204/255.0, blue: 255/255.0, alpha: 1)         
     view.addSubview(blueView)

}

Try that out, and let me know if it works!

Sure! It really helped, Simon!

Simon Di Giovanni
Simon Di Giovanni
8,429 Points

No worries. Glad I could help!

Simon Di Giovanni
Simon Di Giovanni
8,429 Points

Could you please show your code? Then I can check for any inconsistencies.

For this second question - try using .topMargin for the TopSpaceConstraint for both the purple and blue views.

Example -

let blueViewTopSpaceConstraint = NSLayoutConstraint(item: blueView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .topMargin, multiplier: 1.0, constant: 8)

Thanks, but I meant the "self.topLayoutGuide" for the "toItem" parameter. And I can't really show my code. But thanks for trying anyway.

Simon Di Giovanni
Simon Di Giovanni
8,429 Points

So self.topLayoutGuide is deprecated, meaning it is no longer used. The layout guide for the view controller is now called the “safe area”

Regarding this particular video, using. .topMargin will achieve the same result as self.topLayoutGuide

Finallly - why can’t you show your code? Just copy and paste the code, and make sure to check the “markdown cheatsheet” written in bold at the bottom for any tips on pasting your code in.

Okay, Thanks Simon! This is all of the code right after I did your answer :

'''swift import UIKit

class ViewController: UIViewController {

let orangeView = UIView()
let purpleView = UIView()
let blueView = UIView()

override func viewDidLoad() {
    super.viewDidLoad()
    orangeView.backgroundColor = UIColor(red: 255/255.0, green: 148/255.0, blue: 0/255.0, alpha: 1.0)
    view.addSubview(orangeView)
}

override func viewWillLayoutSubviews() {
    setupOrangeViewConstraints()
    setupPurpleViewConstraints()
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

func setupOrangeViewConstraints() {
    orangeView.translatesAutoresizingMaskIntoConstraints = false

    let orangeViewCenterXConstraint = NSLayoutConstraint(item: orangeView, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerXWithinMargins, multiplier: 1.0, constant: 0.0)
    let orangeViewBottomSpaceConstraint = NSLayoutConstraint(item: orangeView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottomMargin, multiplier: 1.0, constant: -50.0)
    let orangeViewHeightConstraint = NSLayoutConstraint(item: orangeView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 57.0)
    let orangeViewWidthConstraint = NSLayoutConstraint(item: orangeView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 200.0)
    view.addConstraints([orangeViewCenterXConstraint, orangeViewBottomSpaceConstraint, orangeViewHeightConstraint, orangeViewWidthConstraint])
}

func setupPurpleViewConstraints() {
    purpleView.translatesAutoresizingMaskIntoConstraints = false

    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 purpleViewTrailingEdgeConstraint = NSLayoutConstraint(item: purpleView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailingMargin, multiplier: 1.0, constant: -8.0)
    let purpleViewTopSpaceConstraint = NSLayoutConstraint(item: purpleView, attribute: .top, relatedBy: .equal, toItem: self.additionalSafeAreaInsets, attribute: .topMargin, multiplier: 1.0, constant: 8.0)
    view.addConstraints([purpleViewBottomSpaceConstraint, purpleViewLeadingSpaceConstraint, purpleViewTrailingEdgeConstraint, purpleViewTopSpaceConstraint])
}

func setupBlueViewConstraints() {
    blueView.translatesAutoresizingMaskIntoConstraints = false

    let blueViewTopSpaceConstraint = NSLayoutConstraint(item: blueView, attribute: .top, relatedBy: .equal, toItem: self.additionalSafeAreaInsets, attribute: .top, multiplier: 1.0, constant: 8)
    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])
}

} '''

And by the way, in my Xcode instead of "self.topLayoutGuide" it's "self.additionalSafeAreaInsets". Just so you know.

Thanks again! This time it does work!

Simon Di Giovanni
Simon Di Giovanni
8,429 Points

No worries! Please mark my answer as best answer so question is resolved!