UIElement编辑器扩展 组件 Inspector

UIElement编辑器扩展 组件 Inspector

https://docs.unity.cn/cn/2021.3/Manual/UIE-create-a-binding-uxml-inspector.html

简单开始

声明序列化VisualTreeAsset

[SerializeField] VisualTreeAsset visualTree;

声明完，直接在脚本的Inspector面板，把你这个界面的UXML拖进去就可以了，非常方便

基础的属性，在UIBuilder里拖好需要的组件，bingdingPath填好属性名即可

//测试组件
public class TestComp : MonoBehaviour
{
    public int TestInt;
    public GameObject TestGO;
}

//测试组件的编辑器扩展
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

[CustomEditor(typeof(TestComp))]
public class TestCompEditor : Editor
{
    [SerializeField]
    VisualTreeAsset m_InspectorXML;

    public override VisualElement CreateInspectorGUI()
    {
        var root = m_InspectorXML.CloneTree();
        return root;
    }
}

封装的数据对象

[Serializable]
public class TestItem
{
    public string name;
    public GameObject gameObject;
}
public class TestComp : MonoBehaviour
{
    public int TestInt;
    public GameObject TestGO;
    public TestItem Item;
}

对TestItem单独创建一个UXML,根据属性在UIBuilder拖好需要的组件

在TestCompEditor.cs，增加TestItem.uxml这个文件的声明

增加一点CreateInspectorGUI代码

//测试组件的编辑器扩展
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

[CustomEditor(typeof(TestComp))]
public class TestCompEditor : Editor
{

    [SerializeField]
    VisualTreeAsset m_InspectorXML;

    //增加的TestItem UXML
    [SerializeField]
    VisualTreeAsset m_ItemAsset;

    public override VisualElement CreateInspectorGUI()
    {
        var root = visualTree.CloneTree();

        var item = m_PropertyAsset.CloneTree();
        //指定TestComp的属性名
        item.bindingPath = "Item";
        //加入即可
        root.Add(item);

        return root;
    }
}

List+数据对象

[Serializable]
public class TestItem
{
    public string name;
    public GameObject gameObject;
}
public class TestComp : MonoBehaviour
{
    public int TestInt;
    public GameObject TestGO;
    public TestItem Item;
    public List<TestItem> ItemList;
}

TestComp.uxml添加一个ListView

因为这个List内的数据用的还是上个例子的TestItem, 就继续用TestItem.uxml了

（ListView非常方便，reorderable之类的样式，直接在UIBuilder就能用了）

//测试组件的编辑器扩展
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

[CustomEditor(typeof(TestComp))]
public class TestCompEditor : Editor
{

    [SerializeField]
    VisualTreeAsset m_InspectorXML;

    //增加的TestItem UXML
    [SerializeField]
    VisualTreeAsset m_ItemAsset;

    public override VisualElement CreateInspectorGUI()
    {
        var root = visualTree.CloneTree();

        var item = m_ItemAsset.CloneTree();
        item.bindingPath = "Item";
        root.Add(item);

        //找到TestComp.uxml添加的ListView,多个List可以用name
        var listView = root.Q<ListView>();
        //makeItem赋值方法
        listView.makeItem = m_ItemAsset.CloneTree;

        return root;
    }
}