Unity3D-UGUI系列Button 按钮组件详解

Posted 2021-09-14 恬静的小魔龙

一、前言

首先，介绍一个UGUI，NGUI是UGUI的前身，Unity开发团队将NGUI的开发团队收到自己开发团队下，并且由此开发了UGUI。
UGUI系统是从Unity 4.6版本后才开始集成到Unity编辑器中。

UGUI的特点：

• 灵活
• 快速
• 可视化

对于开发者来说有很多的优点，比如说：

• 效率高
• 实现效果好
• 易于使用和拓展
• 与Unity编辑器的兼容性高

这是本系列文章的第一篇：
【Unity3D-UGUI系列】（一）Canvas 画布组件详解

二、Button按钮组件介绍

Button是UGUI里面的一个交互UI组件。
也是在开发中经常遇到的一个组件。
通过点击完成一系列的操作：执行某些事件、动作、切换状态等。

在Unity的Hierarchy视图中点击“Create→UI→Button”创建一个Button组件：

三、Button按钮组件属性

Button的属性面板如下图所示：

Image组件我们放到下一节详细讲，重点看一下Button组件。

Button公有三种Transition Setting过渡类型，我们分别介绍：

Color Tint —— 颜色过渡

属性	介绍
Interactable	是否启动按钮的响应
Transition	按钮的过渡动画类型，有Color Tint颜色过渡、Sprite Swap图片过渡、Animation动画过渡
Target Graphic	目标图形
Normal Color	普通状态下的颜色
Highlighted Color	鼠标悬停时状态下的颜色
Pressed Color	点击状态的颜色
Disabled Color	禁用状态的颜色
Color Multiplier	颜色乘数
Fade Duration	效果消失的时间
Navigation	导航类型
OnClick	点击事件列表

颜色过渡类型，通过调整颜色的变化，来展示按钮选中、点击、移开等不同的效果。

---

Sprite Swap —— 图片过渡

属性	介绍
Interactable	是否启动按钮的响应
Transition	按钮的过渡动画类型，有Color Tint颜色过渡、Sprite Swap图片过渡、Animation动画过渡
Target Graphic	目标图形
Highlighted Sprite	鼠标悬停时状态下的图片
Pressed Sprite	点击状态的图片
Disabled Sprite	禁用状态的图片
Navigation	导航类型
OnClick	点击事件列表

图片过渡类型，通过拖入不同的图片，来展示按钮选中、点击、移开等不同的效果。

---

Animation —— 动画过渡

属性	介绍
Interactable	是否启动按钮的响应
Transition	按钮的过渡动画类型，有Color Tint颜色过渡、Sprite Swap图片过渡、Animation动画过渡
Target Graphic	目标图形
Normal Trigger	普通状态触发器
Highlighted Trigger	鼠标悬停状态触发器
Pressed Trigger	点击状态触发器
Disabled Trigger	禁用状态触发器
Auto Generate Animation	自动生成动画，点击后可以自动生成Button的动画
Navigation	导航类型
OnClick	点击事件列表

动画过渡类型，通过设置不同的触发器状态，来展示按钮选中、点击、移开等不同的效果。

四、Button按钮组件绑定事件

4-1、可视化创建及事件绑定

点击Button组件上的OnClick的+号

然后把绑定脚本的对象，赋值到这个Button组件上

4-2、通过直接绑定脚本来绑定事件

使用Button组件自带的onClick.AddListener方法
代码

using UnityEngine;
using UnityEngine.UI;

public class ButtonTest : MonoBehaviour
{
    public Button m_Button;
    public Text m_Text;
    void Start()
    {
        m_Button.onClick.AddListener(ButtonOnClickEvent);
    }
    public void ButtonOnClickEvent()
    {
        m_Text.text = "鼠标点击";
    }
}

4-3、通过射线监听点击到的物体来绑定事件

代码

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class ButtonTest : MonoBehaviour
{
    public Text m_Text;

    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            if (OnePointColliderObject() != null)
            {
                if (OnePointColliderObject().name == "Button" || OnePointColliderObject().name == "Text")
                {
                    ButtonOnClickEvent();
                }
            }
        }
    }

    //点击对象获取到对象的名字
    public GameObject OnePointColliderObject()
    {
        //存有鼠标或者触摸数据的对象
        PointerEventData eventDataCurrentPosition = new PointerEventData(EventSystem.current);
        //当前指针位置
        eventDataCurrentPosition.position = new Vector2(Input.mousePosition.x, Input.mousePosition.y);
        //射线命中之后的反馈数据
        List<RaycastResult> results = new List<RaycastResult>();
        //投射一条光线并返回所有碰撞
        EventSystem.current.RaycastAll(eventDataCurrentPosition, results);
        //返回点击到的物体
        if (results.Count > 0)
            return results[0].gameObject;
        else
            return null;
    }

    public void ButtonOnClickEvent()
    {
        m_Text.text = "鼠标点击";
    }
}

4-4、通过 EventTrigger 实现按钮点击事件

编写代码

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

[RequireComponent(typeof(EventTrigger))]
public class ButtonTest : MonoBehaviour
{
    public Text m_Text;

    void Start()
    {
        Button btn = transform.GetComponent<Button>();
        EventTrigger trigger = btn.gameObject.GetComponent<EventTrigger>();
        EventTrigger.Entry entry = new EventTrigger.Entry
        {
            // 鼠标点击事件
            eventID = EventTriggerType.PointerClick,
            // 鼠标进入事件 entry.eventID = EventTriggerType.PointerEnter;
            // 鼠标滑出事件 entry.eventID = EventTriggerType.PointerExit;
            callback = new EventTrigger.TriggerEvent()
        };
        entry.callback.AddListener(ButtonOnClickEvent);
        // entry.callback.AddListener (OnMouseEnter);
        trigger.triggers.Add(entry);
    }

    public void ButtonOnClickEvent(BaseEventData pointData)
    {
        m_Text.text = "鼠标点击";
    }
}

4-5、通过通用类 UIEventListener 来处理Button响应事件

UIEventListener.cs

using UnityEngine;
using UnityEngine.EventSystems;

public class UIEventListener : MonoBehaviour, IPointerClickHandler
{
    // 定义事件代理
    public delegate void UIEventProxy();
    // 鼠标点击事件
    public event UIEventProxy OnClick;

    public void OnPointerClick(PointerEventData eventData)
    {
        if (OnClick != null)
            OnClick();
    }
}

ButtonTest.cs

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

[RequireComponent(typeof(EventTrigger))]
public class ButtonTest : MonoBehaviour
{
    public Text m_Text;

    void Start()
    {
        Button btn = this.GetComponent<Button>();
        UIEventListener btnListener = btn.gameObject.AddComponent<UIEventListener>();

        btnListener.OnClick += delegate () {
            ButtonOnClickEvent();
        };
    }

    public void ButtonOnClickEvent()
    {
        m_Text.text = "鼠标点击";
    }
}

五、Button组件常见问题解析

5-1、Button点击没效果

无论怎么点击Button，都没有效果：

这个可能是因为层级原因，其他的UI挡住了Button：

可以看到Text的框挡住了Button，将Text 的框不挡住Button，或者Button调整到最下面即可解决问题：

5-2、Button点击不响应

这个问题跟第一个问题很想，但是有一点不一样，这个是点击有效果，但是不响应：

这个不响应的问题，很有可能是代码的注册时间没有被执行，先检查按钮上的 OnClick是否绑定事件了（如果有的话）：

然后检查代码是否获取到了Button，然后是否执行了代码：

using UnityEngine;
using UnityEngine.UI;

public class ButtonTest : MonoBehaviour
{
    public Button m_Button;
    public Text m_Text;
    void Start()
    {
        m_Button.onClick.AddListener(ButtonOnClickEvent);
    }
    public void ButtonOnClickEvent()
    {
        m_Text.text = "鼠标点击";
    }
}

是否获取到组件，是否执行，执行的是否正确。