Unity UGUI 按钮绑定事件的 4 种方式汇总

UGUI 可视化创建以及关联事件很方便, 动态创建可以利用创建好的 Prefab 进行实例化, 只是在关联事件上有些复杂, 本文总结了几种给按钮绑定事件的关联方式.

1. 可视化创建及事件绑定

Step 1 : 通过 Hierarchy 面板创建 UI > Button.

Step 2 : 创建一个脚本 TestClick.cs, 定义了一个 Click 的 public 方法.

Step 3 : 选中 Hierarchy 中的 Button, Add Component 脚本 TestClick.cs

Step 4 : 在 Button(Script) 关联 TestClick 脚本里的 Click 方法.

Step 5 : Done.

TestClick.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class TestClick : MonoBehaviour {
	public void Click(){
		Debug.Log ("Button Clicked. TestClick.");
	}
}

2. 通过直接绑定脚本来绑定事件

Step 1 : 通过 Hierarchy 面板创建 UI > Button.

Step 2 : 创建一个 ClickHandler.cs 脚本, 定义了一个私有方法 OnClick(), 并在 Start() 方法里为 Button 添加点击事件的监听,作为参数传入 OnClick 方法.

Step 3 : 将 ClickHandler 绑定在 Button 对象上.

Step 4 : Done.

ClickHandler.cs

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

public class ClickHandler : MonoBehaviour {
	void Start () {
		Button btn = this.GetComponent<Button> ();
		btn.onClick.AddListener (OnClick);
	}
	private void OnClick(){
		Debug.Log ("Button Clicked. ClickHandler.");
}

3. 通过 EventTrigger 实现按钮点击事件

UGUI 系统中 Button 默认只提供了 OnClick 的调用方法, 有时候我们还需要监听鼠标进入事件 (MouseIn) 和鼠标滑出事件 (MouseOut). 就需要借助 UI 系统中的 EventTrigger 脚本来实现.

Step 1 : 通过 Hierarchy 面板创建 UI > Button.

Step 2 : 创建一个 EventTriggerHandler.cs 脚本, 利用 UnityEngine.EventSystems.EventTrigger 添加监听事件.

Step 3 : 绑定 EventTriggerHandler.cs 脚本到 Button 上.

Step 4 : Done.

EventTriggerHandler.cs

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

// 需要 EventTrigger 脚本的支援
[RequireComponent(typeof(UnityEngine.EventSystems.EventTrigger))]
public class EventTriggerHandler : MonoBehaviour {
	// Use this for initialization
	void Start () {
		Button btn = this.GetComponent<Button> ();
		EventTrigger trigger = btn.gameObject.GetComponent<EventTrigger> ();
		EventTrigger.Entry entry = new EventTrigger.Entry ();
		// 鼠标点击事件
		entry.eventID = EventTriggerType.PointerClick;
		// 鼠标进入事件 entry.eventID = EventTriggerType.PointerEnter;
		// 鼠标滑出事件 entry.eventID = EventTriggerType.PointerExit;
		entry.callback = new EventTrigger.TriggerEvent ();
		entry.callback.AddListener (OnClick);
		// entry.callback.AddListener (OnMouseEnter);
		trigger.triggers.Add (entry);
	}
	private void OnClick(BaseEventData pointData){
		Debug.Log ("Button Clicked. EventTrigger..");
	private void OnMouseEnter(BaseEventData pointData){
		Debug.Log ("Button Enter. EventTrigger..");
}

4. 通过 MonoBehaviour 实现事件类接口来实现事件的监听

Step 1 : 通过 Hierarchy 面板创建 UI > Button.

Step 2 : 创建一个 EventHandler.cs 脚本.

Step 3 : 将脚本绑定在 Button 对象上.

Step 4 : Done.

EventHandler.cs

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

public class EventHandler : MonoBehaviour, IPointerClickHandler, IPointerEnterHandler, IPointerExitHandler, IPointerDownHandler, IDragHandler {
	public void OnPointerClick(PointerEventData eventData){
		if(eventData.pointerId == -1){
			Debug.Log ("Left Mouse Clicked.");
		} else if(eventData.pointerId == -2){
			Debug.Log ("Right Mouse Clicked.");
		}
	}
	public void OnPointerEnter(PointerEventData eventData){
		Debug.Log ("Pointer Enter..");
	public void OnPointerExit(PointerEventData eventData){
		Debug.Log ("Pointer Exit..");
	public void OnPointerDown(PointerEventData eventData){
		Debug.Log ("Pointer Down..");
	public void OnDrag(PointerEventData eventData){
		Debug.Log ("Dragged..");
}

UGUI 如何判断 UI 元素被点击时是鼠标的哪个按键, 上面的代码中我们可以根据 eventData.pointerId 来监听是鼠标左键还是右键. 但是每个 UI 元素都创建一个 MonoBehaviour 来监听各个事件显然不好, 下面是通过利用 Delegate 和 Event 来做一个通用类 UIEventListener 来处理事件 (观察者模式).

UIEventListener.cs

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

public class UIEventListener : MonoBehaviour, IPointerClickHandler, IPointerEnterHandler, IPointerExitHandler {
	// 定义事件代理
	public delegate void UIEventProxy(GameObject gb);
	// 鼠标点击事件
	public event UIEventProxy OnClick;
	// 鼠标进入事件
	public event UIEventProxy OnMouseEnter;
	// 鼠标滑出事件
	public event UIEventProxy OnMouseExit;
	public void OnPointerClick(PointerEventData eventData){
		if (OnClick != null)
			OnClick (this.gameObject);
	}
	public void OnPointerEnter(PointerEventData eventData){
		if (OnMouseEnter != null)
			OnMouseEnter (this.gameObject);
	public void OnPointerExit(PointerEventData eventData){
		if (OnMouseExit != null)
			OnMouseExit (this.gameObject);
}

TestEvent.cs

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

public class TestEvent : MonoBehaviour {
	void Start () {
		Button btn = this.GetComponent<Button> ();
		UIEventListener btnListener = btn.gameObject.AddComponent<UIEventListener> ();
		btnListener.OnClick += delegate(GameObject gb) {
			Debug.Log(gb.name + " OnClick");
		};
		btnListener.OnMouseEnter += delegate(GameObject gb) {
			Debug.Log(gb.name + " OnMouseEnter");
		btnListener.OnMouseExit += delegate(GameObject gb) {
			Debug.Log(gb.name + " OnMOuseExit");
	}
}

TestEvent 脚本绑定在 Button 上即可.

Project 结构

代码 : Here

到此这篇关于Unity UGUI 按钮绑定事件的 4 种方式的文章就介绍到这了,更多相关Unity UGUI 按钮绑定事件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Unity UGUI实现滑动翻页效果

    本文实例为大家分享了Unity UGUI实现滑动翻页效果的具体代码,供大家参考,具体内容如下 这个问题真的是老生常谈的事情了,不过在这里还是要说一下,以便以后之需 首先看一下效果图 最后在Content下面是一些Image using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; using UnityEngine.EventSystems; using

  • Unity UGUI实现简单拖拽图片功能

    这一篇博客我们来使用 UGUI 实现图片的拖拽功能. 说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标.),这两个坐标是不一样的,所以拖拽是就需要转换.因为鼠标的移动是屏幕坐标,而 UI 的移动是ugui坐标.转换的方法: RectTransformUtility.ScreenPointToLocalPointInRectangle ( - );这个方法可以把屏幕坐标转换成 ugui 坐标.至于

  • Unity3D UGUI实现翻书特效

    本文实例为大家分享了Unity3D UGUI翻书展示的具体代码,供大家参考,具体内容如下 参考大佬的,链接找不到了,找到了再加在这. 下边是Shader代码: // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)' Shader "Personal/PageTurning" { Properties { _Color ("Color", Color) = (

  • Unity UGUI实现滑动翻页直接跳转页数

    本文实例为大家分享了Unity UGUI实现滑动翻页,直接跳转页数的具体代码,供大家参考,具体内容如下 首先看一下最终效果 其实这个功能基本上是老生常谈了,所以代码还是很简单 using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; using UnityEngine.EventSystems; using System; public class Pa

  • Unity UGUI 按钮绑定事件的 4 种方式汇总

    UGUI 可视化创建以及关联事件很方便, 动态创建可以利用创建好的 Prefab 进行实例化, 只是在关联事件上有些复杂, 本文总结了几种给按钮绑定事件的关联方式. 1. 可视化创建及事件绑定 Step 1 : 通过 Hierarchy 面板创建 UI > Button. Step 2 : 创建一个脚本 TestClick.cs, 定义了一个 Click 的 public 方法. Step 3 : 选中 Hierarchy 中的 Button, Add Component 脚本 TestClic

  • jQuery绑定事件的四种方式介绍

    jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(type,[data],function(eventObject)) bind是使用频率较高的一

  • JavaScript中绑定事件的三种方式及去除绑定

    在JavaScript中,有三种常用的绑定事件的方法 第一种办法 函数写在结构层里面 非常不好,使页面很混乱,行为与结构得不到分离 <input type="button" onclick="func();"> 绑定事件的第二种办法 好处:行为与结构开始分离 缺点: 第二种绑定方式中只能给一个时间绑定一个处理函数 即.onclick = fn1;  .  onclick = fn2 最终的效果是onclick = fn2 <select name=

  • JavaScript中利用jQuery绑定事件的几种方式小结

    开发过程中经常要给DOM元素添加一些事件,下面介绍几种方式: 先写几个好看的button //引入JQuery <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <span id="tips"></span> <input type="button" id="btn1"

  • Android为按钮控件绑定事件的五种实现方式

    一.写在最前面 本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现 第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick=",其中这个属性的属性值对应的是MainActivity类中的方法名字(自己创建的方法): 步骤2.在MainActivity类中创建相对应的方法: public void demo(View view){ Toast.makeText(MainActivity.this, "第二个按钮

  • jquery 给动态生成的标签绑定事件的几种方法总结

    经常遇到给动态生成的标签绑定事件不好用,自己简单测试总结了下,结论如下了: <body> <!-- 下面是用纯动态方式生成标签 --> <div id="d2"> 生成a标签 </div> <div id="d3"> <input type="button" value="生成a标签" id="btn" /> </div>

  • jQuery绑定事件的几种实现方式

    本文实例为大家分享了jQuery绑定事件多种实现方法,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><!--百度CDN--> </head> <body> <input ty

  • layer.confirm取消按钮绑定事件的方法

    也可以通过 btn: ['确定','取消','按钮三'],来修改和增加按钮. // layer.confirm(content, options, yes, cancel) layer.confirm('is not?', {icon: 3, title:'提示',yes: function(index){ //do something layer.close(index); }, cancel: function(index, layero){ layer.close(index); relo

  • 详解pygame捕获键盘事件的两种方式

    方式1:在pygame中使用pygame.event.get()方法捕获键盘事件,使用这个方式捕获的键盘事件必须要是按下再弹起才算一次. 示例示例: for event in pygame.event.get(): # 捕获键盘事件 if event.type == pygame.QUIT: # 判断按键类型 print("按下了退出按键") 方式2:在pygame中可以使用pygame.key.get_pressed()来返回所有按键元组,通过判断键盘常量,可以在元组中判断出那个键被

  • Vue 父子组件实现数据双向绑定效果的两种方式(案例代码)

    目录 方式一:通过监听事件实现 方式二:通过 v-model 实现 方式一:通过监听事件实现 父组件将数据传递给子组件通过 props 实现:而子组件将数据传递给父组件通过事件来实现,在子组件中定义一个事件,在该事件中传递值,由父组件中监听这个事件.通过这种方式实现父子组件双向绑定的效果最常见. 子组件案例代码: <template> <el-select v-model="value" placeholder="请选择" @change=&quo

随机推荐