Unity Editor Development: The official style of the table control

Unity Editor Development: The official style of the table control

The table control provides a very intuitive representation of the bulk of the data. In unity, light Explorer is a typical window with a table control.

As shown, the top of the window is 4 Tabbutton. Here is a table. This table feature is very powerful, with lists, sorting, filtering, real-time synchronization data updates, real-time synchronization selection and other functions.

In Unity project development, it is often necessary to do this table data display or similar functions, such as a simple requirement, to find out all the CAMRA in the current scene, and show some of its properties. Use the table control to display the following

This is a simple window that meets the above requirements. This official-style table window not only satisfies the requirements in function, but also looks very ok.

In implementation, this control is actually an extension of the TreeView control provided by Unity. The Light Explorer uses a Serializedpropertytreeview that inherits from the TreeView. Unfortunately, the current serializedpropertytreeview is internal's class, so we can't do it through inheritance. Look at its source code can see, some of the codes rely on the internal class, or this is the official can not disclose the reason for this serializedpropertytreeview. However, if you remove some nonessential functions, it is virtually decoupled and independent. Involving Serializedpropertytable,serializedpropertytreeview, Serializedpropertyfilters and Serializedpropertydatastore these 4 classes.

While in use, it is also relatively simple, provide a search method, column information can be. For example, to complete the above mentioned needs of the display camera, you can use the following code:

First define a window to open from the menu

public class Componentfindwindow:editorwindow
{
[MenuItem ("Tools/windows/componentfindwindow")]
public static void Open ()
{
Getwindow<componentfindwindow> ();
}

}

Add a serializedpropertytable declaration to the Componentfindwindow and draw

Private Serializedpropertytable m_table;

public void Ongui ()
{
using (new Editorguilayout.verticalscope ())
{
if (m_table! = null)
{
M_table. Ongui ();
}
}
}
Of course, nothing happens at this time, and we're going to instantiate the m_table.

public void onenable ()
{
m_table = new serializedpropertytable ("table", Findobjects, Createcameracolumn);
}

The Serializedpropertytable constructor has 3 parameters

• The first one is the unique label. The ID used to represent the TreeView serial number information
• The second is a search function that displays content. For example, if we want to show all the camera, we need to provide a way to find this camera.
• The third one is column information. including column name, length, maximum minimum length of stretch, alignment, sortable, column drawing method, sorting method, filtering method, etc.

Here Findobjects declares the following

Private camera[] Findobjects ()
{
return findobjectsoftype<camera> ();
}

Create column methods Createcameracolumn as follows

Private serializedpropertytreeview.column[] Createcameracolumn (out string[] propnames)
{
Propnames = new String[3];
var columns = new Serializedpropertytreeview.column[3];
Columns[0] = new Serializedpropertytreeview.column
{
Headercontent = new Guicontent ("Name"),
Headertextalignment = Textalignment.left,
Sortedascending = True,
Sortingarrowalignment = Textalignment.center,
width = 200,
MinWidth = 25f,
MaxWidth = 400,
AutoResize = False,
Allowtogglevisibility = True,
PropertyName = NULL,
Dependencyindices = NULL,
Comparedelegate = SerializedPropertyTreeView.DefaultDelegates.s_CompareName,
Drawdelegate = SerializedPropertyTreeView.DefaultDelegates.s_DrawName,
Filter = new Serializedpropertyfilters.name ()
};
COLUMNS[1] = new Serializedpropertytreeview.column
{
Headercontent = new Guicontent ("on"),
Headertextalignment = Textalignment.left,
Sortedascending = True,
Sortingarrowalignment = Textalignment.center,
width = 25,
AutoResize = False,
Allowtogglevisibility = True,
PropertyName = "M_enabled",
Dependencyindices = NULL,
Comparedelegate = SerializedPropertyTreeView.DefaultDelegates.s_CompareCheckbox,
Drawdelegate = SerializedPropertyTreeView.DefaultDelegates.s_DrawCheckbox,
};

COLUMNS[2] = new Serializedpropertytreeview.column
{
Headercontent = new Guicontent ("Mask"),
Headertextalignment = Textalignment.left,
Sortedascending = True,
Sortingarrowalignment = Textalignment.center,
width = 200,
MinWidth = 25f,
MaxWidth = 400,
AutoResize = False,
Allowtogglevisibility = True,
PropertyName = "M_cullingmask",
Dependencyindices = NULL,
Comparedelegate = SerializedPropertyTreeView.DefaultDelegates.s_CompareInt,
Drawdelegate = SerializedPropertyTreeView.DefaultDelegates.s_DrawDefault,
Filter = new Serializedpropertyfilters.name ()
};
for (var i = 0; i < columns. Length; i++)
{
var column = Columns[i];
Propnames[i] = Column.propertyname;
}

return columns;
}
At this point, all functions are implemented.

This control is very practical and hopefully the unity team will be able to make this control public as soon as possible.

Project Address: https://github.com/CodeGize/UnityTable

Unity Editor Development: The official style of the table control