【Unity3D】GUI控件

1 前言

        Unity 3D 提供了 GUI、NGUI、UGUI 等图形系统，以增强玩家与游戏的交互性。GUI 代码需要在 OnGUI 函数中调用才能绘制，布局分为手动布局（GUI）和自动布局（GUILayout）。

• 手动布局：需要传人Rect 参数来指定屏幕绘制区域，通过 GUI 调用控件
• 自动布局：不需要传入 Rect 参数，自动在屏幕中布局，通过 GUILayout 调用控件

        注意：屏幕坐标系以左上角为原点。

        GUI 中主要包含以下控件：

• Label：绘制文本和图片
• Box：绘制一个图形框
• Button：绘制按钮，响应单击事件
• RepeatButton：绘制一个处理持续按下事件的按钮
• TextField：绘制一个单行文本输入框
• PasswordField：绘制一个秘密输入框
• TextArea：绘制一个多行文本输入框
• Toggle：绘制一个开关
• Toolbar：绘制工具条
• SelectionGrid：绘制一组网格按钮
• HorizontalSlider：绘制一个水平方向的滑动条
• VerticalSlider：绘制一个垂直方向的滑动条
• HorizontalScrollbar：绘制一个水平方向的滚动条
• VerticalScrollbar：绘制一个垂直方向的滚动条
• Window：绘制一个窗口，可以用于放置控件

2 GUI 控件

        1）Label：绘制文本和图片

// 绘制文本
public static void Label(Rect position, string text, GUIStyle style)
// 绘制图片
public static void Label(Rect position, Texture image, GUIStyle style)
// 应用
GUI.Label(new Rect (10, 10, 100, 20), "Hello World!");
GUI.Label(new Rect (100, 100, texture.width, texture.height), texture);

        2）Box：绘制一个图形框

// 绘制带边框的文本
public static void Box(Rect position, string text, GUIStyle style)
// 绘制带边框图片
public static void Box(Rect position, Texture image, GUIStyle style)

        3）Button：绘制按钮，响应单击事件

// 绘制带文本的按钮，单击抬起时返回true
public static bool Button(Rect position, string text, GUIStyle style)
// 绘制带图片的按钮，单击抬起时返回true
public static bool Button(Rect position, Texture image, GUIStyle style)

        4）RepeatButton：绘制一个处理持续按下事件的按钮

// 绘制带文本的按钮，按住时持续返回true
public static bool RepeatButton(Rect position, string text, GUIStyle style)
// 绘制带图片的按钮，按住时持续返回true
public static bool RepeatButton(Rect position, Texture image, GUIStyle style)

        5）TextField：绘制一个单行文本输入框

// 绘制单行文本框
public static string TextField(Rect position, string text, int maxLength, GUIStyle style)
// 应用
private string str = "Hello World!";
private void OnGUI() {
    str = GUI.TextField(new Rect (10, 10, 100, 20), str);
	Debug.Log(str);
}

        6）PasswordField：绘制一个秘密输入框

// 绘制密码框，maskChar为显示的符号，通常为"*"号
public static string PasswordField(Rect position, string password, char maskChar, int maxLength, GUIStyle style)

        7）TextArea：绘制一个多行文本输入框

// 绘制多行文本输入框
public static string TextArea(Rect position, string text, int maxLength, GUIStyle style)

        8）Toggle：绘制一个开关

// 绘制带文本的开关
public static bool Toggle(Rect position, bool value, string text, GUIStyle style)
// 绘制带图片的开关
public static bool Toggle(Rect position, bool value, Texture image, GUIStyle style)

        9）Toolbar：绘制工具条

// 绘制文本工具条
public static int Toolbar(Rect position, int selected, string[] texts, GUIStyle style)
// 绘制图片工具条
public static int Toolbar(Rect position, int selected, Texture[] images, GUIStyle style)
// 应用
int selected = GUI.Toolbar(new Rect (10, 10, 300, 50), 1, new string[]{"first", "second", "third", "four"});

        10）SelectionGrid：绘制一组网格按钮

// 绘制文本网格按钮, xCount为水平按钮数
public static int SelectionGrid(Rect position, int selected, string[] texts, int xCount, GUIStyle style)
// 绘制图片网格按钮, xCount为水平按钮数
public static int SelectionGrid(Rect position, int selected, Texture[] images, int xCount, GUIStyle style)
// 应用
int selected = GUI.SelectionGrid(new Rect (10, 10, 100, 50), 1, new string[]{"first", "second", "third", "four"}, 2);

        11）HorizontalSlider：绘制一个水平方向的滑动条

// 绘制水平滑动条, value: 滑动条显示值, leftValue: 滑动条左值, rightValue: 滑动条右值
public static float HorizontalSlider(Rect position, float value, float leftValue, float rightValue, GUIStyle slider, GUIStyle thumb)
// 应用
float process = GUI.HorizontalSlider(new Rect (10, 10, 100, 50), 9f, 5f, 10f);

        12）VerticalSlider：绘制一个垂直方向的滑动条

// 绘制垂直滑动条, value: 滑动条显示值, leftValue: 滑动条左值, rightValue: 滑动条右值
public static float VerticalSlider(Rect position, float value, float leftValue, float rightValue, GUIStyle slider, GUIStyle thumb)
// 应用
float process = GUI.VerticalSlider(new Rect (10, 10, 50, 100), 9f, 5f, 10f);

        13）HorizontalScrollbar：绘制一个水平方向的滚动条

// 绘制水平滚动条, value: 滑动条显示值, size: 活塞大小, leftValue: 滑动条左值, rightValue: 滑动条右值
public static float HorizontalScrollbar(Rect position, float value, float size, float leftValue, float rightValue, GUIStyle style)
// 应用
float process = GUI.HorizontalScrollbar(new Rect (10, 10, 100, 50), 7f, 3f, 5f, 10f);

        14）VerticalScrollbar：绘制一个垂直方向的滚动条

// 绘制垂直滚动条, value: 滑动条显示值, size: 活塞大小, leftValue: 滑动条左值, rightValue: 滑动条右值
public static float VerticalScrollbar(Rect position, float value, float size, float leftValue, float rightValue, GUIStyle style)
// 应用
float process = GUI.VerticalScrollbar(new Rect (10, 10, 100, 50), 7f, 3f, 5f, 10f);

        15）Window：绘制一个窗口，可以用于放置控件

// 绘制窗口
public static Rect Window(int id, Rect clientRect, WindowFunction func, Texture image, GUIStyle style)
public static Rect Window(int id, Rect clientRect, WindowFunction func, string text)
public static Rect Window(int id, Rect clientRect, WindowFunction func, Texture image)
public static Rect Window(int id, Rect clientRect, WindowFunction func, GUIContent content)
public static Rect Window(int id, Rect clientRect, WindowFunction func, string text, GUIStyle style)
public static Rect Window(int id, Rect clientRect, WindowFunction func, GUIContent title, GUIStyle style)

3 GUILayout 控件

        GUILayout 中也有 1) ~ 15) 中控件，但是不需要传入Rect 属性，以下列举部分控件的例子：

GUILayout.Label("Hello world");
GUILayout.Button("您好");

4 GUISkin

         在 Assets 窗口右键，选择【Create → GUI Skin】，创建 GUISkin 资源，定制 GUI 控件的属性。

         在代码中定义和使用 GUISkin 如下：

public GUISkin skin;
 
private void Awake() {
    GUI.skin = skin;
}

         将编辑后的 GUISkin 资源文件拖拽到如下红框中，以实现自定义 GUI 控件显示效果。