What is iOS Stack Views

Giorgos Karakatsanis
2 min readApr 25, 2020

Do you know how to use Xcodes new tool called Stack View?

Stack views are a powerful tool for quickly and easily designing your user interfaces. Their attributes allow a high degree of control over how they lay out their arranged views.

Stack View and Auto Layout

The stack view uses Auto Layout to position and size its arranged views. Multiple content can be add , buttons, labels , segmented controls etc.

The stack view aligns the first and last arranged view with its edges along the stack’s axis. In a horizontal stack, this means the first arranged view’s leading edge is pinned to the stack’s leading edge, and the last arranged view’s trailing edge is pinned to the stack’s trailing edge. In vertical stacks, the top and bottom edges are pinned, to the stack’s top and bottom edges respectively.

When you embed the elements you want, suddenly may you think that everything ruin up…

Relax it’s just the first step!

All you have to do is Positioning and Sizing the Stack View

Then starts to taking the desired shape, you can add the constraints , adjusts space between the ui elements and voila!

Set the constaints

From now on, you have no worries about iPhone-iPad different screens. Auto Layout do the job for you. All you have to do is to adjust the Stack View only once.

Although a stack view allows you to layout its contents without using Auto Layout directly, you still need to use Auto Layout to position the stack view, itself. In general, this means pinning at least two, adjacent edges of the stack view to define its position. Without additional constraints, the system calculates the size of the stack view based on its contents.

To sum up, we can gain a lot of time using Stack Views because traditional handle was very difficult and you had to do the same thing with the hard way.One of the common problems is when we want to change an object , it was very hard to set all the things from the begining…With Stack Views , we just put the new object in and everything became to their place, like magic…

--

--