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?

Vulgarize

set constraints on buttons and set stackview distribution as fill porportionally. – Skeet

If I try to add a constraint to a subview while in a stackview I get countless conflicting constraint errors – Vulgarize

Set constraint to your stack view first then on buttons set width and height constraints.it was working when i tried that. – Skeet

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.

Hershey

Works like a charm. The same technique also works for horizontal stack views containing elements which have an unequal size. – Nesmith

Alignment doesn't have to be centred, it can be leading or trailing, etc. – Shaky

Surprisingly doesn't work for UIView's. I've tried the same approach for UIView even I've given same constraint values. Thought when I changed them to UIButton. It was working. Can some one suggest how to make the same to work for UIView. Alignment = center doesn't help either. – Casta

@YashBedi Change Distribution property to Fill and Alignment to Center. Time has come to move on from StackView to the new SwiftUI... – Hershey

Yep got it working yesterday, before your comment ;-P. Thanks anyways... – Casta

@YashBedi... Yes... Actually Fill Proportionally does not make sense, though it was working for UIButtons... – Hershey

Doesn't work for UILabels. I want to use dynamic width for label. I have 3 labels on the horizontal axis, want to set the width of left and right label to <= 0.45 multiplier of superview and fill the center label to remaining width – Isochronism

@hacker_1989, did you figure out how to do it with labels? – Acknowledge

Answer 2

For those who are looking a solution for UIView, Here it is,

UIStackView ensures that its arranged subviews maintain the same proportion to each another as your layout grows and shrinks. However, unlike the other distribution options, views that are proportional must have an intrinsic content size.

Casta