Xcode如何在水平堆栈视图中创建方形按钮（宽度等于高度）

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

Answer 2

I think the only thing you are missing is setting the Distribution in Attributes Inspector on your Stack View. Set it to distribute equally as shown in the image below:

To set the height, you simply need to set a height contraint on each button. Click the tie fighter looking icon and set the height for each: