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

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 = "鼠标点击";
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

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 = "鼠标点击";
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.

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 = "鼠标点击";
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

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();
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
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 = "鼠标点击";
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

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