Proportional sizing using equal heights missing constraint

Question

I would like the blue container view to be the same height as the orange container view. I am using proportional sizing to do so (all of these are within a vertical stack)I selected all of the containers then added the equal heights constraint to them. I am confused because there does not seem to be a proportional height constraint for the blue container view. I was able to change the proportional heights of the others just fine.

Answer 1

The layout is exactly what you've specified for the Heights:

Orange: 0.5 * Blue (1/2 Blue Height)
Green:  == Blue
Yellow: == Blue
Purple: == Blue
Grey:   0.5 * Blue (1/2 Blue Height)

If you want "the blue container view to be the same height as the orange container view", you need to set

Orange: == Blue
Green:  == Blue
Yellow: == Blue
Purple: == Blue
Grey:   0.5 * Blue (1/2 Blue Height)

You do not set a "proportional height" constraint on the Blue Container itself, because you've already told the stack view to fit all the views based on those Height constraints.

---

Edit - in response to comment: "I would like the blue itself to be smaller like the orange appears"

If you write this out (or speak it), you can probably answer the question yourself...

I want :

• orange.height equal to blue.height
• grey.height equal to blue.height
• green.height twice as tall as blue.height
• yellow.height twice as tall as blue.height
• purple.height twice as tall as blue.height

So...

Orange: == Blue
Grey:   == Blue
Green:  == Blue * 2.0
Yellow: == Blue * 2.0
Purple: == Blue * 2.0

Maybe this will help you understand...

We don't assign a Height to the Blue view, because we are using the Height of the stack view to arrange its subviews.

So, let's assume the stack view Height is 450-points, either by setting it or by setting Top and Bottom constraints - and it just happens to be 450 because it will give this example nice numbers.

If we have Two views - Blue and Orange - and we want them the same Height, it looks like this:

Very simplified, auto-layout says: "Blue has a Height of 1 unit, Orange is equal to Blue, so it also has a Height of 1 unit. 1 + 1 == 2, for a total of 2 Height units, so divide 450 by 2 and give each view a height of 225"

If we want Orange to be twice as tall as Blue, we constrain Orange.Height = Blue.Height with Multiplier: 2 and we get this:

Auto-layout says: "Blue has a Height of 1 unit, Orange is equal to Blue x 2, so it has a Height of 2 units. 1 + 2 == 3 total Height units... 450 / 3 == 150, so give Blue a Height of 1 x 150 == 150 and give Orange a Height of 150 x 2 == 300".

For your layout, it looks like this:

We now have a total of 9 Height units (1 + 1 + 2 + 2 + 2 + 1), and auto-layout says: "450 / 9 == 50 (per Height unit) ..." and you can see how it lays out the views.