How to set constraints to stack views?

Question

I'm trying to achieve this layout using the interface builder

I've already tried to embedded the bottom button inside another stackview, also tried to set it out of the stack view but nothing works as expected what have now is this And getting this result

Can someone tell me what constraints are missing or what is wrong with my current constraints?

Answer 1

You usually don't need to add too many constraints to the stack view's arranged subviews. Setting the distribution and alignment correctly is the key. The constraints involving Stop Button are either unnecessary or causing the conflict that you see in the console.

To position the stack view, you just need to pin its top, bottom, leading, trailing edges to the safe area. For example:

Then, set the alignment of all the stack views to "Fill", and the distribution of all the stack views to "Fill Equally".