Xcode How to create a square button(width equal to height) inside a Horizontal stackview

Question

I have a requirement to create 3 square buttons at bottom of the page. All of them must be aligned and their size should be square.

So far, I have created a horizontal stackview and created autolayout constrains 50 from the left, 50 from the right, 10 from the bottom and set the stackview height as 60.

How can I create square buttons, since the stackview subview width is dynamic and determined at run time?

How can I set an equal aspect ratio for these three buttons?

Answer 1

Don't set the stack view height; let the content determine that.

You haven't said exactly how you want the buttons laid out, but I assume you want them equally distributed.

1. Put the buttons in a horizontal stack view
2. Constrain the leading, trailing and bottom edges of the stack view to the superview
3. Set the stack view's alignment to "Fill" and distribution to "equal spacing"
4. On each button, create an aspect ratio constraint between its width and its height of 1:1
5. If you want a minimum height for the buttons, set a >= height constraint on one of them
6. If you want a fixed height for the buttons, set a = height constraint on one of them