自动布局约束和堆栈视图

Question

I have 12 buttons, and two stackViews, each 6 buttons are in a stack. not all the buttons are shown all the time.

I'm using in some situations, for example:

buttonx.isHidden = true

what I want is that the Top constraint of each button to be always 8 points far from whats above it, knowing that whats above it can be something else in every situation (it can be the upper stack view border or another button's bottom).

so doesn't matter which combination of buttons are showing (".ishidden = false") at that moment, to be always organised one under the other by "8" points.

the first button will be 8 from the stack top border and the 2nd will be 8 from the bottom of the button thats above it and etc...

2- how can make the two stack view appear near each other if the screen is wide enough, and then if the screen is not enough the two stacks to be under one another.

I'm still learning how to use the auto-layout and constraints, help would be very appreciated!!

EDIT: (photo for clarity)

[

So for example in one situation: only button y, d, k, are shown. I want them to appear in the stack view under each other with an equal distance.

Answer 1

First regarding the 8 pts between each button you need to set spacing property of the stackView ( Find it in attributes inspector)

Second according to the sum of widths of the 2 stackViews you can either decide

1- make top equal for stack1&2

2- make top of stack2 equal to bottom of stack1

which can be done programmatically to avoid static widths