0


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

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

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

标签: ui unity 3d

本文转载自: https://blog.csdn.net/jiebaoshayebuhui/article/details/128548864
版权归原作者 showswoller 所有, 如有侵权,请联系我们删除。

“【Unity 3D】UI系统中UGUI各个组件的详细讲解(附源码 超详细)”的评论:

还没有评论