UI

UI设计又称界面设计，是指对软件的人机交互、操作逻辑、界面美观的整体设计，UI就相当于人可以看到的界面，并且可以对UI进行交互。

Canvas 画布

所有的UI组件都在画布的子集里，画布相当于所有UI组件的容器，每当创建一个UI物体时，Canvas都会自动创建，所有的UI元素都必须是Canvas的子物体，和Canvas一同创建的还有一个EventSystem，它是一个基于Input的事件系统，可以对键盘触摸鼠标自定义输入进行处理

Canvas：控制UI的渲染模式

Render Mode：渲染模式

Screen Space overlay：让UI始终位于界面最前面

Screen Space camera：赋值一个相机 按照相机的距离前后显示UI和物体

World Space：让画布变成一个3D物体 可以进行移动旋转等等

Canvas Scaler：控制UI画布的缩放比例

Constant Pixel Size：固定像素大小 无论屏幕尺寸如何变化，UI都不会变化

Scale With Screen Size：根据屏幕分辨率，自动调节UI比例

Constant Physical Size：固定物理像素大小

Graphic Raycaster：控制是否让UI响应射线点击

Ignore Reversed Graphic：忽略反转的UI  UI反转后点击无效

Blocking Objects：阻挡点击物体 当UI前有物体时 点击前面的物体射线会被阻挡

Blocking Mask：阻挡层级 当UI前有设置的层级时 点击前面的物体射线会被阻挡

Text（分新版和旧版）

Text组件是UGUI中最常用的组件，它的作用是对文本数据进行处理并显示

Font：显示文字的字体

Line Spacing：行与行之间的垂直距离

Rich Text：富文本格式 勾选后可以显示文本中的标记标签信息

UGUI创建的所有组件都会默认勾选。

旧版使用

//命名空间
using UnityEngine.UI

//定义
public InputField input;

新版使用

//命名空间
using TMPro;

//定义
public TMP_InputField newInput;

Image

Image组件是UGUI中比较常用的组件，用来控制和显示图片

Source Image：需要显示的图片的来源

Color：图片的颜色

Material：渲染图像的材质

Raycast Target：能否接收到射线检测

Image Type：图片的排列方式

Texture Type:(一般为图片类型),一般是选择sprite(2D and UI)，之后点击Apply

Simple：标准的Sprite，自适应大小
在这里插入图片描述

Sliced：九宫格切片，创建固定边框控件的最佳选择。边框固定，图片中间做拉伸(缩放)，如角色头像，
按钮背景
在这里插入图片描述

Tiled：平铺，一个Sprite缩放填充整个区域，如背景平铺
在这里插入图片描述

最后一个filled。
用来显示图片当中的某一部分的，用来制作技能CD冷却时间或进度条。
FillMethod表示以什么方式进行切割，其中有水平方式、垂直方式，90、180、360度圆方式进行切割。
FillOrigin表示从什么地方开始切割，其中有上、下、左、右几种方式。
FillAmount表示切割哪一部分，0表示不显示，1表示全部显示。

Button

Button是一个按钮组件，在开发中经常使用，通过单击按钮执行某些事件、动作、切换状态等

Interactable：是否启动按钮 取消勾选则按钮失效

Transition：按钮状态过渡的类型

Navigation：导航

On Click：按钮单击事件的列表 设置单击后执行哪些函数

Button组件可以通过On Click手动添加监听事件，也可以通过代码动态添加监听事件

绑定按钮事件
在这里插入图片描述

下面介绍代码动态添加监听事件

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
 
public class Test_16_2 : MonoBehaviour
{
    
    
    Button TestBtn;
    void Start()
    {
    
    
        TestBtn = GetComponent<Button>();
        TestBtn.onClick.AddListener(OnClickTest);
    }
    public void OnClickTest()
    {
    
    
        Debug.Log("点击了按钮");
    }
}

然后将脚本添加到Button组件上执行即可

Toggle（切换按钮）

在项目开发时，需要一个按钮模拟和控制开关，这就是Toggle的作用，Toggle组件通常进行状态判断，如是否记住密码，是否开启某些指令等

实现单选，新建Toggle Group组件，绑定入Group，绑定在两个切换按钮上
在这里插入图片描述

Toggle按钮监听函数测试代码如下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
 
public class Test_16_3 : MonoBehaviour
{
    
    
    public void OnValueChanged(bool isOn)
    {
    
    
        if (isOn)
        {
    
    
            Debug.Log("开启");
        }
        else
        {
    
    
            Debug.Log("关闭");
        }
    }
}

将脚本绑定到相机对象上，再添加到OnValueChanged单击事件中

下面通过代码动态添加监听事件

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
 
public class Test_16_4 : MonoBehaviour
{
    
    
    Toggle TestToggle;
    void Start()
    {
    
    
        TestToggle = GetComponent<Toggle>();
        TestToggle.onValueChanged.AddListener(OnValueChanged);
    }
    public void OnValueChanged(bool isOn)
    {
    
    
        if (isOn)
        {
    
    
            Debug.Log("开启");
        }
        else
        {
    
    
            Debug.Log("关闭");
        }
    }
}

Slider

Slider是一个滑动条组件，一般用来制作血条或者进度条

下面我们来做一个滑动条自增的效果，类似于进度条脚本代码如下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
 
public class Test_16_5 : MonoBehaviour
{
    
    
    public Slider m_Slider;//Slider组件
    public Text m_Text;//Text组件
    void Start()
    {
    
    
        //值初始化
        m_Slider.value = 0;
        m_Text.text = "";
    }
    void Update()
    {
    
    
        if (m_Slider.value < 100)
        {
    
    
            m_Slider.value += Time.deltaTime;
            //将value的取小数点两位
            m_Text.text = m_Slider.value.ToString(("F")) + "%";
        }
    }
}

ScrollView

ScrollView组件是一个滚动窗口以及区域组件，在做游戏背包或者商城展示大量物品时，可以使用ScrollView组件

Dropdown

下拉菜单，可用于快速创建大量选择项、创建下拉菜单模板等

Dropdown组件比较常用的功能有添加选项、添加监听事件等等

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
 
public class Test_16_6 : MonoBehaviour
{
    
    
    public Dropdown m_Dropdown;
    void Start()
    {
    
    
        //第一种添加下拉选项的方案
        Dropdown.OptionData data = new Dropdown.OptionData();
        data.text = "第一章";
        Dropdown.OptionData data2 = new Dropdown.OptionData();
        data2.text = "第二章";
        m_Dropdown.options.Add(data);
        m_Dropdown.options.Add(data2);
        //第二种添加下拉选项的方案
        List<Dropdown.OptionData> listOptions = new List<Dropdown.OptionData>();
        listOptions.Add(new Dropdown.OptionData("第三章"));
        listOptions.Add(new Dropdown.OptionData("第四章"));
        m_Dropdown.AddOptions(listOptions);
        m_Dropdown.onValueChanged.AddListener(OnValueChanged);
    }
    public void OnValueChanged(int value)
    {
    
    
        switch (value)
        {
    
    
            case 0:
                Debug.Log("第一章");
                break;
            case 1:
                Debug.Log("第二章");
                break;
            case 2:
                Debug.Log("第三章");
                break;
            case 3:
                Debug.Log("第四章");
                break;
            default:
                break;
        }
    }
}

InputField

InputField组件是输入框组件，是一个用来管理输入的组件，通常用来输入用户的账号，密码或者再聊天室输入文字等等

下面添加单击登录按钮后显示密码和账号功能代码如下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
 
public class Test_16_7 : MonoBehaviour
{
    
    
    public InputField m_InputFieldName;
    public InputField m_InputFieldPwd;
    public Button m_ButtonLogin;
    public Text m_TextInfo;
    void Start()
    {
    
    
        m_ButtonLogin.onClick.AddListener(Button_OnClickEvent);
    }
    public void Button_OnClickEvent()
    {
    
    
        m_TextInfo.text = "账号：" + m_InputFieldName.text + " 密码：" + m_InputFieldPwd.text;
    }
}