How Autolayout constraint First Item and Second Item works?

Question

If I have UIView with top 100 left 120 right 120 how exactly First Item and Second Item relationship work. After going through Apple document each relationship has a linear equation with an expression as.

firstItem.firstItemAttribute == secondItem.secondItemAttribute * multiplier + constant

With this equation for top leading constraint with relation

• First Item Safe Area.Leading
• Relation =
• Second Item = MyView.Leading
• Constant 120

with equation the First Item And Second Item I understood. But Problem for me in understanding when I do the reverse the second item constant changes to - 120 and layout has no effect after the change. Why negative has no effect and what is its use for? Xcode provides a set of properties for FirstItem & SecondItem like leading, center, trailing when we need to switch this properties.

Answer 1

• First Item = Safe Area.Leading --- that's the "left edge" of the Safe Area
• Second Item = MyView.Leading --- that's the "left edge" of your view

So, "left edge" of the Safe Area to "left edge" of your view equals 120 , or, your view is 120 pts from the Safe Area (to the right).

• First Item = MyView.Leading --- that's the "left edge" of your view
• Second Item = Safe Area.Leading --- that's the "left edge" of the Safe Area

So, "left edge" of your view to "left edge" of the Safe Area equals -120 , or, the left edge of Safe Area is -120 pts from your view (to the left).

If you change -120 to 120 , that would put the left edge of the Safe Area +120 pts, or 120 pts to the right, of your view's left edge, which would push the view off the screen to the left.

Edit:

For a little more clarity...

With "SafeArea.Leading -> myView.Leading", you are saying "put myView's left edge 120-pts from the left edge of the Safe Area"

When you swap them to "myView.Leading -> SafeArea.Leading", you are saying "put SafeArea's left edge minus 120-pts from the left edge of myView" .

---

In general, when using Interface Builder, you leave the order alone... because you are visually laying out your elements, and IB knows how to define the constraints.

More often where you will see a difference, is when setting up constraints in code.

For example, to put a subview (red) inside a containing view (blue), with 20-pts padding on all four sides like this:

your code might look like this:

    let myContainerView = UIView()
    myContainerView.translatesAutoresizingMaskIntoConstraints = false
    myContainerView.backgroundColor = .blue

    // add container view to self view
    view.addSubview(myContainerView)

    // constrain container view center X and Y, width and height both 240-pts
    NSLayoutConstraint.activate([

        myContainerView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0.0),
        myContainerView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0.0),
        myContainerView.widthAnchor.constraint(equalToConstant: 240.0),
        myContainerView.heightAnchor.constraint(equalToConstant: 240.0),

        ])

    let myInnerView = UIView()
    myInnerView.translatesAutoresizingMaskIntoConstraints = false
    myInnerView.backgroundColor = .red

    // add inner view to container view
    myContainerView.addSubview(myInnerView)

    // constrain inner view with 20-pts padding on all four sides
    NSLayoutConstraint.activate([

        // top and left are 20-pts from superview top and left
        myInnerView.topAnchor.constraint(equalTo:
            myContainerView.topAnchor, constant: 20.0),
        myInnerView.leadingAnchor.constraint(equalTo:
            myContainerView.leadingAnchor, constant: 20.0),

        // bottom and right are *minus* 20-pts from superview bottom and right
        myInnerView.bottomAnchor.constraint(equalTo:
            myContainerView.bottomAnchor, constant: -20.0),
        myInnerView.trailingAnchor.constraint(equalTo:
            myContainerView.trailingAnchor, constant: -20.0),

        ])

You will note that the trailing and bottom constraints of the inner view must be negative, because you want them to be 20-pts away from the trailing and bottom edges of the container view.