【Unity 3D】UI系统中UGUI各个组件的详细讲解（附源码 超详细）

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

Unity 3D的UI，分为UGUI和GUI，UGUI主要是图形渲染界面，搭建方便，学习比较容易，GUI主要是代码渲染界面，需要在编写代码时就思考如何完善界面布局，在运行项目时才能看到效果

UGUI常用组件介绍

1：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前有设置的层级时 点击前面的物体射线会被阻挡

2：Text

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

Font：显示文字的字体

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

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

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

3：Image

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

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

Color：图片的颜色

Material：渲染图像的材质

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

Image Type：图片的排列方式

4：Button

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

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

Transition：按钮状态过渡的类型

Navigation：导航

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

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

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Test_16_1 : MonoBehaviour
{
    public void OnClickTest()
    {
        Debug.Log("点击了按钮");
    }
}

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

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组件上执行即可

5：Toggle

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

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("关闭");
        }
    }
}

6：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")) + "%";
        }
    }
}

7：ScrollView

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

8：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;
        }
    }
}

9：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;
    }
}

运行程序 输入账号和密码，单击登录按钮可以看到账号和密码显示出来

创作不易 觉得有帮助请点赞关注收藏~~~