1. 程式人生 > >Unity Editor 編輯器擴充套件 十一 Inspector可排序列表

Unity Editor 編輯器擴充套件 十一 Inspector可排序列表

目錄

可排序列表簡單使用

建立如下指令碼並掛載到物體上:

using UnityEngine;
using System.Collections;

public class Example1 : MonoBehaviour {

    [SerializeField]
    string[] texts;

}

在Editor中建立如下指令碼:

using UnityEngine;
using UnityEditor;
using UnityEditorInternal;

[CustomEditor (typeof(Example1))]
public class
ExampleInspector : Editor { ReorderableList reorderableList; void OnEnable () { reorderableList = new ReorderableList (serializedObject, serializedObject.FindProperty ("texts")); // 繪製元素 var prop = serializedObject.FindProperty ("texts"); reorderableList = new
ReorderableList (serializedObject, prop); // 繪製按鈕 reorderableList.drawElementBackgroundCallback = (rect, index, isActive, isFocused) => { if (Event.current.type == EventType.Repaint) { EditorStyles.miniButton.Draw (rect, false, isActive, isFocused, false); } }; // 繪製文字框
reorderableList.drawElementCallback = (rect, index, isActive, isFocused) => { var element = prop.GetArrayElementAtIndex (index); rect.height -= 4; rect.y += 2; EditorGUI.PropertyField (rect, element); }; reorderableList.onAddCallback += (list) => { //新增元素 prop.arraySize++; //選擇狀態設定為最後一個元素 list.index = prop.arraySize - 1; // 新元素新增預設字串 var element = prop.GetArrayElementAtIndex (list.index); element.stringValue = "New String " + list.index; }; // AddMenue (); reorderableList.onReorderCallback = (list) => { //元素更新 Debug.Log ("onReorderCallback"); }; } public override void OnInspectorGUI () { serializedObject.Update (); reorderableList.DoLayoutList (); serializedObject.ApplyModifiedProperties (); } void AddMenue () { reorderableList.onAddDropdownCallback = (Rect buttonRect, ReorderableList list) => { var menu = new GenericMenu (); menu.AddItem (new GUIContent ("Example 1"), true, () => { }); menu.AddSeparator (""); menu.AddDisabledItem (new GUIContent ("Example 2")); menu.DropDown (buttonRect); }; } }

最終效果如下:

這裡寫圖片描述

可排序列表複雜使用

建立指令碼並掛載到物體上:

using UnityEngine;
using System.Collections;
using System;

public class CharacterTest : MonoBehaviour {

    [SerializeField]
    Character[] characters;
}

[Serializable]
public class Character
{
    [SerializeField]
    Texture icon;

    [SerializeField]
    string name;

    [SerializeField]
    int hp;

    [SerializeField]
    int power;
}

新增控制上面陣列為可排序列表,新增指令碼:

using UnityEngine;
using UnityEditor;
using UnityEditorInternal;

[CustomEditor (typeof(CharacterTest))]
public class CharacterInspector : Editor
{
    ReorderableList reorderableList;

    void OnEnable ()
    {
        var prop = serializedObject.FindProperty ("characters");

        reorderableList = new ReorderableList (serializedObject, prop);
        reorderableList.elementHeight = 68;
        reorderableList.drawElementCallback =
            (rect, index, isActive, isFocused) => {
            var element = prop.GetArrayElementAtIndex (index);
            rect.height -= 4;
            rect.y += 2;
            EditorGUI.PropertyField (rect, element);
        };

        var defaultColor = GUI.backgroundColor;
        reorderableList.drawElementBackgroundCallback = (rect, index, isActive, isFocused) => {
            GUI.backgroundColor = Color.yellow;
        };
        reorderableList.drawHeaderCallback = (rect) =>
            EditorGUI.LabelField (rect, prop.displayName);

    }

    public override void OnInspectorGUI ()
    {
        serializedObject.Update ();
        reorderableList.DoLayoutList ();
        serializedObject.ApplyModifiedProperties ();
    }
}

此時效果如下這裡寫圖片描述

在美化元素內屬性的佈局

using UnityEngine;
using UnityEditor;

[CustomPropertyDrawer (typeof(Character))]
public class CharacterDrawer : PropertyDrawer
{
    private Character character;


    public override void OnGUI (Rect position,
        SerializedProperty property, GUIContent label)
    {

        using (new EditorGUI.PropertyScope (position, label, property)) {

            //設定屬性名寬度 Name HP
            EditorGUIUtility.labelWidth = 60;
            //輸入框高度,預設一行的高度
            position.height = EditorGUIUtility.singleLineHeight;

            var halfWidth = position.width * 0.5f;

            //ico 位置矩形
            var iconRect = new Rect (position) {
                width = 64,
                height = 64
            };

            var nameRect = new Rect (position) {
                width = position.width - 64,
                x = position.x + 64
            };

            var hpRect = new Rect (nameRect) {
                y = nameRect.y + EditorGUIUtility.singleLineHeight + 2
            };

            var powerRect = new Rect (hpRect) {
                y = hpRect.y + EditorGUIUtility.singleLineHeight + 2
            };

//          找到每個屬性的序列化值
            var iconProperty = property.FindPropertyRelative ("icon");
            var nameProperty = property.FindPropertyRelative ("name");
            var hpProperty = property.FindPropertyRelative ("hp");
            var powerProperty = property.FindPropertyRelative ("power");

//          繪製GUI
            iconProperty.objectReferenceValue =
                EditorGUI.ObjectField (iconRect,
                    iconProperty.objectReferenceValue, typeof(Texture), false);

            nameProperty.stringValue =
                EditorGUI.TextField (nameRect,
                    nameProperty.displayName, nameProperty.stringValue);

            EditorGUI.IntSlider (hpRect, hpProperty, 0, 100);
            EditorGUI.IntSlider (powerRect, powerProperty, 0, 10);

        }
    }
}

最終效果
這裡寫圖片描述