Dynamic GUI Columns in GUI Area? (C#)

Questions & Answers
1

I’m having a big issue with my GUI. The basic style I’m using is:

GUILayout.BeginArea();
GUILayout.FlexibleSpace();
if(GUILayout.Button){}
if(GUILayout.Button){}
if(GUILayout.Button){}
if(GUILayout.Button){}
GUILayout.FlexibleSpace();
GUILayout.EndArea();

Each time a button is clicked, it is eliminated from the menu. In the end, only one button will remain. It works perfectly if the buttons are listed vertically in one column, but I want the buttons to be larger and in two columns.

My buttons have a pre-set width and height. My GUI Area has a width of 800, my buttons each have a width of 300. How can I make them take up the full space of the GUI Area?

TL;DR: A GUILayout area has buttons that disappear. How can these buttons be divided into columns?

2

You’ll want to look at GUILayout.BeginHorizontal() and GUILayout.BeginVertical()

Begin Vertical creates rows, beginHorizontal creates columns.

Your final script will probably look like this :

GUILayout.BeginArea();
GUILayout.BeginHorizontal(); //side by side columns

GUILayout.BeginVertical(); //Layout objects vertically in each column
... button 1 ...
... button 2 ...
GUILayout.EndVertical();

GUILayout.BeginVertical();
... button 3 ...
... button 4 ...
GUILayout.EndVertical();


GUILayout.EndHorizontal();
GUILayout.EndArea();

This will create a layout like this:

| button1 | button3 |

| button2 | button4 |