unity 编辑器----编辑器窗口控件创建和UI布局

unity编辑器窗口控件通过EditorGUILayout、EditorGUI、GUILayout和GUI来创建控件和实现布局。

EditorGUILayout、EditorGUI这两个是unity编辑器使用。

而GUILayout和GUI运行时游戏中和编辑器中都可以使用，但是这两个类就是服务于运行时，Monobehaviour的OnGUI()方法大家都知道吧，这两个类就是为OnGUI()的UIhuizhi服务的。

一.各类比较与对应关系

EditorGUILayout和运行时的GUILayout相对应，因为他们的布局方式是一样的，自动水平拉伸布满整个窗口的宽度，每个控件占一大行。这种方式我称它为自动布局吧。

EditorGUI和运行时的GUI相对应，必须设置固定大小和位置。这种方法我称它为手动布局。

下面比较一下效果：

using UnityEditor;
using UnityEngine;
using UnityEngine.UI;

public class WinTest : EditorWindow
{
    public GameObject go;
    SerializedProperty serializedProperty;
    SerializedObject serializedObject;
    [MenuItem("test/win")]
    static void show()
    {
        EditorWindow.GetWindow<WinTest>().Show();
    }
    string tagStr = "dd";
    string tagStr1 = "dd1";
    Object source;
    void OnGUI()
    {
        //自动布局
        EditorGUILayout.TextField("自动布局-->EditorGUILayout");        //编辑器使用
        GUILayout.TextField("自动布局-->GUILayout");                    //运行时使用（编辑器下正常使用）

        //手动布局
        EditorGUI.TextField(new Rect(0,60,200,20), "手动布局-->EditorGUI"); //编辑器使用
        GUI.TextField(new Rect(0, 80, 200, 20), "手动布局-->GUI");           //运行时使用（编辑器下正常使用）
    }
}

运行效果：

这里就有点烦蒙了。既然对应的类是一样的，那为什么还定义这么多类，搞的都不知道使用那个了呢。。。

其实unity官方估计是为了把编辑器和运行时的UI分开才定义了这几个相对应的类。看了有些帖子不去区分到底使用哪个类，以至于乱使用。虽说混乱使用不影响功能，但是我还是建议区分开来。下面讲解只说明编辑器类EditorGUILayout和EditorGUI。不再使用运行时的类。

1.EditorGUILayout和EditorGUI

EditorGUILayout包含EditorGUI全部组件。多出了几个布局控件。

EditorGUILayout多出的几个控件如下：

Space

Make a small space between the previous control and the following.
在上一个控件和跟随的控件之间，制作一个小的空距。
BeginToggleGroup

Begin a vertical group with a toggle to enable or disable all the controls within at once.
开始带有开关按钮的一个垂直组，在这里立即启用或禁用控件。
EndToggleGroup

Close a group started with BeginToggleGroup
关闭BeginToggleGroup开始的组。
BeginHorizontal

Begin a horizontal group and get its rect back.
开始一个水平组并获取返回矩形。
EndHorizontal

Close a group started with BeginHorizontal
关闭一个BeginHorizontal开始的组。
BeginVertical

Begin a vertical group and get its rect back.
开始一个垂直组并获取它的返回矩形。
EndVertical

Close a group started with BeginVertical
结束一个由BeginVertical开始的组。
BeginScrollView

Begin an automatically layouted scrollview.
开始一个自动布局滚动视图。
EndScrollView

Ends a scrollview started with a call to BeginScrollView.
结束一个由BeginScrollView开始的滚动视图。

现在我们使用EditorGUILayout和EditorGUI在窗口中添加几个输入框如下：

你会发现EditorGUILayout这个布局类控件将自动水平拉伸布满整个窗口的宽度，每个控件占一大行。这是这个UI布局类的特点。如果不想布满整个宽度，或者一行有多个控件，我们可以使用EditorGUILayout布局方法或者使用绝对位置布局类EditorGUI来达到我们的要求。

2.编辑器界面布局。

EditorGUILayout的水平和垂直布局混合使用

BeginHorizontal

Begin a horizontal group and get its rect back.
开始一个水平组并获取返回矩形。
EndHorizontal

Close a group started with BeginHorizontal
关闭一个BeginHorizontal开始的组。
BeginVertical

Begin a vertical group and get its rect back.
开始一个垂直组并获取它的返回矩形。
EndVertical

1）水平和垂直布局

using UnityEditor;
using UnityEngine;
using UnityEngine.UI;

public class WinTest : EditorWindow
{
    public GameObject go;
    SerializedProperty serializedProperty;
    SerializedObject serializedObject;
    [MenuItem("test/win")]
    static void show()
    {
        EditorWindow.GetWindow<WinTest>().Show();
    }
    string tagStr = "dd";
    string tagStr1 = "dd1";
    Object source;
    void OnGUI()
    {
        //垂直布局
        EditorGUILayout.BeginVertical("垂直布局");
        {
            EditorGUILayout.TextField("1");
            EditorGUILayout.TextField("2");
        }
        //水平布局
        EditorGUILayout.BeginHorizontal("3");
        {
            EditorGUILayout.TextField("4");
            EditorGUILayout.TextField("5");
        }
        EditorGUILayout.EndVertical();

        //嵌套布局
        EditorGUILayout.BeginVertical("垂直布局");
        {
            EditorGUILayout.BeginHorizontal("水平布局");
            {
                EditorGUILayout.TextField("6");
                EditorGUILayout.TextField("7");
            }
            EditorGUILayout.EndHorizontal();
            EditorGUILayout.BeginHorizontal("水平布局");
            {
                EditorGUILayout.TextField("8");
                EditorGUILayout.TextField("9");
                //EditorGUILayout.BeginVertical("垂直布局");
                //{
                //    EditorGUILayout.TextField("10");
                //    EditorGUILayout.TextField("11");
                //}
            }
            EditorGUILayout.EndHorizontal();

            EditorGUILayout.TextField("12");
            EditorGUILayout.TextField("13");
        }
        EditorGUILayout.EndVertical();

        EditorGUILayout.TextField("15");
        EditorGUILayout.TextField("16");
    }

}

2.EditorGUI

代码：

using UnityEditor;
using UnityEngine;
using UnityEngine.UI;

public class WinTest : EditorWindow
{
    public GameObject go;
    SerializedProperty serializedProperty;
    SerializedObject serializedObject;
    [MenuItem("test/win")]
    static void show()
    {
        EditorWindow.GetWindow<WinTest>().Show();
    }
    string tagStr = "dd";
    string tagStr1 = "dd1";
    Object source;
    void OnGUI()
    {
        EditorGUI.TextField(new Rect(0,20,200,20), "手动布局-->EditorGUI"); //编辑器使用
        EditorGUI.TextField(new Rect(0, 60, 200, 20), "手动布局-->EditorGUI"); //编辑器使用
    }
}

打组，控制是否可编辑

using UnityEditor;
using UnityEngine;
using UnityEngine.UI;

public class WinTest : EditorWindow
{
    public GameObject go;
    SerializedProperty serializedProperty;
    SerializedObject serializedObject;
    [MenuItem("test/win")]
    static void show()
    {
        EditorWindow.GetWindow<WinTest>().Show();
    }
    bool isClose;
    void OnGUI()
    {
        isClose = EditorGUILayout.BeginToggleGroup("打组", isClose);
        {
            EditorGUILayout.TextField("1");
            EditorGUILayout.TextField("2");
            EditorGUILayout.TextField("4");
            EditorGUILayout.TextField("5");
            EditorGUILayout.TextField("6");
            EditorGUILayout.TextField("7");
        }
        EditorGUILayout.EndFadeGroup();
    }
}

效果

滑动效果

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

public class WinTest : EditorWindow
{
    [MenuItem("test/win")]
    static void show()
    {
        EditorWindow.GetWindow<WinTest>().Show();
    }
    Vector2 pos;
    void OnGUI()
    {
        pos = EditorGUILayout.BeginScrollView(pos);
        {
            EditorGUILayout.TextField("1");
            EditorGUILayout.TextField("2");
            EditorGUILayout.TextField("4");
            EditorGUILayout.TextField("5");
            EditorGUILayout.TextField("6");
            EditorGUILayout.TextField("7");
            EditorGUILayout.TextField("8");
            EditorGUILayout.TextField("9");
            EditorGUILayout.TextField("10");
        }

        EditorGUILayout.EndScrollView();
    }
}

效果：

另外还有个空行方法

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

public class WinTest : EditorWindow
{
    [MenuItem("test/win")]
    static void show()
    {
        EditorWindow.GetWindow<WinTest>().Show();
    }
    Vector2 pos;
    void OnGUI()
    {
        EditorGUILayout.TextField("9");
        EditorGUILayout.Space();
        EditorGUILayout.TextField("10");
    }
}

效果

unity 编辑器----编辑器窗口控件创建和UI布局

猜你喜欢