Custom Inspector - ReorderableList(2)

ScriptableObject 를 활용하여 데이터를 편집할때 인스펙터를 수정하는 방법을 확인 해 보겠습니다.

 

[Serializable]
public class CharacterInfo
{
    public string CharacterName;

    public int CharacterLevel;

    public float value;
}

기본적인 데이터 입니다.

이것이 배열 형태로 ScriptableObject로 처리 됩니다.

 

[CreateAssetMenu(fileName = "CharacterData", menuName = "Scriptable Object/CharacterData")]
public class CharacterData : ScriptableObject
{
    [SerializeField] private List<CharacterInfo> CharacterInfo = new List<CharacterInfo>();
}

CharacterInfo 가 List형태로 들어 가 있습니다.

 

이대로 ScriptableObject를 만들면 다음과 같습니다.

 

이미 충분히 잘 나오고 있지만 이것을 1줄로 표시하겠습니다.

 

[CustomEditor(typeof(CharacterData))]
public class CharacterDataInspector : Editor
{
    private ReorderableList _reorderableList;

    private void OnEnable()
    {
        _reorderableList = new ReorderableList(serializedObject, serializedObject.FindProperty("CharacterInfo"), true,
            true, true, true);

        _reorderableList.drawElementCallback = (rect, index, active, focused) =>
        {
            rect.y += 2;
            var element = _reorderableList.serializedProperty.GetArrayElementAtIndex(index);
            var baseWidth = (rect.width / 3) - 5;
            EditorGUI.PropertyField(new Rect(rect.x, rect.y, baseWidth, EditorGUIUtility.singleLineHeight),
                element.FindPropertyRelative("CharacterName"), GUIContent.none);
            EditorGUI.PropertyField(
                new Rect(rect.x + baseWidth + 5, rect.y, baseWidth, EditorGUIUtility.singleLineHeight),
                element.FindPropertyRelative("CharacterLevel"), GUIContent.none);
            EditorGUI.PropertyField(
                new Rect(rect.x + (baseWidth * 2) + 10, rect.y, baseWidth, EditorGUIUtility.singleLineHeight),
                element.FindPropertyRelative("value"), GUIContent.none);
        };

        _reorderableList.drawHeaderCallback = rect =>
        {
            EditorGUI.LabelField(rect, "Character Info");
        };

        _reorderableList.onAddCallback = list =>
        {
            ReorderableList.defaultBehaviours.DoAddButton(list);

            int index = list.serializedProperty.arraySize - 1;
            SerializedProperty element = list.serializedProperty.GetArrayElementAtIndex(index);

            element.FindPropertyRelative("CharacterName").stringValue = "DefaultName";
            element.FindPropertyRelative("CharacterLevel").intValue = 1;
            element.FindPropertyRelative("value").floatValue = 0.0f;
        };
    }

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

 

Custom Inspector

OnEnable 에서 대부분의 것들이 처리되고 있습니다.

drawElementCallback 에서 실제 1줄을 그릴때 1줄을 어떻게 그릴지 처리하고 있습니다.

녹색 부분이 그려지게 된 부분 입니다.

drawElementCallback 에서 rect부분은 1줄의 사이즈 정보를 지니고 있는 Rect객체 입니다.

시작하자 마자 y 를 2 늘린것은 좌표를 잡아주기 위함입니다.

PropertyField를 그려줄때 Rect를 새로 만들어서 넣어 주고 있습니다.

매개변수로 받은 rect는 해당 row를 어떻게 그릴지 할당받은 사이즈 정보입니다.

이것을 변경하게 되면 전체적인 내용이 바뀌기 때문에 rect를 기준으로 계산하여 PropertyField별로 다른 Rect를 생성하여 줍니다.

여기서 rect는 이미 계산된 값이기 때문에 rect.height를 늘려봤자 내부만 들어나고 리스트상 줄간경이 벌어지지 않습니다.

_reorderableList.elementHeight = 50;

위와 같이 elementHeight를 변경으로 실제 줄간경을 벌릴 수 있습니다.

변경된 줄간격

 

 

drawHeaderCallback 부분에서는 헤더를 변경해 주고 있는데 붉은 부분이 헤더 입니다.

 

onAddCallback 부분에서는 +버튼이 눌려져서 데이터가 새로 추가되었을 경우 에 대한 처리 입니다.

기본값들을 세팅해 주게 됩니다.

ScriptableObject의 경우 대량의 데이터를 처리할 경우가 있고 이 과정에서 기본 데이터가 있게 되면 작업이 수월 해 지는 경우가 많습니다.

이때 사용하기 편리 합니다.