2019-11-01

[Unity] UIElements Expansions: Reorderable List

UIElements Expansions is an extended asset for the Unity editor.

UIElements Expansions: Reorderable List

"UIElements Expansions: Reorderable List" strongly supports "UIElements" which was introduced with Unity 2019.1.

What is UIElements

UIElements replaces the current Unity editor GUI system (IMGUI) that was introduced in Unity 2019.1.

You can combine HTML for Unity "UXML" and style sheets for Unity "USS" to create a Unity GUI as if you were creating a web page with HTML and CSS.

Of course, you can write the process for the editor in the editor script as before, and you can create a dynamic GUI like HTML5 with methods like jQuery.

In the future, it is planned to replace the runtime GUI (Current uGUI) as well as the editor, and is expected to be the future Unity GUI.

However, the potential is high, but since it has just been introduced, there are still not enough functions to use it seriously.

"UIElements Expansions" is an asset that provides strong support for the missing pieces.

This "UIElements Expansions: Reorderable List" mainly supports the following functions:

  • UIElements Expansions Common Features
    • Global Style Sheet
    • Inspector Auto Assign
    • Additional Tags / Features
    • Additional Class
  • Reorderable List

UIElements Expansions Common Features

Please refer to the following page.

Reorderable List

image block

Reorderable List is also useful in the IMGUI. You can manipulate the serialized List<T> and arrays intuitively and change their order freely. Even in the IMGUI era, the implementation was complicated and very cumbersome.

In addition, there is no way to implement it in UIElements, so you end up using the IMGUI. Therefore, UIElements USS cannot be applied and the design cannot be set freely.

The drawback of the IMGUI Reorderable List is poor performance, and the inspector response is very slow when the number of elements is large.

UIElements Expansions: Reorderable List can take advantage of a newly created Reorderable List in UIElements.

Reorderable List function in IMGUI can be kept as it is, and fine design adjustment by USS is possible, and it succeeded in the drastic lightening.

How to Use

Import

image block

Purchase from Unity Asset Store.

You can import after purchase from "My Assets".

Reorderable List

If you want a Reorderable List to display a List or an array in the inspector for a particular class, you can use the following in the class's uxml file:

<editor:ReorderableList binding-path="Variable name of the List or array to apply" />

This automatically displays the styled Reorderable List.

image block

Skinning Elements in Reorderable List

You cannot change the style of an element in a ReorderableList in a normal stylesheet description.

However, like other elements, it has internal classes, so you can change the style by specifying each class.

.unity-reorderable-list : Class that specifies the entire Reorderable List
 .unity-reorderable-list__header : Header part
     .unity-reorderable-list__icon : Icon in header
     .unity-reorderable-list__label : Label in header
     .unity-reorderable-list__add : Add button in header
     .unity-reorderable-list__remove : Remove button in header
 .unity-reorderable-list__content : Content part
     .unity-reorderable-list__item : Each element in the content
         .unity-reorderable-list__handle : Handle within each element
         .unity-reorderable-list__single : The part excluding the handle when each element is a single field (primitive type such as string or int)
 .unity-reorderable-list__footer : Footer part

For details, please refer to "PersonalStyle" and "ProStyle" in the "Assets/Masamune/Modules/unity.style/Styles" folder.

Summary

"UIElements Expansions: Reorderable List" strongly supports "UIElements" which was introduced with Unity 2019.1. In particular, it makes it easier to write inspector designs that previously required editor scripts.

In addition, "Reorderable List" makes it easy to edit data in the List format.

The design has been flattened to match Unity 2019.3, which is cool at once, so you can use it comfortably.

If you are interested, please check out the asset store!

Use the UIElements Expansions: Reorderable List from mathru.net on your next project. Find this GUI tool & more on the Unity Asset Store.
https://assetstore.unity.comhttps://assetstore.unity.com
title
[Audio Stock] EDM-style main theme (loop BGM)

Assets Assets BGM AudioStock

◀︎ Next
[Udemy] Anyone can do it! Unity 5 basic course for making “Selling” games

Works Unity Udemy

▶︎ Previous