Unity3d Editor 编辑器扩展功能详解（7）（完结）Editor美化 ...

yukamu · 发表于 2022-5-28 16:08

前言：

系列目录：Unity3d Editor 编辑器扩展功能详解（1）目录索引
上一章节：Unity3d Editor 编辑器扩展功能详解（6）Editor常用辅助类（下）
本节介绍一些常用的编辑器面板美化方法，牵涉【GUIStyle、GUISkin】，你可以理解为这两者是Unity内置的GUI绘制约束与模板。
一、字体格式/颜色

关键字：GUIStyle
样例：

奇奇怪怪的显示方式

示例代码：
using UnityEditor;
using UnityEngine;

public class PolishWindow : EditorWindow
{
public static PolishWindow m_mainWindow; //主要窗口对象

private GUIStyle defaultStyle = new GUIStyle(); //定义 GUIStyle

[MenuItem(&#34;MyWindows/PolishWindow&#34;)] //定义窗口菜单栏
public static void OpenWindow()
{
      m_mainWindow = EditorWindow.GetWindow<PolishWindow>(); //创建窗口
      m_mainWindow.Show(); //打开窗口
}
private void OnGUI()
{
      defaultStyle.fontSize = 10; //字体大小： 10
      defaultStyle.fontStyle = FontStyle.Normal; //字体样式：normal

      defaultStyle.alignment = TextAnchor.MiddleCenter; //字体对齐方式：居中对齐
      defaultStyle.normal.textColor = Color.red; //字体颜色：红色
      EditorGUILayout.LabelField(&#34;这是红色字体&#34;, defaultStyle); //绘制GUI组件，使用 defaultStyle

      defaultStyle.alignment = TextAnchor.MiddleLeft; //字体对齐方式：水平靠左，垂直居中
      defaultStyle.normal.textColor = Color.yellow; //字体颜色：黄色
      defaultStyle.fontSize = 20; //字体大小： 20
      EditorGUILayout.LabelField(&#34;这是黄色字体&#34;, defaultStyle); //绘制GUI组件

      defaultStyle.normal.textColor = Color.green; //字体颜色：绿色
      defaultStyle.fontSize = 12; //字体大小： 12
      defaultStyle.fontStyle = FontStyle.Bold;  //字体样式： Bold（加粗）
      EditorGUILayout.SelectableLabel(&#34;这是绿色字体&#34;, defaultStyle); //绘制GUI
}
}
注：下文代码将只给出关键代码，实际使用位置如上所示在OnGUI()方法中。
二、GUI颜色

关键字：GUI.color
样例：

示例代码：
GUI.color = Color.red;
GUILayout.Button(&#34;红色Button&#34;);
GUI.color = Color.green;
EditorGUILayout.LabelField(&#34;绿色Label&#34;);
GUI.color = Color.yellow;
EditorGUILayout.IntField(&#34;黄色Int Field&#34;, 20);
三、面板分区/搜索框

关键字：
样例：

示例代码：
EditorGUILayout.BeginVertical(&#34;box&#34;);
EditorGUILayout.LabelField(&#34;这是【box】样式，用于显示面板的分区&#34;);
EditorGUILayout.Vector3Field(&#34;比如这是一个Vec3 Field&#34;, Vector3.one);
EditorGUILayout.BeginToggleGroup(&#34;比如这是一个Toggle Group&#34;, false);
EditorGUILayout.HelpBox(&#34;比如这是一个HelpBox&#34;, MessageType.Warning);
EditorGUILayout.TextArea(&#34;比如这是一个TextArea&#34;);
EditorGUILayout.EndToggleGroup();
EditorGUILayout.EndVertical();

EditorGUILayout.Space(10);

EditorGUILayout.BeginVertical(&#34;frameBox&#34;);
EditorGUILayout.LabelField(&#34;这是【frameBox】样式，用于显示面板的分区&#34;);
EditorGUILayout.BoundsField(&#34;比如这是一个BoundField&#34;, new Bounds());
EditorGUILayout.Slider(&#34;比如这是一个Slider&#34;, 5, 0, 10);
EditorGUILayout.TextArea(&#34;这是一个【SearchTextField】样式的文本框&#34;, &#34;SearchTextField&#34;);
EditorGUILayout.EndVertical();
GUIStyle、GUISkin的许多内置样式咱也不是很清楚全貌，只介绍了自己常用的几个，有额外需求的可以自行搜索看看。
四、案例实战

好了，你已经学会1+1=2了，下面我们来算一个微积分吧。
样例：

假设做一个可以翻页的资源检索器

示例代码：
using UnityEditor;
using UnityEngine;

public class PolishWindow : EditorWindow
{
public static PolishWindow m_mainWindow; //主要窗口对象

private const int arrayLength = 35; //定义元素数组长度
private const int countPerPage = 10; //定义每一页的数量

private GUILayoutOption maxWidth = GUILayout.MaxWidth(120); //定义一个GUI组件的最大宽度
private Vector2 scrollRoot; //定义组件ScrollView的滚动Root
private int page = 1; //当前page
private int currentSelectionIndex = -1; //当前选择index
private int totalPage; //页面总数
private int[] someValues; //显示的元素
private bool foldOut; //折叠flag

[MenuItem(&#34;MyWindows/PolishWindow&#34;)] //定义窗口菜单栏
public static void OpenWindow()
{
      m_mainWindow = EditorWindow.GetWindow<PolishWindow>(); //创建窗口
      m_mainWindow.Show(); //打开窗口
}
/// <summary>
/// 当窗口打开时调用
/// </summary>
private void OnEnable()
{
      someValues = new int[arrayLength]; //实例化数组
      totalPage = (int)Mathf.Ceil((float)arrayLength / (float)countPerPage); //计算总页数
      for (int i = 0; i < someValues.Length; i++)
      {
         someValues = Random.Range(0, 100); //进行随机数据填充
      }
}
/// <summary>
/// Editor面板绘制方法
/// </summary>
private void OnGUI()
{
      scrollRoot = EditorGUILayout.BeginScrollView(scrollRoot); //开启滚动视图
      foldOut = EditorGUILayout.BeginFoldoutHeaderGroup(foldOut, &#34;假装这是一个检索页面&#34;); //开启折叠组

      if (foldOut) //如果折叠打开，则进行绘制
      {
         EditorGUILayout.BeginVertical(&#34;frameBox&#34;); //开始垂直布局，使用GUIStyle ： frameBox
         for (int i = (page - 1) * countPerPage; i < someValues.Length; i++) //循环绘制，page 默认是1开始，这里【page-1】对齐数组下标。
         {
            if (i >= page * countPerPage) //一页只能绘制【countPerPage】个元素，但是arrayLength可能不止，在这里截断。
                  break;

            if (currentSelectionIndex == i) //判断当前index与选择index
                  GUI.color = Color.green; //为真，突出显示选择项
            else
                  GUI.color = Color.white; //为假，还原默认颜色

            EditorGUILayout.BeginHorizontal(&#34;box&#34;); //开始水平布局
            if (GUILayout.Button(&#34;Select This One&#34;, maxWidth)) //绘制选择按钮，使用maxWidth限制组件宽度
            {
                  currentSelectionIndex = i; //记录选择Index
            }
            EditorGUILayout.LabelField($&#34;这是【{i}】号，他的随机值是：{someValues}&#34;); //显示数据信息
            EditorGUILayout.EndHorizontal(); //结束水平布局
         }

         EditorGUILayout.BeginHorizontal(); //开始水平布局
         EditorGUILayout.LabelField($&#34;当前页数：{page.ToString()} / 总页数：{totalPage}&#34;); //绘制页数信息
         if (GUILayout.Button(&#34;上一页&#34;)) //绘制上一页Button
         {
            page -= 1; //当前页面-1
            page = Mathf.Clamp(page, 1, totalPage); //由于页面数取值是1~totalPage，这里进行一次取值范围约束
         }
         if (GUILayout.Button(&#34;下一页&#34;)) //绘制下一页Button
         {
            page += 1; //当前页面+1
            page = Mathf.Clamp(page, 1, totalPage); //由于页面数取值是1~totalPage，这里进行一次取值范围约束
         }
         EditorGUILayout.EndHorizontal(); //结束水平布局

         EditorGUILayout.EndVertical(); //结束垂直布局
      }

      EditorGUILayout.EndFoldoutHeaderGroup(); //关闭折叠组
      EditorGUILayout.EndScrollView(); //关闭滚动视图
}
}
小结：

实际上，但我们足够熟悉Editor编辑器这一套时，我们完全可以遵循OOP思想，进行编辑器组件的封装继承。
比如定一个总的EditorWindow类，定义一个抽象基类，然后在总窗口使用反射进行类型检索，对所有继承于抽象基类的进行汇总，在面板上显示对应的按钮，点哪个就实例化哪个窗口进行显示。
这样在写一个新窗口时，只需要继承于抽象基类，定义基本的逻辑与绘制就可以了，总窗口会自动地把新窗口归纳整理到自己的菜单栏中。
当然，编辑器的奇技淫巧还有许多，全靠经验积累。
终于写完了，完结撒花呜呜呜。

		自动登录	找回密码
密码			立即注册

[笔记] Unity3d Editor 编辑器扩展功能详解（7）（完结）Editor美化 ...

本帖子中包含更多资源