Extending Unity UI components with custom Inspector

Question

Is it possible to extend the new unity ui components like for example the transform component? Because nothing happens when i try to extend the button, instead of the transform component

using UnityEditor;
using UnityEngine;
[CustomEditor(typeof(Transform))]
public class CustomTransform : Editor
{
    public override void OnInspectorGUI()
    {            
    }
}

Answer 1

Yes you can extend UI components and write them their own custom inspector. You just need to remember to use right namespaces and also inherit from the right Inspector class.

You can of course override too!.

Example here is a UISegmentedControlButton

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System.Collections;

public class UISegmentedControlButton : Button {

public Sprite offSprite;
public Sprite onSprite;
public Color offTextColor = Color.white;
public Color onTextColor = Color.white;

private bool isSelected;
public bool IsSelected {
    get {
        return isSelected;
    }
    set {
        isSelected = value;

        Text text = this.transform.GetComponentInChildren<Text>();

        if (value) {
            this.GetComponent<Image>().sprite = onSprite;
            text.color = onTextColor;
        } else {
            this.GetComponent<Image>().sprite = offSprite;
            text.color = offTextColor;
        }
    }
}




public override void OnPointerClick(PointerEventData eventData) {

    this.transform.parent.GetComponent<UISegmentedControl>().SelectSegment(this);
    base.OnPointerClick(eventData);
}

}

And Editor class for it:

P.S. ButtonEditor is different from UnityEditor.UI.ButtonEditor as the first one is from UnityEngine.ButtonEditor. To access .UI from UnityEditor, you need to put your Editor script under Editor folder

using UnityEngine;
using UnityEditor;
using UnityEngine.UI;
using System.Collections;

[CustomEditor(typeof(UISegmentedControlButton))]
public class UISegmentedControlButtonEditor : UnityEditor.UI.ButtonEditor {


public override void OnInspectorGUI() {

    UISegmentedControlButton component = (UISegmentedControlButton)target;

    base.OnInspectorGUI();

    component.onSprite = (Sprite)EditorGUILayout.ObjectField("On Sprite", component.onSprite, typeof(Sprite), true);
    component.onTextColor = EditorGUILayout.ColorField("On text colour", component.onTextColor);
    component.offSprite = (Sprite)EditorGUILayout.ObjectField("Off Sprite", component.offSprite, typeof(Sprite), true);
    component.offTextColor = EditorGUILayout.ColorField("Off text colour", component.offTextColor);

}
}

Also here is a useful link directly to the source of Unity UI

https://github.com/Unity-Technologies/uGUI

And a little proof that it works:

Answer 2

Tried the example above but EditorGUILayout.ObjectField gets empty when I exit the prefab I placed my object in.

However, this method works without zeroing the field.

using Game.Ui.Views.DialoguePanel;
using UnityEditor;
using UnityEditor.UI;

namespace Editor
{
    [CustomEditor(typeof(MyButtonExtension))]
    public class MyButtonExtensionDrawer : ButtonEditor
    {
        SerializedProperty m_testObject;
        
        protected override void OnEnable()
        {
            base.OnEnable();
            m_testObject = serializedObject.FindProperty("testObject");
        }
        
        public override void OnInspectorGUI()
        {
            base.OnInspectorGUI();
            EditorGUILayout.Space();
            
            serializedObject.Update();
            EditorGUILayout.PropertyField(m_testObject);
            serializedObject.ApplyModifiedProperties();
        }
    }
}

In fact, this is just a slightly modified content of the ButtonEditor class.