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.
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 :
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.