RSS

Unity3D: using ReorderableList in Custom Editor

21 Jul

ReorderableList is not a widely used class in Unity3D, but good use of it can make your custom editor more professional.

ReorderableList[5]

This article walks through the typical use of ReorderableList.

  • Create a class, let’s call it Country:

image

  • Create a MonoBehaviour class, define a list of Countries in it

image

  • Now create a custom Editor

image

    • Declare a ReorderableList instance (1)
    • Associate this instance with the List<Country> SupportedLanguageList instance in previous MonoBehaviour class
    • Call the DoLayoutList() function in OnInspectorGUI() function

  • Now your UI should look like this:

ReorderableList

Now we can do several enhancement upon this default UI:

Add below code in OnEnable function of your custom Editor to fine tune the appearance:

image

Now your UI should look like this:

image

Now Let’s change the header of this control:

image

Now your UI should look like this:

image

And you have definite unlimited degree to customize this sortable, draggable list!

  • It should be note that in your model class (e.g. Country in this case), you must define the exposed field as public field, not a property! Otherwise, when calling

var name = element.FindPropertyRelative(“Name”);

you will get null!

  • It should also be note that you should include the namespace:

using UnityEditorInternal;

 
2 Comments

Posted by on July 21, 2015 in Programming, Unity 3d

 

Tags: , , , , , , ,

2 responses to “Unity3D: using ReorderableList in Custom Editor

  1. tommycore

    July 6, 2019 at 7:20 pm

    Good article. One minor detail though:
    “It should be note that in your model class (e.g. Country in this case), you must define the exposed field as public field, not a property!” Good, clean practice would be to use a private field with [SerializeField] attribute and a property to access the field via code., i.e.

    [ SerializeField ]
    private bool isGmOnlyViewable = true;
    public bool IsGmOnlyViewable { get => isGmOnlyViewable; set => isGmOnlyViewable = value; }

     
  2. marcusdaun

    August 8, 2019 at 3:31 am

    Awesome article! But what would one need to do to make the list unfoldable. To save room in the inspector when not working with the list.

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

 
%d bloggers like this: