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

Screen Shot 2016-10-08 at 7.10.33 AM.png

Then take all of these, and put them in a stack.

Space them out like so

Screen Shot 2016-10-08 at 7.11.54 AM.png

Screen Shot 2016-10-08 at 7.12.33 AM.png

Repeat the process for each row, and then add them all in one master stack (expect for the top display).

Screen Shot 2016-10-08 at 7.15.21 AM.png

Then do alignment fill and spacing.

Screen Shot 2016-10-08 at 7.16.06 AM.png

Screen Shot 2016-10-08 at 7.16.33 AM.png

And then include that with the top display in yet another stack.

Screen Shot 2016-10-08 at 7.17.12 AM.png

Screen Shot 2016-10-08 at 7.19.46 AM.png

 

Do the autolayout

And now we use the blue lines for the autolayout.

Control drag to the top, left, right, bottom as follows

Screen Shot 2016-10-08 at 7.21.12 AM.png

Screen Shot 2016-10-08 at 7.22.13 AM.png

Screen Shot 2016-10-08 at 7.23.12 AM.png

Cntl – Shot – Click let’s you select select a particular element under the mouse.

Screen Shot 2016-10-08 at 7.23.46 AM.png

Screen Shot 2016-10-08 at 7.25.47 AM.png

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

 

Screen Shot 2016-10-08 at 7.26.28 AM.png

Screen Shot 2016-10-08 at 7.27.20 AM.png

Screen Shot 2016-10-08 at 7.27.58 AM.png

Then do the same for the bottom, but this time select standard view (I don’t know why, just because it’s there)

Screen Shot 2016-10-08 at 7.29.21 AM.png

Screen Shot 2016-10-08 at 7.29.34 AM.png

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.

Screen Shot 2016-10-08 at 7.30.05 AM.png

Screen Shot 2016-10-09 at 6.35.33 AM.png

Screen Shot 2016-10-08 at 7.32.13 AM.png

And all this can be viewed from Paul Hagerty Stanford video at the end of lesson 2.

https://itunes.apple.com/us/course/developing-ios-9-apps-swift/id1104579961