How to make own list UI in Editor Window?

Unity Engine
1

Hi guys,

I am trying to make a list where you can click on items. I want it to be something like Platform selection in build settings (no icons necessary). You can see it below for reference.

Thanks in advance! :slight_smile:

2

In the top menu bar:
GameObject > UI > ScrollView.

You’ll get a canvas (if non exists) which has a scrollview child object, so navigate to Canvas > ScrollView > Viewport > Content. This content object’s dimension controls the scrollbars.
So now you can either set it all up in the inspector or write a script that adds child-objects to the content object and resizes it appropriately. Finally implement some onclick event for the selectable entries in the list in order to highlight the current selection.

3

I appreciate the answer, however I want to use it for and Editor Window and not for UGUI.

4

You mean something like this?

private int selectedIndex=-1;
private Color color_selected = Color.blue;

private void OnGUI()
{
    Color color_default = GUI.backgroundColor;
    var p_list = serializedObject.FindProperty("myList");

    for(int i=0;i<p_list.arraySize;i++)
    {
        GUI.backgroundColor = (selectedIndex == i)?color_selected:color_default;
      
        EditorGUILayout.PropertyField(p_list.GetArrayElementAtIndex(i), false);

        Rect lastRect = GUILayoutUtility.GetLastRect();
        if(GUI.Button(lastRect,,GUIContent.none))
        {
            selectedIndex = i;
        }
    }
}

mind you the blue thats used in that EditorWindow is a Texture swap… not the same style with a blue tinting as done in this example. you can Create a GUIContent that loads in a Texture, or use the exact texture Unity uses via

private static readonly GUIContent c_selectedRow = EditorGUIUtility.IconContent("BuildSettings.SelectedIcon");
1 Like
5

Hi,

It’s almost perfect! However, there is a problem with a serializedObject. The script gives an error: “serializedObject does not exist in the current context”. Any idea how to fix this?

Thanks!

6

Yes its an Editor Window not an Editor, so it doesn’t have a SerializedObject variable by default, since Editor Windows aren’t necessarily tied to Unity Objects like Editors and Property Drawers (through its SerializedProperty).

The code I’ve written wasn’t a full class, just something to point you in the right direction. I was assuming that you were going to be providing the SerializedObject when you created the window. And that you had some experience with writing basic editor scripting. I don’t know the name of the class your list is in or if that class is a Monobehaviour, ScriptableObject, or custom class, as they all would change how the rest of the code would be written.

1 Like
7

I’ve managed to create a desirable list:

Color color_default = GUI.backgroundColor;
Color color_selected = Color.gray;

GUIStyle itemStyle = new GUIStyle(GUI.skin.button);  //make a new GUIStyle

itemStyle.alignment = TextAnchor.MiddleLeft; //align text to the left
itemStyle.active.background = itemStyle.normal.background;  //gets rid of button click background style.
itemStyle.margin = new RectOffset(0, 0, 0, 0); //removes the space between items (previously there was a small gap between GUI which made it harder to select a desired item)

int selectedIndex = -1;

for (int i = 0; i < myList; i++) {
GUI.backgroundColor = (selectedIndex== i) ? color_selected : Color.clear;

//show a button using the new GUIStyle
if (GUILayout.Button(myListp[i].name, itemStyle)) {
  selectedIndex = i;
  //do something else (e.g ping an object)
}

GUI.backgroundColor = color_default; //this is to avoid affecting other GUIs outside of the list
}

Now, if you encapsulate it into a ScrollView, you get something like this:

For my project, I am using a custom GUI skin which replaces a pop-up style button background with a flat style. This is how the list looks like after applying it:

Looks a lot better!

With that said, thank you for your help, @JoshuaMcKenzie

I don’t rely on serialized objects for my Editor Window. I just needed to know how to render the list.

2 Likes