Stack View constrained to margins leaves no margin

Question

I got some problem that I'm not sure how to solve... I'm working on some lessons which are a little bit old (they are done in Swift 3), and I got a problem with constraints and margins. I'm just following the lesson and it says that for that stack view I need to put following constraints:

After adding constraints to stack view I got this result:

and this is the result I expected:

So my question is Why that stack view goes over margins, and how to fix it. (reminder lesson was in Swift 3 and they got stack view inside the margins)

Winded

You're adding a constraint of 0 to the leading margin, what do you actually expect? – Refinement

I'm expecting this result ibb.co/izWn6K – Winded

I think I know what you want. Please uncheck "Constrain to margins" and then add(select) new constraints. – Burdock

Already tried but it's the same, im thinking about this margins ibb.co/jPLmGK – Winded

What's the difference between your expected result and above screen shot??? – Burdock

Answer 1

Yes. That is confusing. Selecting Constrain to margins used to leave a gap on the sides. Now, when you select Constrain to margins, it constrains your view to the Safe Area but the view extends to the sides when the constant is 0.

To fix it, change your leading and trailing constraints:

1. Open your leading constraint. Click on Safe Area.leading and in the pop up select Superview.
2. Now click on Superview.leading and select Relative to margin and set Constant back to 0.

Repeat this for the trailing constraint.

---

Alternate solution

Alternatively, you can leave your view constrained to the Safe Area and just set the constants to 16 (or -16 depending on the order of the items in the constraint).

Bevbevan

Weird! 1. Isn't this a bug? Or it's somehow by design? 2. It the same when you do through code? or it's only like this on storyboards? – Weigel

@Honey, Constrain to margins should be changed to Constrain to safe area if they're going to change what it does, IMHO. – Bevbevan

Thanks. didn't understand your answer to my 2nd question. If in code I constraint to margins with a constant of 0 would it be constrained to the margins or it would be constrained to the view's anchors itself ie it would work like the storyboard? – Weigel

@Honey, give me an example of how you would constrain to margins with a constant of 0 in code. – Bevbevan

func pinToAllMargins(of view: UIView){ let top = topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor) let leading = leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor) let trailing = trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor) let bottom = bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor) NSLayoutConstraint.activate([top, leading, trailing, bottom]) } – Weigel

@Honey, that works in code. I think the issue is merely how Interface Builder is interpreting Constrain to margins. It really treats it as Constrain to safe area and the fix listed in the answer restores it to how it used to behave. – Bevbevan