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);

        }
    }
}

最終效果
這裏寫圖片描述

本文鏈接:http://write.blog.csdn.net/mdeditor#!postId=53806898

發佈了31 篇原創文章 · 獲贊 17 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章