UnityGUI学习笔记

Unity-IMGUI学习笔记

IMGUI是什么

IMGUI，即时模式GUI

只是说是UnityGUI是不太准确的，GUI是指Graphical User Interface，也就是图形化用户接口。

其实GUI和UI两者没有几乎没有差别，也就是用来给用户操控的界面。而IMGUI即时GUI是即时按照情况来进行绘制的，跟常规的静态UI设计会有一点差异。

一般在使用方面存在两种差异：

1、几乎不会变，或者功能性UI

例如

• 大厅UI
• 退出确认界面
• 登录界面

2、根据实际数据动态展示的UI

例如

• 好友列表
• 服务器游戏房间列表
• 测试用的工具（比如测试的时候生成一个敌人）

第二种情况就可以使用IMGUI，以下称为即时UI。

那么，使用即时UI就需要用到OnGUI()的方法。

这里仅仅以MonoBehaviour.OnGUI()展开学习。因为OnGUI实际使用差别不大，区别在于使用什么的OnGUI（比如修改Inspector的界面用的EditorWindow.OnGUI()）

IMGUI怎么用

即时UI的操作都要通过OnGUI()函数。

我们先看官方描述

系统调用 OnGUI 来渲染和处理 GUI 事件。

OnGUI 是唯一可以实现“即时模式”GUI (IMGUI) 系统来渲染和处理 GUI 事件的函数。OnGUI 实现可以每帧调用多次（每个事件调用一次）。有关 GUI 事件的更多信息，请参阅 Event 参考。 如果 MonoBehaviour 的 enabled 属性设置为 false，则不会调用 OnGUI()。

OnGUI就好像是对于GUI的一个Update函数，只需要把你的操作都放在这个函数内即可。

然后再来看一个稍微不常规的例子

    void OnGUI() {
            if (GUILayout.Button("Press Me"))
                Debug.Log("Hello!");
        }

为什么说不常规，是因为里面用到的是GUILayout，而不是常规的GUI.Button这样的格式。

现在我们了解两个东西：GUILayout和GUI。

使用 IMGUI 系统时，可使用两种不同的模式来排列和组织 UI：固定布局模式和自动布局模式。

这里官方提到的就是：固定布局模式（GUI）、自动布局模式（GUILayout）

我们从代码上看差别：

首先是GUI

public class GUITest : MonoBehaviour {
            
    void OnGUI ()
    {
        // 创建背景框
        GUI.Box(new Rect(10,10,100,90), "Loader Menu");
    
        // 创建第一个按钮。如果按下此按钮，则会执行 Application.Loadlevel (1)
        if(GUI.Button(new Rect(20,40,80,20), "Level 1"))
        {
            Application.LoadLevel(1);
        }
    }
}

接下来是GUILayout（也是上面那个例子）

    void OnGUI() {
            if (GUILayout.Button("Press Me"))
                Debug.Log("Hello!");
        }

我们单单从GUI或者GUILayout后面跟的Button所需要的参数对比。

• GUI的需要Button(new Rect(20,40,80,20),“Level 1”)

这里的20，40对应在屏幕上的20,40的RectTransfom位置，而80，20对应的宽和高，后面接着的String参数“Level 1”也就是按键上的文字

再来看看GUILayout的

• GUILayout仅仅需要一个“Press Me”,也就是一个String来定义按键内容

这就是差异所在，GUILayout会自动根据父类的情况进行布局，而GUI则需要指定控件的大小和所在位置，也就是Rect。

鉴于GUI整个系统其实都偏向于给开发人员看，其实我会更偏向于使用GUILayout，特别是在修改Inspector的界面上，看起来美观高大上，还不用亲手调，美滋滋。

即时UI的控件总体而言跟平时用到的UnityUI差别不大。详细请参照官网手册，以下列出目录供大家参考

点击名称就会跳转到对应的手册页面

1、Label

一块版，可以输入一行字符串

2、Button

只能单点的按钮，点一次触发一次，按住也是触发一次

3、RepeatButton

按住会持续触发

4、TextField

可编辑单行文本字符串

5、TextArea

可编辑多行文本字符串

6、Toggle

开关

7、Toolbar

Toolbar 多选一，只能有一个生效

8、SelectionGrid

与Toolbar相似，呈网格展示

9、HorizontalSlider

水平滑钮，最小值与最大值之间滑动

10、VerticalSlider

与9一样，差别在于垂直。

11、HorizontalScrollbar

与Slider滑条相似，可用于控制ScrollView，水平

12、VerticalScrollbar

与Slider滑条相似，可用于控制ScrollView，垂直

13、ScrollView

ScrollView控件可显示一个包含更大控件集合的可视区域,就好像一个窗口显示一定的内容。

溢出部分可用Scrollbar控制显示区域

14、Window

与电脑上的程序的窗口相似，但是需要额外的函数支持

15、GUI.changed

要检测用户是否在 GUI 中执行了任何操作（点击按钮、拖动滑动条等），应从脚本中读取 GUI.changed 值。当用户执行了操作时，结果将获得 true，因此可以轻松验证用户输入。

而对于把控件按组或按区域来划分位置两种布局都有其特殊的方式。

固定布局 - 组

需要在代码块内用 GUI.BeginGroup() 和 GUI.EndGroup() 标记，同时BeginGroup需要跟GUI.Button类似的参数，RectTransform

也就是以左上角为零点的x，y，以及宽和高使用起来跟平时UnityUI差不多。组是可以嵌套的。

这个是官方的示例代码

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
    
    void OnGUI () {
        // 在屏幕中央创建一个组
        GUI.BeginGroup (new Rect (Screen.width / 2 - 50, Screen.height / 2 - 50, 100, 100));
        // 现在所有矩形都调整到该组。(0,0) 是该组的左上角。
    
        //我们将创建一个框形，以便能看到该组在屏幕上的位置。
        GUI.Box (new Rect (0,0,100,100),"Group is here");
        GUI.Button (new Rect (10,40,80,30), "Click me");
    
        // 结束我们上面开始的组。记住这一点非常重要！
        GUI.EndGroup ();
    }

}

自动布局 - 区域

区域比较像定义一块板，让自动布局的控件自动在里面调整，也需要BeginArea()和EndArea()，BeginArea()需要一个Rect来定点。

区域只适用于自动布局

官方代码:

// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
    
    void OnGUI () {
        GUILayout.Button ("I am not inside an Area");
        GUILayout.BeginArea (new Rect (Screen.width/2, Screen.height/2, 300, 300));
        GUILayout.Button ("I am completely inside an Area");
        GUILayout.EndArea ();
    }

}

自动布局 - 水平和垂直组

使用方法和上面几个都相同，不同在于会自动适配一块区域，然后按照所选的垂直或者水平摆放控件。

void OnGUI()
    {
        // 将所有控件包裹在指定的 GUI 区域中
        GUILayout.BeginArea (new Rect (0,0,200,60));
    
        // 开始单个水平组
        GUILayout.BeginHorizontal();
    
        // 正常放置按钮
        if (GUILayout.RepeatButton ("Increase max\nSlider Value"))
        {
            maxSliderValue += 3.0f * Time.deltaTime;
        }
    
        // 在按钮旁边垂直排列另外两个控件
        GUILayout.BeginVertical();
        GUILayout.Box("Slider Value: " + Mathf.Round(sliderValue));
        sliderValue = GUILayout.HorizontalSlider (sliderValue, 0.0f, maxSliderValue);
    
        // 结束这些组和区域
        GUILayout.EndVertical();
        GUILayout.EndHorizontal();
        GUILayout.EndArea();
    }