How to set label text away from edge of view in a stackview embedded in scrollview where 'equal widths' is set?

Question

After a frustrating few hours trying to get a stackview of labels containing text to be constrained to the vertical edges of the screen while allowing scrolling up and down I managed it. However I want the text to be set away from the edge of the screen - it looks awkward the way it is. The problem is that I currently have an 'equal widths' constraint set so that the stackview is constrained to avoid horizontal scrolling. When I add further constraints to the view it conflicts.

This is what it looks like on screen:

And this is what the set up in interface builder looks like:

What is the most straightforward way to squeeze that text in slightly away from the screen edges? I can space the labels from each other easily enough using the Spacing option of the stackview but can't find an easy solution to space it from the vertical edges without removing the 'equal widths' constraint which messes the whole thing up:/

Answer 1

Embed your stackview in another view with your desired top, leading, bottom and trailing constraints. For the view in which you embed the stackview set top, leading, bottom, trailing constraints to scrollview with value 0, plus set equal width with your main view. For scrollview top, leading, bottom and trailing constraints of 0 to main view. In that way your embedding view will determine the width for scrollview, and provide leading and trailing for the stack view.

Answer 2

To set a proportional value (versus an equal value) click on the Edit option next to constraint titled Equal Width to:

This will cause a little popup to appear. Under multiplier you can set a proportional width. For instance, if you want something to take up 50% of the screen you would set multiplier=0.5.

Note: Here it's already called Proportional Width, the title will change when you set the multiplier.