How to make Grid Layout Buttons in Custom Editor Window?

Question

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

alt text

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

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

Answer 1

Answer by tcz8 · Apr 12, 2019 at 05:34 PM

No need to reinvent the wheel.

Please see: GUILayout.SelectionGrid

Add comment · Show 2 · Share

avvie · Jul 29, 2020 at 08:28 AM 0

Share

That doesnt really work. it just lets you know what was the last one that was clicked. So you can know about something being clicked if the index changes. If you need to detect multiple clicks on the same button consecutively it wont help

TribalInstincts avvie · Mar 21 at 10:58 PM 0

Share

Old, but for future readers, you can use this like buttons by having the value set as -1 at the on each draw then grabbing the change:

 string[] options = new[] {"UL", "UC", "UR", "CL", "CC", "CR", "BL", "BC", "BR"};
 int selected = GUILayout.SelectionGrid(-1, options, 3);
 if (selected > -1)
 {
     Debug.Log("Selected: " + options[selected]);    
 }

Answer 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 ();
 }

alt text

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:

alt text

How to make Grid Layout Buttons in Custom Editor Window?

2 Replies

Your answer

Follow this Question

Related Questions