Unity編輯器拓展之二：ReorderableList可重新排序的列表框（複雜使用）
先看效果gif圖：
如果沒有看過Unity編輯器拓展之一：ReorderableList可重新排序的列表框（簡單使用）的，可以先看這一篇： http://blog.csdn.net/qq_26999509/article/details/77782177
在此基礎上，來繪製更加複雜的類
先提供一個需要繪製的類
using UnityEngine; using System.Collections; using System.Collections.Generic; using System;
public class CharacterTest : MonoBehaviour { public List<Character> characters = new List<Character>(); // Use this for initialization void Start () {
}
// Update is called once per frame void Update () {
} }
[Serializable] public class Character { [SerializeField] Texture icon;
[SerializeField] string name;
[SerializeField] int hp;
[SerializeField] int power;
[SerializeField] GameObject weapon; }
然後跟上一篇一樣，通過使用ReorderableList繪製List
using UnityEngine; using System.Collections; using UnityEditor; using UnityEditorInternal;
[CustomEditor(typeof(CharacterTest))] public class CharacterInspector : Editor { ReorderableList reorderableList;
void OnEnable() { SerializedProperty prop = serializedObject.FindProperty("characters");
reorderableList = new ReorderableList(serializedObject, prop, true, true, true, true);
//設定單個元素的高度 reorderableList.elementHeight = 80;
//繪製單個元素 reorderableList.drawElementCallback = (rect, index, isActive, isFocused) => { var element = prop.GetArrayElementAtIndex(index); rect.height -= 4; rect.y += 2; EditorGUI.PropertyField(rect, element); };
//背景色 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(); } } 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
目前的效果如下圖：
最後還需要利用PropertyDrawer來繪製單個Serializable類的每個例項的GUI，也就是Character類
using UnityEngine; using System.Collections; using UnityEditor;
//定製Serializable類的每個例項的GUI [CustomPropertyDrawer(typeof(Character))] public class CharacterDrawer : PropertyDrawer { public override void OnGUI(Rect position, SerializedProperty property, GUIContent label) { //建立一個屬性包裝器，用於將常規GUI控制元件與SerializedProperty一起使用 using (new EditorGUI.PropertyScope(position, label, property)) { //設定屬性名寬度 Name HP EditorGUIUtility.labelWidth = 60; //輸入框高度，預設一行的高度 position.height = EditorGUIUtility.singleLineHeight;
//ico 位置矩形 Rect iconRect = new Rect(position) { width = 68, height = 68 };
Rect nameRect = new Rect(position) { width = position.width - 70, //減去icon的width 64 x = position.x + 70 //在icon的基礎上右移64 };
Rect hpRect = new Rect(nameRect) { //在name的基礎上，y座標下移 y = nameRect.y + EditorGUIUtility.singleLineHeight + 2 };
Rect powerRect = new Rect(hpRect) { //在hp的基礎上，y座標下移 y = hpRect.y + EditorGUIUtility.singleLineHeight + 2 };
Rect weaponLabelRect = new Rect(powerRect) { y = powerRect.y + EditorGUIUtility.singleLineHeight + 2, width = 60 };
Rect weaponRect = new Rect(weaponLabelRect) { x = weaponLabelRect.x + 60, width = powerRect.width - 60 };
//找到每個屬性的序列化值 SerializedProperty iconProperty = property.FindPropertyRelative("icon"); SerializedProperty nameProperty = property.FindPropertyRelative("name"); SerializedProperty hpProperty = property.FindPropertyRelative("hp"); SerializedProperty powerProperty = property.FindPropertyRelative("power"); SerializedProperty weaponProperty = property.FindPropertyRelative("weapon");
//繪製icon iconProperty.objectReferenceValue = EditorGUI.ObjectField(iconRect, iconProperty.objectReferenceValue, typeof(Texture), false);
//繪製name nameProperty.stringValue = EditorGUI.TextField(nameRect, nameProperty.displayName, nameProperty.stringValue);
//Slider，範圍在0-100 EditorGUI.IntSlider(hpRect, hpProperty, 0, 100); //Slider，範圍在0-10 EditorGUI.IntSlider(powerRect, powerProperty, 0, 10);
EditorGUI.PrefixLabel(weaponLabelRect, new GUIContent("weapon")); EditorGUI.PropertyField(weaponRect, weaponProperty, GUIContent.none); } } }
最後效果就是文章一開始的gif圖了
示例工程連結： 連結：http://pan.baidu.com/s/1cgyZ98 密碼：jbzh
以上知識分享，如有錯誤，歡迎指出，共同學習，共同進步
---------------------
本文來自 qq_26999509 的CSDN 部落格 ，全文地址請點選：https://blog.csdn.net/qq_26999509/article/details/77801852?utm_source=copy