How do they match our four criteria above?I’ve read various articles and documentation on Stack Views with Auto Layouts, and I still had problems.
I had to discover where to tap.
Just follow the four steps below using the Storyboard.
Samples of Stack View button menu1.
Using the Storyboard, create a Stack View as shown in (Figure 1).
Set the alignment to Fill and the Distribution to Fill Equally.
Also, set the spacing for subviews that looks good for iPhones and another for iPads.
Play with these values later after you have your buttons all set up.
Figure 1 — Stack View for top right buttons2.
Position the Stack View as in (Figure 2).
Stack Views do not require sizing constraints.
Notice the position of the Stack View.
Constraints set the horizontal position with a Trailing Space and a vertical position with a Top Space.
The children button views determine the size of the Stack View.
You might be tempted to size the Stack View and then position the buttons inside.
I recommend not doing that.
It’s a can of worms.
Figure 2 — Position Stack View3.
Drag your buttons, or other objects, into the Stack View(Figure 3a).
Then make the with of the first one equal to the width of the main screen (Figure 3b).
Next, edit the width to be a percentage of the main screen.
Notice the 0.
Doing this will make all the children in the Stack View have a size that adjusts according to the screen size.
Figure 3a — Buttons in Stack ViewFigure 3b — Button in Stack View with a relative width constraint4.
Add one more constraint to the child (Figure 4).
Select Aspect Ration and make it 1:1.
This will prevent your buttons from skewing.
Add this constraint to all of the children in the Stack View.
Figure 4 — Setting the equal aspect ratioFirst Button ConstraintsThat’s a wrap.
This basic approach to Stack Views and Auto Layouts works in most circumstances.
Look for an upcoming article to see how IBM Watson, Apple CoreML and Google Colab team up to identify Extraterrestrials.
More screenshots are available here:Videos | Notfromearthwww.