Search code examples
autolayoutproportions

Proportional sizing using equal heights missing constraint


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.

enter image description here enter image description here


Solution

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

    enter image description here

    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:

    enter image description here

    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:

    enter image description here

    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.