Unity：GUI笔记(一)——文本、按钮、多选框和单选框、输入框和拖动条、图片绘制和框绘制

写在前面：

写本系列(自用)的目的是回顾已经学过的知识、记录新学习的知识或是记录心得理解，方便自己以后快速复习，减少遗忘。主要是唐老师的课程。

一、重要参数、文本、按钮

GUI相关代码需要写在private void OnGUI()中。该函数每帧执行，相当于是专门用于绘制GUI界面的函数，类似生命周期函数，一般只在其中执行GUI相关界面绘制和操作逻辑。该函数在onDisable之前，LateUpdate之后执行。

1、GUI控件绘制的共同点

都是GUI公共类中提供的静态函数，直接调用即可。

参数都大同小异：

1、位置参数：Rect参数 x，y位置 w，h尺寸

2、显示文本：string参数

3、图片信息：Texture参数

4、综合信息：GUIContent参数

5、自定义样式：GUIStyle参数

每一种控件都有多种重载，是各个参数的排列组合。必备的参数内容：位置信息、显示信息

2、文本控件

文本控件可以在game界面输出文字或者图片。基本使用是：GUI.Label(new Rect(0, 0, 100, 20),"hello")，其中，Rect的四个参数分别为：x坐标、y坐标、长、宽。第public二个参数为显示信息，可以为文字也可以为图片。

综合信息content，可以声明public变量，在面板上修改：

其中text是文本信息，image是图片，Tooltip是提示信息。例如可以设置为鼠标悬停在显示信息时打印提示信息。

若是要自定义样式，可以在传入了位置信息、显示信息后再传入style。style信息也是在面板上编辑会更加方便：

这是示例：

public Texture tex;
public Rect rect1;
public GUIContent content;
public GUIStyle style;
private void OnGUI()
{//基本使用//自定义样式styleGUI.Label(new Rect(0, 0, 100, 20),"hello",style);GUI.Label(new Rect(0, 30, 100, 50), tex);//综合使用GUI.Label(rect1, content);Debug.Log(GUI.tooltip);
}

game面板上：

3、按钮控件

按钮控件的使用与文本控件的使用大同小异。传入位置、显示信息等，即可在game屏幕中显示一个按钮。由于按钮控件的返回值是bool，因此可以接收返回值来进行一些逻辑处理。

public Rect buttonrect;
public GUIContent btnContent;
public GUIStyle btnStyle;private void OnGUI()
{if(GUI.Button(buttonrect, btnContent, btnStyle)){Debug.Log("按钮被点击");}if(GUI.RepeatButton(buttonrect,btnContent)){Debug.Log("长按按钮被点击");}
}

这里说一下常用自定义按钮样式，可以在Inspector面板中进行样式修改：

自定义按钮常态样式与常态字体颜色：

修改后：

设置按钮点击样式与点击字体颜色：

设置鼠标悬停时按钮样式与字体颜色：

设置字体样式、大小：

二、多选框和单选框

1、多选框

(1)基础

多选框使用Unity提供的API：GUI.Toggle()，里面传入的参数与上一节的基本相同，只有第二个参数不同。

GUI.Toggle()返回的是bool值，假如此时多选框被点击，就返回true，如果没有被点击返回false。

第一个参数传入多选框的位置，第二个参数需要传入该多选框是否被选中，如果是true就代表该多选框被选中，false就代表没选中。为了动态控制多选框是否被选中，我们可以传入一个变量来决定当前是true还是false。结合GUI.Toggle()的返回值，我们可以直接将这一帧的返回值传入下一帧的GUI.Toggle()中，这样就可以保证下一帧传入的值为true，代码如下：

private bool isSel;
private bool isSel2;
private void OnGUI()
{isSel = GUI.Toggle(new Rect(0, 0, 100, 30), isSel, "效果开关");isSel2 = GUI.Toggle(new Rect(0, 40, 100, 30), isSel2, "音效开关", style);
}

(2)自定义样式

此外需要说明的是，也可以传入style，这里传入style的处理方式和之前不同：

首先需要导入按键图片，也就是可选项的哪个白色小圈。传入的图片可能过大，单独修改图片大小而不碰字体，需要修改：

才会只修改图片的大小，将宽高均修改为20后：

接下来需要单独移动字体而不动图片，需要修改：

修改完成后：

接下来需要修改点击时图片变化，需要在on Normal中传入图片。

再修改一下汉字颜色和字体，自定义样式就完成了：

2、单选框

单选框的实现是基于多选框的。只需要实现，当一个按钮按下后亮起，其他按钮都自动取消按下就可以，可以通过以下代码逻辑实现：

private int nowSelIndex = 1;
private void OnGUI()
{if(GUI.Toggle(new Rect(0, 80, 100, 30), nowSelIndex == 1, "选项一")){nowSelIndex = 1;}else if(GUI.Toggle(new Rect(0, 120, 100, 30), nowSelIndex == 2, "选项二")){nowSelIndex = 2;}else if(GUI.Toggle(new Rect(0, 160, 100, 30), nowSelIndex == 3, "选项三")){nowSelIndex = 3;}       
}

三、输入框和拖动条

1、输入框

(1)普通输入

普通的输入框使用的API是：GUI.TextField()，里面必须要传入的参数有两个：位置信息和显示信息。位置信息表示的是输入框的位置，为Rect类型，显示信息是输入框中显示的内容，为string类型。

同之前一样，显示的内容需要实时返回，因此与之前一样，我们可以设置一个变量表示显示信息，第二个参数传入这个变量，GUI.TextField()的返回值也是这个变量接收，这样就可以保证显示信息实时变化。

可以再传入第三个参数，表示最大长度，例如当设置为5时，最多输入5个字符。也可以继续传入输入框样式等。

private string inputStr;private void OnGUI()
{inputStr = GUI.TextField(new Rect(0, 0, 100, 30), inputStr,5);
}

(2)密码输入

密码输入框使用的API是：GUI.PasswordField，里面必须要传入的参数有三个：位置信息、显示信息、密码的覆盖字符。位置信息表示的是输入框的位置，为Rect类型，显示信息是输入框中显示的内容，为string类型。覆盖字符自己可选，例如可以传入字符‘*’，用户输入的内容就会自动变为*

同之前一样，显示的内容需要实时返回，不再解释，同样可以再传入第四个参数，表示最大长度。

private string inputPW;private void OnGUI()
{inputPW = GUI.PasswordField(new Rect(0, 50, 100, 30), inputPW, '*');
}

2、拖动条 

(1)水平拖动条

水平拖动条使用的API是：GUI.HorizontalSlider()，里面必须要传入的参数有四个：位置信息、当前值、最小值、最大值。位置信息表示的是输入框的位置，为Rect类型，当前值是当前拖动条所处的位置，最小值是拖动条最小数值，最大值是拖动条最大数值。

同之前一样，当前值需要实时返回，不再解释，同样可以继续传入样式信息，这里不演示。

private float nowValue = 0.5f;private void OnGUI()
{nowValue = GUI.HorizontalSlider(new Rect(0, 100, 100, 50), nowValue, 0, 1);
}

(2)竖直拖动条

竖直拖动条使用的API是：GUI.VerticalSlider()，除了显示的拖动条是竖向的，其余用法与水平拖动条没有区别

private float nowValue = 0.5f;private void OnGUI()
{nowValue = GUI.VerticalSlider(new Rect(0, 150, 50, 100), nowValue, 0, 1);
}

四、图片绘制和框

1、图片绘制

绘制图片使用的API是：GUI.DrawTexture()，其中必须要传入的参数有两个：图片的位置信息和显示的图片。图片位置信息是Rect型，图片为Texture型。

此外，还有三个较为重要的参数：

1、ScaleMode，有三种：

    ScaleToFit：自动根据宽高比进行计算，不会拉变形，会一直保持图片完全显示的状态
ScaleAndCrop：也会通过宽高比来进行计算 但是会裁剪
StretchToFill：始终填充满你传入的Rect范围

2、alpha：控制图片是否开启透明通道，默认为true开启，false不开启

3、imageAspect：自定义宽高比，如果不填默认为0，就会使用图片原始宽高

public Rect texPos;
public Texture tex;
public ScaleMode mode = ScaleMode.StretchToFill;
public bool alpha = true;
public float wh = 0;private void OnGUI()
{GUI.DrawTexture(texPos, tex, mode, alpha, wh);
}

如果alpha为false：

alpha为true：

2、框绘制

框绘制用的比较少，使用API：GUI.Box()，必须传入位置信息，显示信息，显示信息可以为空。也可以传入可选参数样式等。

public Rect texPos;private void OnGUI()
{GUI.Box(texPos, "");
}