How to make Grid Layout Buttons in Custom Editor Window?

Questions & Answers
1

I’m trying to making custom window UI something like this:

123571-goal.png

However there’s no such grid feature in Unity’s GUI API. I tried with GUILayout.FlexibleSpace for each column, but it didn’t worked.

I just can’t understand, why Unity made API so complicated and hard to implement such a simple interface? I still get confusing which API to use: GUILayout, EditorGUILayout, EditorGUI.

Even drawing a simple image is not simple :frowning:

Anyway how do I make code for display buttons like my concept art? Any advice will very appreciate it.

3

No need to reinvent the wheel.

Please see: GUILayout.SelectionGrid

2

@modernator24

How about something like this?

void OnGUI () 
{
    GUI.BeginGroup (new Rect (Screen.width * 0.5f, Screen.height * 0.5f, 400, 400));

    GUI.Box (new Rect (0,0,230,230), "Directions");

    
    var off = 20f;
    var px = 20f;
    var py = 20f;

    GUI.Button (new Rect (50+px+off,0+off,50,50), "1");

    GUI.Button (new Rect (0+off,50+py+off,50,50), "2");

    GUI.Button (new Rect (50+px+off,50+py+off,50,50), "3");

    GUI.Button (new Rect (100+px*2f+off,50+py+off,50,50), "4");

    GUI.Button (new Rect (50+px+off,100+py*2+off,50,50), "5");

    GUI.EndGroup ();
}

123577-20189829-recttransform-cross-2.png

GUI.* elements are placed manually (have to use when doing property drawers at least IIRC). GUILayout then again, is not fixed size.

I think in general, just use GUILayout, it is basically auto layout, whereas GUI forces you to manage placements and rects.

First and last line have empty / dummy buttons to make layout work.

Here’s There are probably better ways to do the whole layout, (both first and second example), but this is what I’ve used. In this case, it is made to scale down, but not up:

void OnGUI () 
{
	skin = GUI.skin;

	GUILayout.BeginHorizontal();
	
	GUILayout.Button("", skin.label, GUILayout.ExpandWidth(false),GUILayout.MaxHeight(50f), GUILayout.MaxWidth(50f));
	GUILayout.Button("1", GUILayout.ExpandWidth(false),GUILayout.MaxHeight(50f), GUILayout.MaxWidth(50f));
	GUILayout.Button("", skin.label, GUILayout.ExpandWidth(false),GUILayout.MaxHeight(50f), GUILayout.MaxWidth(50f));

	GUILayout.EndHorizontal();

	GUILayout.BeginHorizontal();
	GUILayout.Button("2", GUILayout.ExpandWidth(false),GUILayout.MaxHeight(50f), GUILayout.MaxWidth(50f));
	GUILayout.Button("3", GUILayout.ExpandWidth(false),GUILayout.MaxHeight(50f), GUILayout.MaxWidth(50f));
	GUILayout.Button("4", GUILayout.ExpandWidth(false),GUILayout.MaxHeight(50f), GUILayout.MaxWidth(50f));
	GUILayout.EndHorizontal();

	GUILayout.BeginHorizontal();
	
	GUILayout.Button("", skin.label, GUILayout.ExpandWidth(false),GUILayout.MaxHeight(50f), GUILayout.MaxWidth(50f));
	GUILayout.Button("5", GUILayout.ExpandWidth(false),GUILayout.MaxHeight(50f), GUILayout.MaxWidth(50f));
	GUILayout.Button("", skin.label, GUILayout.ExpandWidth(false),GUILayout.MaxHeight(50f), GUILayout.MaxWidth(50f));

	GUILayout.EndHorizontal();
}

Result:

123580-20189829-buttons-cross-autolayout.png