How to make Grid Layout Buttons in Custom Editor Window?
I'm trying to making custom window UI something like this:
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.
@modernator24 - Hi, I added an answer for editor GUI layout - see if it helps, or not.
Answer by tcz8 · Apr 12, 2019 at 05:34 PM
No need to reinvent the wheel.
Please see: GUILayout.SelectionGrid
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
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 by eses · Aug 29, 2018 at 10:33 AM
@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 ();
}
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:
No, I'm not talking about UGUI. I'm talking about making UI for Custom Editor Window.
@modernator24 - oh, ok I edited my answer - was too sleepy I guess.
Your answer
Follow this Question
Related Questions
How to set sorting order of UI elements, when Sorting Group doesn't work? 2 Answers
New GUI - Order of elements? 0 Answers
Why is this List only showing one int? 0 Answers
UnityEvents for UI updating, generic way of removing repeated calls in same frame. 0 Answers
Attach UI elements to screen corners 1 Answer