UnityUI系统 - GUI

UI概述

UI是User Interface（用户界面），用户界面就是游戏中的登录，注册，背包，人物等等功能面板，游戏中最多的逻辑功能就是和UI相关的功能

Unity中的UI系统可以理解为Unity提供给我们制作UI功能的手段

UI系统的主要学习内容

1.UI控件的使用

2.UI控件的事件响应

3.UI的分辨率自适应

GUI的工作原理和主要作用

GUI是什么

GUI全称 即时模式游戏用户交互界面（IMGUI）

在Unity中一般简称为GUI

它是一个代码驱动的UI系统

GUI的主要作用

1.作为程序员的调试工具，创建游戏内调试工具

2.为脚本组件创建自定义检视面板

3.创建新的编辑器窗口和工具以拓展Unity本身（一般用作内置游戏工具）

注意：不要用它为玩家制作UI功能

GUI的工作原理

在继承MonoBehaviour的脚本中的特殊函数里，调用提供GUI的方法

类似生命周期函数

 private void OnGUI()
    {
        //在其中书写 GUI相关代码，即可显示GUI内容
    }

注意：

1.它每帧执行 相当于专门用于绘制GUI界面的函数

2.一般只在其中执行GUI相关界面绘制和操作逻辑

3.该函数在 OnDisable之前 LateUpdate之后执行

4.只要继承Mono脚本，都可以在OnGUI中绘制GUI

GUI基本控件

文本和按钮控件

GUI 控件绘制的共同点

1.他们都是GUI公共类中提供的静态函数 直接调用即可

2.他们的参数大同小异

位置参数 Rect参数        x y 位置        w h 尺寸

显示文本 string参数

图片信息 Texture参数

综合信息 GUIContent参数

自定义样式 GUIStyle参数

3.每一种控件都有多种重载，都是各个参数的排列组合

        必备的参数内容 ： 位置信息和显示信息

文本控件

    public Texture tex;
    public Rect rect;
    public Rect rect1;
    public GUIContent content;
    public GUIStyle style;

    private void OnGUI()
    {
        #region 基本使用
        //左上角为原点
        GUI.Label(new Rect(0, 0, 100, 20), "阿喆你好");
        //图片会保持原始宽高比，最大也就原始大小
        GUI.Label(rect, tex);

        //综合使用  public GUIContent(string text, Texture image, string tooltip)
        //左边放图 右边文字
        GUI.Label(rect1, content);
        //可以获取当前鼠标或键盘选中对应的控件的tooltip
        Debug.Log(GUI.tooltip);

        //自定义样式 （GUIStyle参数）
        GUI.Label(new Rect(0, 0, 100, 20), "阿喆你好",style);
        #endregion

    }

GUIStyle参数（可以看官方API手册）

按钮控件

    public Rect btnRect;
    public GUIContent btnContent;
    public GUIStyle btnSyle;

    private void OnGUI()
    {
      

        #region 按钮控件
        //基本使用

        //综合使用 (加入style)
        if (GUI.Button(btnRect, btnContent, btnSyle))
        {
            //返回是否点击，要在按钮范围内按下并抬起
            Debug.Log("按钮被点击");
        }

        if (GUI.RepeatButton(btnRect, btnContent))
        {
            //按住就true，抬起结束
            Debug.Log("长按按钮被点击");
        }
        #endregion
    }

多选框和单选框

    private bool isSel;
    private bool isSel2;
    public GUIStyle style;

    private int nowSelIndex = 1;
    private void OnGUI()
    {
        #region 知识点一 多选框
        #region 普通样式
        //参数二 表示是否选中(每一帧都会执行)
        //Toggle返回bool类型,因此可以这样写
        isSel =  GUI.Toggle(new Rect(0, 0, 100, 30), isSel, "效果开关");
        #endregion

        #region 自定义样式
        //修改固定宽高 fixedWidth 和 fixedHeight ,解决图片大小问题，不影响点击区域(由rect决定)
        //修改从GUIStyle边缘到内容起始处的控件 padding  偏移位置
        //更改 on Hover，on Normal这些，因为多选框只有激活和未激活
        isSel2 = GUI.Toggle(new Rect(0, 20, 100, 40), isSel2, "音效开关",style);
        #endregion

        #endregion
        #region 知识点二 单选框
        //单选框是 基于多选框的实现
        //一个true，其它false
        //通过int标识 来决定是否选中
        if(GUI.Toggle(new Rect(0, 100, 100, 30), nowSelIndex == 1, "选项一"))
        {
            nowSelIndex = 1;
        }
        if (GUI.Toggle(new Rect(0, 150, 100, 30), nowSelIndex == 2, "选项二"))
        {
            nowSelIndex = 2;
        }
        if (GUI.Toggle(new Rect(0, 200, 100, 30), nowSelIndex == 3, "选项三"))
        {
            nowSelIndex = 3;
        }
        
        #endregion
    }

输入框和拖动条

    private string inputStr = "";
    private string inputPW = "";

    private float nowValue = 0.5f;
    private void OnGUI()
    {
        #region 知识点一 输入框

        #region 普通输入
        //参数二 为默认内容，因此赋值能让其真正改变
        //参数三 为最大输入长度
        inputStr = GUI.TextField(new Rect(0, 0, 100, 30), inputStr, 5);
        #endregion

        #region 密码输入
        //参数三为替换字符
        //参数四 为最大输入长度
        inputPW = GUI.PasswordField(new Rect(0, 50, 100, 30), inputPW, '*');
        #endregion
        #endregion

        #region 知识点二 拖动条

        #region 水平拖动条
        //当前的值
        //最小值 left
        //最大值 right
        //nowValue 在0 到 1 之间变换
        nowValue = GUI.HorizontalSlider(new Rect(0, 100, 100, 50), nowValue, 0, 1);
        #endregion

        #region 竖直拖动条
        nowValue = GUI.VerticalSlider(new Rect(0, 150, 50, 100), nowValue, 0, 1);
        #endregion
        #endregion
    }

图片绘制和框

 public Rect texPos;
    public Texture tex;
    public ScaleMode mode = ScaleMode.StretchToFill;
    public bool alpha = true;
    public float wh = 0;
    private void OnGUI()
    {
        #region 知识点一 图片绘制
        //参数三 缩放比模式 ScaleMode:
        //ScaleAndCrop 也会通过宽高比计算图片，但会进行裁剪
        //ScaleToFit: 自动根据宽高比进行计算 不会拉变形
        //StretchToFill 始终填充满你传入的Rect范围
        //参数四 alpha混合是否开启 alphaBlend  是否开启透明通道
        //参数五 imageAspect 自定义宽高比 不填默认为0，使用图片原始宽高比
        GUI.DrawTexture(texPos, tex,mode,alpha,wh);
        #endregion

        #region 知识点二 框绘制
        GUI.Box(texPos,"");
        #endregion
    }

GUI复合控件

工具栏和选择网格

     private int toolbarIndex = 0;
    private string[] toolbarInfos = new string[] {"选项一","选项二","选项三"};

    private int selGridIndex = 0;
    
    private void OnGUI()
    {
        #region 知识点一 工具栏
        toolbarIndex = GUI.Toolbar(new Rect(0, 0, 200, 30), toolbarIndex, toolbarInfos);
        //工具栏帮助我们根据不同的返回索引 来处理不同的逻辑
        switch (toolbarIndex)
        {
            case 0:
                break;
            case 1:
                break;
            case 2:
                break;
        }
        #endregion

        #region 知识点二 选择网格
        //相对toolbar多了一个参数 xCount 代表水平方向 最多显示的按钮数量
        //多了会换行
        selGridIndex = GUI.SelectionGrid(new Rect(0, 50, 200, 60), selGridIndex, toolbarInfos, 2);
        #endregion
    }

滚动列表和分组

    public Rect groupPos;

    public Rect scPos;
    public Vector2 nowPos;
    public Rect showPos;

    private string[] strs = new string[] { "123", "234", "222" ,"111"};
    private void OnGUI()
    {
        #region 知识点一 分组
        //用于批量控制控件位置
        //可以理解为 包裹着的控件加了一个父对象
        //可以通过控制分组来控制包裹控件的位置
        //改变groupPos,可以改变包裹控件位置,
        //包裹空间位置为相对父对象的位置
        GUI.BeginGroup(groupPos);
        GUI.Button(new Rect(0, 0, 100, 50), "测试按钮");
        GUI.Label(new Rect(0, 60, 100, 20), "label信息");
        GUI.EndGroup();
        #endregion

        #region 知识点二 滚动列表
        //会生成一横一竖两个滚动条
        //参数一 position 位置和宽高 宽高表示的是展示框的大小
        //参数二 scrollPosition Vector2类型 滚动条在x，y上的位置
        //       分别表示横滚动条的位置和竖滚动条的位置
        //参数三为viewRect为实际内容
        //参数四五 默认为 false，表示当实际内容的宽/高小于position的宽/高，
        //不生成滚动条
        nowPos = GUI.BeginScrollView(scPos,nowPos,showPos,false,false);
        GUI.Toolbar(new Rect(0, 0, 300, 50), 0,strs);
        GUI.Toolbar(new Rect(0, 60, 300, 50), 0, strs);
        GUI.Toolbar(new Rect(0, 120, 300, 50), 0, strs);
        GUI.Toolbar(new Rect(0, 180, 300, 50), 0, strs);
        GUI.EndScrollView();
        #endregion
    }

窗口

private Rect dragWinPos = new Rect(400,400,200,150);
    private void OnGUI()
    {
        #region 知识点一 窗口
        //参数一 id 唯一
        //参数三 委托参数 用于 绘制窗口用的函数 传入即可
        //参数四 显示内容
        GUI.Window(1, new Rect(100, 100, 200, 150), DrawWindow, "测试窗口");
        //id 除了区分不同窗口 还可以在一个函数中 去处理多个窗口的逻辑，通过id区分
        GUI.Window(2, new Rect(200, 200, 200, 150), DrawWindow, "测试窗口");
        #endregion

        #region 知识点二 模态窗口
        //模态窗口 可以让该其它控件不在有用
        //可以理解为该窗口在最上层，其它按钮点击不到
        //只能点击该窗口上控件

        //GUI.ModalWindow(3, new Rect(300, 100, 200, 150), DrawWindow, "模态窗口");

        #endregion

        #region 知识点三 拖动窗口
        //位置赋值只是前提
        //可以在DrawWindow中调用GUI.DragWindow
        dragWinPos = GUI.Window(4,dragWinPos,DrawWindow,"拖动窗口");
        #endregion
    }

    private void DrawWindow(int id)
    {
        switch (id)
        {
            case 1:
                //相对于窗口位置
                GUI.Button(new Rect(0, 0, 30, 20), "1");
                break;
            case 2:
                GUI.Button(new Rect(0, 0, 30, 20), "2");
                break;
            case 3:
                GUI.Button(new Rect(0, 0, 30, 20), "3");
                break;
            case 4:
                //该API 写在窗口函数中调用 可以让窗口被拖动
                //传入Rect参数的重载 作用
                //决定窗口哪一部分 可以被拖动 超过窗口范围没用
                //默认不填 全可以拖动，
                GUI.DragWindow();
                break;
        }
        
    }

自定义整体样式

自定义皮肤Guiskin

 public GUIStyle style;
    
    public GUISkin skin;
    private void OnGUI()
    {
        #region 知识点一 全局颜色
        //全局的着色颜色 影响背景和文本
        //按钮是偏红，字体全红
        GUI.color = Color.red;
        //文本着色颜色 会和全局颜色相乘
        GUI.contentColor = Color.yellow;

        //背景元素着色 会和全局颜色相乘
        GUI.backgroundColor = Color.red;

        GUI.Button(new Rect(0, 0, 100, 30), "测试按钮");
        GUI.Label(new Rect(0, 50, 100, 30), "测试按钮");
        //style 自定义后也会被全局改变，改回白色可以变回去
        GUI.Button(new Rect(0, 100, 100, 30), "测试按钮", style);
        #endregion

        #region 知识点二 整体皮肤样式
        //置空等于没设置 用默认
        //可以在project 右键 创建 GUI Skin
        GUI.skin = skin;
        //虽然设置了皮肤，但是绘制时 用了GUIStyle参数，皮肤就没用了
        GUI.Button(new Rect(0, 150, 100, 30), "测试按钮");
        //它可以帮助我们整套设置 自定义样式
        //相对单个控件设置Style要方便一些
        #endregion


    }

GUILayout自动布局

private void OnGUI()
    {
        #region 知识点一 GUILayout 自动布局
        //主要用于进行编辑器开发，如果用来做游戏UI不太合适
        GUILayout.BeginArea(new Rect(100, 100, 100, 100));
        //默认数值 这里设置水平
        GUILayout.BeginHorizontal();

        GUILayout.Button("123");
        GUILayout.Button("12342141");
        GUILayout.Button("15361");
        GUILayout.Button("123");
        GUILayout.EndHorizontal();
        GUILayout.EndArea();
        //也可以将 GUILayout.BeginArea(new Rect(100, 100, 100, 100))替换为
        //GUI.BeginGroup来进行布局
        #endregion

        #region 知识点二 GUILayoutOption 布局选项
        //控件的固定宽高
        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.Button("123", GUILayoutOption);
        //会发现GUILayoutOption去查看是个空的类，看不了，
        //但GUILayout.MinWidth(50)返回的是GUILayoutOption类
        //因此直接调用
        GUILayout.Button("123",GUILayout.Width(300));

        #endregion
    }

总结

优点：

简单快捷

代码控制

缺点：

重复工作量繁多

控件绘制相关代码很多

最大缺点：

必须运行时才能去查看结果

不支持分辨率自适应

主要用处：

用于进行Unity内置 编辑器， 调试工具， 编辑工具 等等相关开发，一般不会用做游戏UI