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

hi恬静的小魔龙
3,556 阅读5分钟

这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战

推荐阅读

大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新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 —— 颜色过渡 在这里插入图片描述

属性介绍
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 = "鼠标点击";
    }
}

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

avatar
文章
阅读
粉丝