Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stack View constrained to margins leaves no margin

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: Given constraints

After adding constraints to stack view I got this result:

Result

and this is the result I expected:

Expected Result

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)

like image 889
Stefan Lukovic Avatar asked Aug 01 '18 13:08

Stefan Lukovic


People also ask

What is constraint to margin?

The “Constrain to margins” checkbox determines whether constraints to the superview use the superview's margins or its edges. The lower portion of the popover lets you set the item's width or height. The Width and Height constraints default to the current canvas size, though you can type in different values.

How do you add constraints in stack view?

fill distribution creates constraints attaching the top of the first arranged subview to the top of the stack view, and the bottom of the last arranged subview to the bottom of the stack view. It also creates a constraint between the top/bottom of adjacent subviews with the spacing of the stack view.

How do I add padding to UIStackView?

Use fixed-width views as a spacer by inserting them before and after the horizontal stack view. Embed horizontal stack view in another container view and define constraints there. Use custom UIStackView spacing for vertical padding.

What is UIStackView?

A streamlined interface for laying out a collection of views in either a column or a row.


1 Answers

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).

like image 100
vacawama Avatar answered Sep 19 '22 22:09

vacawama