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

悠悠 2023-09-30 18:25 8阅读 0赞

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

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

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