Stack view is handy for displaying things in autolayout. For example say we want to autolayout this here calculator with all it’s buttons.
We are going to do this by taking row of buttons and embedded them in a stack
Then we take the five stacks and stack them together.
Then we are going to stack that whole thing with the blue display in a stack of stacks.
Then we are going to bind the top, bottom, left, and right to the outer edges.
Setup the stacks
So let’s start at the bottom and create a stack of the bottom row like so
Then take all of these, and put them in a stack.
Space them out like so
Repeat the process for each row, and then add them all in one master stack (expect for the top display).
Then do alignment fill and spacing.
And then include that with the top display in yet another stack.
Do the autolayout
And now we use the blue lines for the autolayout.
Control drag to the top, left, right, bottom as follows
Cntl – Shot – Click let’s you select select a particular element under the mouse.
If we want an IBeam or constraint to go all the way to the edge and not just up next to it we can double click on it and change it to 0 points away
Then do the same for the bottom, but this time select standard view (I don’t know why, just because it’s there)
Now when we do this is stretched our upper numbers. Meaning we did something bad with that spacing. We can fix by finding the button alone that top that was set to Fill but should really be Fill Equally.
And all this can be viewed from Paul Hagerty Stanford video at the end of lesson 2.