Unity Editor 编辑器扩展 十一 Inspector可排序列表

15 篇文章 7 订阅

目录

可排序列表简单使用

创建如下脚本并挂载到物体上:

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值