Unity GUI : splitting vertical layout group by ratio

Question

In the picture above, I would like to fix the ratio of 'a' and 'b. 'A' is a 2, 'b' is definitively 1. What should I do?

Answer 1

Sure, this is precisely what the VerticalLayoutGroup is for. (You also have HorizontalLayoutGroup for the other direction.)

First. Make a panel which will hold your two things. Give it a yellow background so you can see it clearly. This will be your "holder".

Completely delete your red/blue things. Make sure the yellow holder is exactly the overall size you want it to be. Make sure you test that, with, the screen changing shape. No matter what condition the screen is in and no matter what aspect ratio the screen is, your yellow holder should be perfect

Next, put a VerticalLayoutGroup on the yellow holder.

Then actually on EACH OF YOUR THINGS (there are two of them in your case), put a LayoutElement

Next you must set the PreferredHeight of your two things. (Where it shows "35" in that example image.)

In your case, choose two numbers such as say

200

100

for the PreferredHeight for your red and blue items.

Experiment with different values and you will see it change in the editor in realtime.

A full tutorial on using Unity's reactive layout system is beyond the scope of a QA page. The above will get you started.

Unity's reactive layout system for .UI is excellent. IMO it's better than Apple's system (Apple's "constraints" system), for example.