【Unity3D-UGUI系列】（三）Button 按钮组件详解

推荐阅

大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧

一、前言

首先，介绍一个UGUI，NGUI是UGUI的前身，Unity开发团队将NGUI的开发团队收到自己开发团队下，并且由此开发了UGUI。

UGUI系统是从Unity 4.6版本后才开始集成到Unity编辑器中。

UGUI的特点：

• • 
    
• 灵活
• 快速
• 可视化
  • 
    

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

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

​

二、Button按钮组件介绍

Button是UGUI里面的一个交互UI组件。

也是在开发中经常遇到的一个组件。

通过点击完成一系列的操作：执行某些事件、动作、切换状态等。

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

三、Button按钮组件属性

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

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

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

Color Tint —— 颜色过渡

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

Sprite Swap —— 图片过渡

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

Animation —— 动画过渡

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

四、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 = "鼠标点击";
    }
}

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