NSLayoutConstraint in playground

Question

I'm trying to reproduce a scenario like this where the red and blue rectangles can occupy same width and height (and same gap between them) for different screen sizes.

I'm using NSLayoutConstraint (I know that anchors are preferred now, just trying to explore the basics). I tried the following code in swift playground:

import Foundation
import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {
    var firstColorView:  UIView!
    var secondColorView: UIView!

    override func viewWillAppear(_ animated: Bool) {
        var myView: UIView!
        myView = view
        myView.backgroundColor = .white

        firstColorView = UIView()
        secondColorView = UIView()
        firstColorView.backgroundColor = .red
        secondColorView.backgroundColor = .blue

        myView.addSubview(firstColorView)
        myView.addSubview(secondColorView)


        //myView.translatesAutoresizingMaskIntoConstraints = false
        //view.addSubview(myView)

        //  horizontal constraints
        let left_constraint = NSLayoutConstraint(item: firstColorView, attribute: .leftMargin, relatedBy: .equal, toItem: myView, attribute: .left, multiplier: 1.0, constant: 20)
        let middle_constraint = NSLayoutConstraint(item: secondColorView, attribute: .leftMargin, relatedBy: .equal, toItem: firstColorView, attribute: .right, multiplier: 1.0, constant: 10)
        let right_constraint = NSLayoutConstraint(item: myView, attribute: .rightMargin, relatedBy: .equal, toItem: secondColorView, attribute: .right, multiplier: 1.0, constant: 20)
        let width_constraint = NSLayoutConstraint(item: firstColorView, attribute: .width, relatedBy: .equal, toItem: secondColorView, attribute: .width, multiplier: 1.0, constant: 0)

        // vertical constraints
        let top_constraint1 = NSLayoutConstraint(item: firstColorView, attribute: .top, relatedBy: .equal, toItem: myView, attribute: .top, multiplier: 1.0, constant: 10)
        let top_constraint2 = NSLayoutConstraint(item: secondColorView, attribute: .top, relatedBy: .equal, toItem: myView, attribute: .top, multiplier: 1.0, constant: 10)
        let bottom_constraint1 = NSLayoutConstraint(item: myView, attribute: .bottom, relatedBy: .equal, toItem: firstColorView, attribute: .bottom, multiplier: 1.0, constant: 10)
        let bottom_constraint2 = NSLayoutConstraint(item: myView, attribute: .bottom, relatedBy: .equal, toItem: secondColorView, attribute: .bottom, multiplier: 1.0, constant: 0)

        NSLayoutConstraint.activate([left_constraint, middle_constraint, right_constraint, width_constraint, top_constraint1, top_constraint2, bottom_constraint1, bottom_constraint2])
        self.view.layoutIfNeeded()
    }
}


// Present the view controller in the Live View window
PlaygroundPage.current.needsIndefiniteExecution = true
PlaygroundPage.current.liveView = MyViewController()

But all it shows is a white screen, whose width doesn't match an iphone's. What am I doing wrong here? Why can't I see the red and blue screen?

score 3 · Answer 1 · answered Apr 04 '21 at 15:32

3

You miss

firstColorView.translatesAutoresizingMaskIntoConstraints = false  
secondColorView.translatesAutoresizingMaskIntoConstraints = false

answered Apr 04 '21 at 15:32

Shehata Gamal

98,760
8
65
87

Thanks! I see from [here](https://stackoverflow.com/a/48244049/1204781) that this property is true for storyboards and nib based views, while false for programmatically created views. That seems odd, isn't it. Auto layout is the recommended solution now, not sure why autoresizing will be used by default. – sudeepdino008 Apr 04 '21 at 16:53

NSLayoutConstraint in playground

1 Answers1