【Unity】UGUI Image组件检视面板编辑器扩展（ImageEditor类）

问题描述

    说到Unity的检视面板编辑器扩展，相信大家都不会陌生。但是当你尝试用同样的方式去扩展UGUI的组件时，会发现根本没有效果。

解决方案

    这个问题的解决方案有两个关键点：

1. 用继承的方式避开同系统编辑器扩展的冲突
2. 所扩展的编辑器类要继承ImageEditor类而不是Editor类

测试版本

    Unity 2017.1.1 f1

前提条件

    由于所要使用的ImageEditor类所在命名空间为UnityEditor.UI，而这个命名空间并不能直接敲出来。Unity一边的错误提示是程序集引用错误。这是一个坑点。

解决方法：需要手动将Unity安装路径Unity\Editor\Data\UnityExtensions\Unity\GUISystem\Editor 下的UnityEditor.UI.dll文件拷贝到当前项目的Assets文件加下。

源代码

// MyImage.cs
using UnityEngine;
using UnityEngine.UI;

public class MyImage : Image // 继承Image类
{
     
}

// MyImageEditor.cs

using UnityEditor;
using UnityEngine;
using UnityEditor.UI;

[CustomEditor(typeof(MyImage))] // 定义子类的编辑器扩展
public class MyImageEditor : ImageEditor // 这里要继承ImageEditor类
{
    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI();

        if (GUILayout.Button("测试按钮"))
        {

        }
    }
}

具体操作

通过Unity菜单添加Image对象，然后删除原有的Image组件，添加新定义的MyImage脚本即可。

为了方便使用，可以将添加好新脚本的Image对象做成Prefab。

最终效果

参考文献

https://stackoverflow.com/questions/42717649/extending-unityengine-ui-image-and-add-extra-field-available-in-inspector https://stackoverflow.com/questions/42717649/extending-unityengine-ui-image-and-add-extra-field-available-in-inspector
https://stackoverflow.com/questions/29052183/extending-unity-ui-components-with-custom-inspector