How Can I have multiple widths and heights of subviews in a UIStackView

Question

Say for example I want to add 3 buttons to a stack view.

Button1 is 200 * 200 (1)

Button2 is 150 * 150 (0.75)

Button3 is 100 * 100 (0.5)

How can I accomplish this in interface builder?

Answer 1

You can do it in the storyboard using stackview

1. Add a stackview with Alignment Center and Distribution Fill.
2. Constraints on stackview is center horizontally and center vertically.
3. Now add three buttons.
4. Constraints on button1 is height and width = 200
5. Constraints on button2 is height and width = 150
6. Constraints on button3 is height and width = 100

The set up is shown in fig:

You are having conflicts because of Alignment Property which in your case it fill. make is center and its done.

Also we can add spacing between buttons. If we set Distribution Equal Spacing and add height constraint to stackview with height more than height of buttons.

This is vertical stackview. You can test the same with horizontal stackview.

Hope it will work for you.