Unity编辑器开发：官方风格的Table控件

Unity编辑器开发：官方风格的Table控件

Table控件可以很是直观地展示批量的数据。在Unity中，Light Explorer就是一个典型的具备Table控件的窗口。

如上图所示，窗口上方是4个TabButton。下面就是一个Table。这个Table功能很是强大，有列表，排序，筛选，实时同步数据更新，实时同步选择等功能。

在Unity项目开发中，也经常须要作这种Table数据的展现或者相似的功能，好比简单的一个需求，找出当前场景中全部的Camra，并显示它的某些属性。用Table控件展现以下

这个是一个简单的窗口，知足上述的需求。这种官方风格的Table窗口不只在功能上知足了需求，在外观上很是OK。

在实现上，这种控件，实际上是Unity提供的TreeView控件的扩展。Light Explorer中使用到了继承于TreeView的SerializedPropertyTreeView。可是很是遗憾的是，目前SerializedPropertyTreeView是internal的class，因此咱们没法经过继承来实现。查看它的源码能够看到，有部分代码依赖了内部的类，或者这也是官方没法公开这个SerializedPropertyTreeView的缘由。可是，若是去除掉一些可有可无的功能，事实上是彻底能够脱耦而独立出来。涉及到SerializedPropertyTable，SerializedPropertyTreeView，SerializedPropertyFilters以及SerializedPropertyDataStore这4个类。

而在使用时，也较为简单，提供一个搜索方法，列信息便可。好比完成上面提到的显示相机的需求，能够用如下代码：

首先定义一个窗口，实现从菜单打开

public class ComponentFindWindow : EditorWindow
{
        [MenuItem("Tools/Windows/ComponentFindWindow")]
        public static void Open()
        {
            GetWindow<ComponentFindWindow>();
        }

}

在ComponentFindWindow中增长一个SerializedPropertyTable声明，并进行绘制

private SerializedPropertyTable m_table;

public void OnGUI()
{
    using (new EditorGUILayout.VerticalScope())
    {
        if (m_table != null)
        {
            m_table.OnGUI();
        }
    }
}
固然，这时候什么都不会发生，咱们还要对m_table进行实例化

public void OnEnable()
{
    m_table = new SerializedPropertyTable("Table", FindObjects, CreateCameraColumn);
}

SerializedPropertyTable的构造函数有3个参数

• 第一个是惟一的标签。用于表示这个TreeView序列号信息的ID
• 第二个是显示内容的搜索函数。例如咱们要显示全部的Camera，就要提供找到这个Camera的方法
• 第三个是列信息。包括列名，长度，可拉伸的最大最小长度，对齐方式，是否可排序，列的绘制方法，排序方法，筛选方法等等

这里FindObjects声明以下

private Camera[] FindObjects()
{
    return FindObjectsOfType<Camera>();
}

建立列方法CreateCameraColumn以下

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;
}
至此，就实现了全部功能。

这个控件实用性很是高，很是但愿Unity团队可以早日把这个控件公开。

项目地址：https://github.com/CodeGize/UnityTable