什么是UI系统

Ul是UserInterface(用户界面)的简称

系统的主要学习内容

1.UI控件的使用
2.U控件的事件响应 
3.U的分辨率自适应

基础知识

1、工作原理和主要作用

1、GUI概念

即时模式游戏用户交互界面（IMGUI）
在Unity简称GUI
它是一个代码驱动的UI系统

2、GUI作用

1，作为程员的调试，创建游戏内调试身
2.为脚本组件创建自定义检视面板
3.创建新的编辑器窗口和工具以拓展Unity本身（一般用作内置游戏工具）

3、GUI的工作原理

在继承MonoBehaviour的脚本中的特殊函数里
调用GUI提供的方法，类似生命周期函数private void OnGUI(){//在其中书写GUI相关代码即可显示GUI内容}
注意：1.它每顿热行相当于是用于专门绘制GUI界面的函数2：一般只在其中执行GUI相关界面绘制和操作逻辑3.该函数在【OnDisable】之前【LateUpdate】之后执行4.只要是继承Mono的脚本都可以在OnGUI中绘制GUI

2、基本控件

1、文本和按钮控件

1、GUI控件绘制的共同点

1.他们都是GUI公共类中提供的静态函数，直接调用即可
2.他们的参数都大同小异位置参数：Rect参数 x y位置 w h尺寸显示文本：string参数图片信息：Texture参数综合信息：GUIContent参数自定义样式：GUIStyle参数
3.每一种控件都有多种重载，都是各个参数的排列组合必备的参数内容是【位置信息】和【显示信息】

2、文本控件

public Rect rect; //位置
public Texture text; //图片
public GUIContent content; //综合使用
public GUIStyle style; //自定义样式private void OnGUI()
{1、基本使用GUI.Label(new Rect(0, 0, 100, 20), "文本控件");GUI.Label(rect, text);2、综合使用 (左图，右文字)GUI.Label(rect, content);3、获取GUI控件对应的信息Debug.Log(GUI.tooltip);4、自定义样式GUI.Label(new Rect(0, 0, 100, 20), "文本控件", style);字体路径 C:\Windows\Fonts
}

3、按钮控件

public Rect btnRect;
public GUIContent btnContent;
public GUIStyle btnStyle;private void OnGUI()
{if(GUI.Button(btnRect, btnContent, btnStyle))//Button 按下抬起算一次点击//RepeatButton 长按，一直返回true{Debug.Log("按钮被点击");}
}

2、多选框和单选框

1、多选框

普通样式private bool isSel;private void OnGUI(){isSel = GUI.Toggle(new Rect(0, 0, 100, 30), isSel, "效果开关");}自定义样式修改固定宽高 fixedWidth 和 fixedHeight修改从GUIStyle边缘到内容起始处的空间 padding

2、单选框

private int nowSelIndex = 1;private void OnGUI()
{//Toggle点击后返回trueif(GUI.Toggle(new Rect(0, 100, 100, 20), nowSelIndex == 1, "选项一"))nowSelIndex = 1;if (GUI.Toggle(new Rect(0, 140, 100, 20), nowSelIndex == 2, "选项二"))nowSelIndex = 2;if (GUI.Toggle(new Rect(0, 180, 100, 20), nowSelIndex == 3, "选项三"))nowSelIndex = 3;
}

3、输入框和拖动条

1、输入框

普通输入private string inputStr;private void OnGUI(){//5为最大输入长度inputStr = GUI.TextField(new Rect(0, 0, 100, 30), inputStr,5);}
密码输入private string inputPW;private void OnGUI(){inputPW = GUI.PasswordField(new Rect(0, 0, 100, 30), inputPW, '*');}

2、拖动条

水平拖动条private float nowValue = 0.5f;private void OnGUI(){nowValue = GUI.HorizontalSlider(new Rect(0, 100, 100, 50), nowValue, 0, 1);}
竖直拖动条nowValue = GUI.VerticalSlider(new Rect(0, 150, 50, 100), nowValue, 0, 1);

4、图片绘制和框

1、图片绘制

public Rect texPos;
public Texture tex;
public ScaleMode mode; //显示模式//ScaleAndCrop: 通过宽高裁剪//ScaleToFit: 缩放不会变形//ScaleToFill: 填充满宽高（默认）
public bool alpha; //背景是否透明
private void OnGUI()
{GUi.DrawTexture(texPos, tex, mode, alpha);
}

2、框绘制

GUI.Box(texPos, "");

3、复合控件

1、工具栏和选择网格

1、工具栏

private int toolbarIndex = 0;
private string[] toolbarInfos = new string[] { "选项一", "选项二", "选项三" };private void OnGUI()
{toolbarIndex = GUI.Toolbar(new Rect(0, 0, 200, 30), toolbarIndex, toolbarInfos);
}
private void DrawWindow(int id)
{switch (id){case 1:GUI.Button(new Rect(0, 30, 30, 20), "按钮1");break;case 2:GUI.Button(new Rect(0, 30, 30, 20), "按钮2");break;case 3:GUI.DragWindow();break;} 
}

2、选择网格

private int selGridIndex = 0;
private void OnGUI()
{//xCount 水平方向最多显示数量，超过的另起一行selGridIndex = GUI.SelectionGrid(new Rect(0, 50, 200, 90), selGridIndex, toolbarInfos, 1);
}

2、滚动视图和分组

1、分组

用于批量控制空间位置
public Rect groupPos;
private void OnGUI()
{GUI.BeginGroup(groupPos);GUI.Button(new Rect(0, 0, 100, 50), "按钮");GUI.Label(new Rect(0, 60, 100, 20), "Lable");GUI.EndGroup();
}

2、滚动列表

public Rect scPos; //可视范围
public Rect showPos; //内容
private Vector2 nowPos;
private string[] strs = new string[] { "选项一", "选项二", "选项三" };private void OnGUI()
{nowPos = GUI.BeginScrollView(scPos, nowPos, showPos);GUI.Toolbar(new Rect(0, 0, 300, 50), 0, strs);GUI.EndScrollView();
}

3、窗口相关

1、窗口

private void DrawWindow(int id)
{GUI.Button(new Rect(0, 30, 30, 20), "按钮");
}
private void OnGUI()
{//参数1：idGUI.Window(1, new Rect(100, 100, 200, 150), DrawWindow, "窗口");
}

2、模态窗口

优先处理窗口（警告窗口）GUI.ModalWindow(2, new Rect(100, 100, 200, 150), DrawWindow, "模态窗口");

3、拖动窗口

dragWinPos = GUI.Window(3, dragWinPos, DrawWindow, "窗口");
//参数用来设置可拖动位置
private void DrawWindow(int id)
{GUI.DragWindow();
}

4、自定义整体样式

1、GUIskin

1、全局颜色

全局着色，影响背景和文本颜色GUI.color = Color.red;
文本着色GUI.contentColor = Color.yellow;
背景元素着色GUI.backgroundColor = Color.red;
注意：会和全局颜色相乘

2、整体皮肤样式

public GUISkin skin;GUI.skin = skin;

2、GUILayout

1、GUILayout 自动布局

GUILayout.BeginArea(new Rect(100,100,100,100)); //设置整体位置，宽高为可见范围
//GUI.BeginGroup(new Rect(100,100,100,100)); GUI综合使用
GUILayout.BeginHorizontal(); //水平布局
GUILayout.BUtton("按钮");
GUILayout.Endorizontal();
GUILayout.EndArea;
GUI.EndGroup();

2、GUILayoutOption 布局选项

GUILayout.BUtton("按钮",GUILayout.With(300));控件的固定宽高GUILayout.Width(300); GUILayout.Height(200); 
充许控件的最小宽高GuILayout.Minwidth(50); GuILayout.MinHeight(50));
充许控件的最大宽高GuILayout.Maxwidth(100) GUILayout.MaxHeight(100)); 
充许或禁止水平拓展GuILayout.Expandwidth(true); //允许GUILayout.ExpandHeight(false); //禁止GUILayout.ExpandHeight(true); //允许GUILayout.ExpandHeight(false); //禁止

编辑模式下让指定代码运行

添加特性[ExecuteAlways]

实践小项目

1、需求分析

1、位置信息类

位置信息类中心点位置偏移位置宽高最终位置中心点对齐方式屏幕对齐方式

2、控件基类

控件基类位置信息内容信息自定义样式是否开启自定义样式

2、九宫格布局概念

九宫格原点:左上(0,0)  上(w/2,0)    右上(w,0)左(0,h/2)  中(w/2,h/2)  右(w,h/2)左下(0,h)  下(w/2,h)    右下(w,h)控件位置:(0,0)      (-cw/2,0)      (-cw,0)(0,-ch/2)  (-cw/2,-ch/2)  (-cw,-ch/2)(0,-ch)    (-cw/2,-ch)    (-cw,-ch)控件坐标计算公式:相对屏幕位置 + 中心点偏移位置 + 偏移位置

3、控件位置信息类

CustomGUIPos

using UnityEngine;public enum E_Alignment_Type
{Up, Down, Left, Right,Center,Left_Up, Left_Down, Right_Up, Right_Down,
}public class CustomGUIPos
{private Rect rpos = new Rect(0, 0, 100, 100);//屏幕九宫格对齐方式public E_Alignment_Type screen_Alignment_Type;//控件中心对齐方式public E_Alignment_Type control_Center_Alignment_Type;//偏移位置public Vector2 pos;//控件宽高public float width = 100;public float height = 50;//中心点private Vector2 centerPos;//控件中心点偏移位置private void CalcCenterPos(){switch (control_Center_Alignment_Type){case E_Alignment_Type.Up:centerPos.x = -width / 2;centerPos.y = 0;break;case E_Alignment_Type.Down:centerPos.x = -width / 2;centerPos.y = -height;break;case E_Alignment_Type.Left:centerPos.x = 0;centerPos.y = -height / 2;break;case E_Alignment_Type.Right:centerPos.x = -width;centerPos.y = -height / 2;break;case E_Alignment_Type.Center:centerPos.x = -width / 2;centerPos.y = -height / 2;break;case E_Alignment_Type.Left_Up:centerPos.x = 0;centerPos.y = 0;break;case E_Alignment_Type.Left_Down:centerPos.x = 0;centerPos.y = -height;break;case E_Alignment_Type.Right_Up:centerPos.x = -width;centerPos.y = 0;break;case E_Alignment_Type.Right_Down:centerPos.x = -width;centerPos.y = -height;break;}}//最终位置private void CalcPos(){switch (screen_Alignment_Type){case E_Alignment_Type.Up://相对屏幕位置 + 中心点偏移位置 + 偏移位置rpos.x = Screen.width / 2 + centerPos.x + pos.x;rpos.y = 0 + centerPos.y + pos.y;break;case E_Alignment_Type.Down:rpos.x = Screen.width / 2 + centerPos.x + pos.x;rpos.y = Screen.height + centerPos.y - pos.y;break;case E_Alignment_Type.Left:rpos.x = 0 + centerPos.x + pos.x;rpos.y = Screen.height / 2 + centerPos.y + pos.y;break;case E_Alignment_Type.Right:rpos.x = Screen.width + centerPos.x - pos.x;rpos.y = Screen.height / 2 + centerPos.y + pos.y;break;case E_Alignment_Type.Center:rpos.x = Screen.width / 2 + centerPos.x + pos.x;rpos.y = Screen.height / 2 + centerPos.y + pos.y;break;case E_Alignment_Type.Left_Up:rpos.x = centerPos.x + pos.x;rpos.y = centerPos.y + pos.y;break;case E_Alignment_Type.Left_Down:rpos.x = centerPos.x + pos.x;rpos.y = Screen.height + centerPos.y - pos.y;break;case E_Alignment_Type.Right_Up:rpos.x = Screen.width + centerPos.x - pos.x;rpos.y = centerPos.y + pos.y;break;case E_Alignment_Type.Right_Down:rpos.x = Screen.width + centerPos.x - pos.x;rpos.y = Screen.height + centerPos.y - pos.y;break;}}public Rect Pos{get{//计算中心点偏移CalcCenterPos();//相对屏幕坐标点CalcPos();//修改控件的宽高rpos.width = width;rpos.height = height;return rpos;}}
}

4、控件父类

CustomGUIControl

using UnityEngine;public enum E_style_OnOff
{On,Off,
}
public class CustomGUIControl : MonoBehaviour
{//位置信息public CustomGUIPos guiPos;//显示内容信息public GUIContent content;//自定义样式public GUIStyle style;//自定义样式开关public E_style_OnOff styleOn_or_Off = E_style_OnOff.Off;private void OnGUI(){switch (styleOn_or_Off){case E_style_OnOff.On:StyleOnDraw();break;case E_style_OnOff.Off:StyleOffDraw();break;}}protected virtual void StyleOnDraw(){//GUI.Button(guiPos.Pos, content, style);}protected virtual void StyleOffDraw(){//GUI.Button(guiPos.Pos, content);}
}

5、父对象控制绘制顺序

修改CustomGUIControl

//public void OnGUI()修改为
public void DrawGUI(){}

CustomGUIRoot

using UnityEngine;[ExecuteAlways] //编辑模式下能看到GUI
public class CustomGUIRoot : MonoBehaviour
{//存储子对象所有的GUI控件的容器private CustomGUIControl[] allControls;void Start(){allControls = this.GetComponentsInChildren<CustomGUIControl>();}//同一绘制子对象控件private void OnGUI(){if (!Application.isPlaying){//得到父类脚本allControls = this.GetComponentsInChildren<CustomGUIControl>();}//可以控件控件的绘制顺序for (int i = 0; i < allControls.Length; i++){//绘制每个控件allControls[i].DrawGUI();}}
}

6、自定义常用控件

1、自定义文本和按钮

CustomGUILable

using UnityEngine;public class CustomGUILable : CustomGUIControl
{protected override void StyleOffDraw(){GUI.Label(guiPos.Pos, content);}protected override void StyleOnDraw(){GUI.Label(guiPos.Pos, content, style);}
}

CustomGUIButton

using UnityEngine;
using UnityEngine.Events;public class CustomGUIButton : CustomGUIControl
{public event UnityAction clickEvent;protected override void StyleOffDraw(){if (GUI.Button(guiPos.Pos,content)){clickEvent?.Invoke();}}protected override void StyleOnDraw(){if (GUI.Button(guiPos.Pos, content, style)){clickEvent?.Invoke();}}
}

2、自定义多选框

CustomGUIToggle

using UnityEngine;
using UnityEngine.Events;public class CustomGUIToggle : CustomGUIControl
{public bool isSel;public event UnityAction<bool> changeValue;private bool isOldSel;protected override void StyleOffDraw(){isSel = GUI.Toggle(guiPos.Pos, isSel, content);if(isOldSel != isSel ){changeValue?.Invoke(isSel);isOldSel = isSel;}}protected override void StyleOnDraw(){isSel = GUI.Toggle(guiPos.Pos, isSel, content, style);if (isOldSel != isSel){changeValue?.Invoke(isSel);isOldSel = isSel;}}
}

3、自定义多选框控件(单选)

CustomGUIToggleGroup

using UnityEngine;public class CustomGUIToggleGroup : MonoBehaviour
{public CustomGUIToggle[] toggles;private CustomGUIToggle frontTrueTog;void Start(){if (toggles.Length == 0)return;for (int i = 0; i < toggles.Length; i++){CustomGUIToggle toggle = toggles[i];toggle.changeValue += (value) =>{if(value){for (int j = 0; j < toggles.Length; j++){//其他的变falseif (toggles[j] != toggle){toggles[j].isSel = false;}}frontTrueTog = toggle;}else if (toggle == frontTrueTog){toggle.isSel = true;}};}}
}

4、自定义输入框和拖动条

CustomGUIInput

using UnityEngine;
using UnityEngine.Events;public class CustomGUIInput : CustomGUIControl
{public event UnityAction<string> textChange;private string oldStr = "";protected override void StyleOffDraw(){content.text = GUI.TextField(guiPos.Pos,content.text);if(oldStr != content.text){textChange?.Invoke(oldStr);oldStr = content.text;}}protected override void StyleOnDraw(){content.text = GUI.TextField(guiPos.Pos, content.text, style);if (oldStr != content.text){textChange?.Invoke(oldStr);oldStr = content.text;}}
}

CustomGUISlider

using UnityEngine;
using UnityEngine.Events;public enum E_Slider_Type
{Horizontal, //水平Vertical, //竖直
}
public class CustomGUISlider : CustomGUIControl
{public float minValue = 0;public float maxValue = 1;public float nowValue = 0;public E_Slider_Type type = E_Slider_Type.Horizontal;public GUIStyle styleThumb; //小按钮的stylepublic event UnityAction<float> changeValue;private float oldValue = 0;protected override void StyleOffDraw(){switch (type){case E_Slider_Type.Horizontal:nowValue = GUI.HorizontalSlider(guiPos.Pos, nowValue, minValue, maxValue);break;case E_Slider_Type.Vertical:nowValue = GUI.VerticalSlider(guiPos.Pos, nowValue, minValue, maxValue);break;}if (oldValue!=nowValue){changeValue?.Invoke(nowValue);oldValue = nowValue;}}protected override void StyleOnDraw(){switch (type){case E_Slider_Type.Horizontal:nowValue = GUI.HorizontalSlider(guiPos.Pos, nowValue, minValue, maxValue, style, styleThumb);break;case E_Slider_Type.Vertical:nowValue = GUI.VerticalSlider(guiPos.Pos, nowValue, minValue, maxValue, style, styleThumb);break;}if (oldValue != nowValue){changeValue?.Invoke(nowValue);oldValue = nowValue;}}
}

5、自定义图片绘制

CustomGUITexture

using UnityEngine;public class CustomGUITexture : CustomGUIControl
{public ScaleMode scaleMode = ScaleMode.StretchToFill;protected override void StyleOffDraw(){GUI.DrawTexture(guiPos.Pos,content.image, scaleMode);}protected override void StyleOnDraw(){GUI.DrawTexture(guiPos.Pos, content.image, scaleMode);}
}