文章目录
- 1、Button的状态
- 2、脚本中获取button的状态
- 2.1 分析状态获取
- 2.2 通过实现接口获取button的状态
- 2.2.1 鼠标点击与释放
- 2.2.2 高亮模式
- 2.2.3 退出选中模式(高亮状态)
- 2.2.4 选择模式selected
- 2.2.5 退出选择模式
- 3、射线与UI交互设置
- 3.1 Canvas中组件设置
- 3.2 EventSystem中组件设置
1、Button的状态
在Inspector中可见,对于button来说,不同的按钮状态呈现不同的颜色,如下图所示,共5种颜色。
①Normal
UI控件正常情况的状态
②Highlighted
高亮模式:
当射线与UI交互时,呈现为高亮模式,射线变成白色。
鼠标置于UI上方时所处的状态
③Pressed
鼠标左键长按状态
④Selected
选中状态,比如鼠标点击后,
⑤Disabled
button设置为不可点击,不可选择的状态
2、脚本中获取button的状态
2.1 分析状态获取
由于button为Selectable的子类,所以button中状态都通过Selectable中的实现进行处理。
接下来,让我们开始分析Selectable源码,并通过源码获取如何处理button的状态。
首先在Selectoable中知道状态类别,如下所示:
protected SelectionState currentSelectionState{get{if (!IsInteractable())return SelectionState.Disabled;if (isPointerDown)return SelectionState.Pressed;if (hasSelection)return SelectionState.Selected;if (isPointerInside)return SelectionState.Highlighted;return SelectionState.Normal;}}
在Selectoable及Selectoable的子类中,可以通过currentSelectionState获取状态,但是在其他类中,无法直接调用其变量。
// Change the button to the correct stateprivate void EvaluateAndTransitionToSelectionState(){if (!IsActive() || !IsInteractable())return;DoStateTransition(currentSelectionState, false);}
在EvaluateAndTransitionToSelectionState()方法中,根据不同动作修改button的状态,继续向上寻找。
public virtual void OnPointerEnter(PointerEventData eventData){isPointerInside = true;EvaluateAndTransitionToSelectionState();}
看到上述代码是不是比较熟悉了,变量isPointerInside为ture时, currentSelectionState的值为SelectionState.Highlighted,所以通过这里可以发现,获取button的状态,直接复写OnPointerEnter方法就可以了。
在Selectoable类中,也有比较明显的注释了。
2.2 通过实现接口获取button的状态
2.2.1 鼠标点击与释放
button的状态为 Pressed
OnPointerDown :
Do this when the mouse is clicked over the selectable object this script is attached to.
当鼠标点击到这个脚本所附加的可选择对象上时,执行此操作。
using UnityEngine;using System.Collections;using UnityEngine.UI;using UnityEngine.EventSystems;// Required when using Event data.public class ExampleClass : MonoBehaviour, IPointerDownHandler// required interface when using the OnPointerDown method.{//Do this when the mouse is clicked over the selectable object this script is attached to.public void OnPointerDown(PointerEventData eventData){Debug.Log(this.gameObject.name + " Was Clicked.");}}
OnPointerUp :
Do this when the mouse click on this selectable UI object is released.
当用户在点击这个可选择的用户界面(UI)对象后释放鼠标按钮时,执行这个动作。
OnPointerDown is also required to receive OnPointerUp callbacks
为了接收 OnPointerUp 回调,也需要实现 OnPointerDown。
using UnityEngine;using System.Collections;using UnityEngine.UI;using UnityEngine.EventSystems;// Required when using Event data.public class ExampleClass : MonoBehaviour, IPointerUpHandler, IPointerDownHandler// These are the interfaces the OnPointerUp method requires.{//OnPointerDown is also required to receive OnPointerUp callbackspublic void OnPointerDown(PointerEventData eventData){}//Do this when the mouse click on this selectable UI object is released.public void OnPointerUp(PointerEventData eventData){Debug.Log("The mouse click was released");}}
2.2.2 高亮模式
button的状态:Highlighted
Do this when the cursor enters the rect area of this selectable UI object.
当光标进入这个可选择的用户界面(UI)对象的矩形区域时,执行这个动作。
当用户的鼠标光标,射线(或触摸点,在触摸设备上)移动到某个可交互的UI元素中
using UnityEngine;using System.Collections;using UnityEngine.UI;using UnityEngine.EventSystems;// Required when using Event data.public class ExampleClass : MonoBehaviour, IPointerEnterHandler// required interface when using the OnPointerEnter method.{//Do this when the cursor enters the rect area of this selectable UI object.public void OnPointerEnter(PointerEventData eventData){Debug.Log("The cursor entered the selectable UI element.");}}
2.2.3 退出选中模式(高亮状态)
button的状态:Normal
Do this when the cursor exits the rect area of this selectable UI object.
当光标离开这个可选择的用户界面(UI)对象的矩形区域时,执行这个动作。
using UnityEngine;using System.Collections;using UnityEngine.UI;using UnityEngine.EventSystems;// Required when using Event data.public class ExampleClass : MonoBehaviour, IPointerExitHandler// required interface when using the OnPointerExit method.{//Do this when the cursor exits the rect area of this selectable UI object.public void OnPointerExit(PointerEventData eventData){Debug.Log("The cursor exited the selectable UI element.");}}
2.2.4 选择模式selected
button的状态:Selected
Do this when the selectable UI object is selected.
当这个可选择的用户界面(UI)对象被选中时,执行这个动作
通过鼠标点击、键盘导航等方式
using UnityEngine;using System.Collections;using UnityEngine.UI;using UnityEngine.EventSystems;// Required when using Event data.public class ExampleClass : MonoBehaviour, ISelectHandler// required interface when using the OnSelect method.{//Do this when the selectable UI object is selected.public void OnSelect(BaseEventData eventData){Debug.Log(this.gameObject.name + " was selected");}}
2.2.5 退出选择模式
button状态:Normal
using UnityEngine;using System.Collections;using UnityEngine.UI;using UnityEngine.EventSystems;// Required when using Event data.public class ExampleClass : MonoBehaviour, IDeselectHandler This Interface is required to receive OnDeselect callbacks.{public void OnDeselect(BaseEventData data){Debug.Log("Deselected");}}
3、射线与UI交互设置
3.1 Canvas中组件设置
Graphic Raycaster组件为鼠标等物理输入进行处理,
Tracked Device Graphic Raycaster组件为射线交互的组件,如果Canvas中没有该组件,射线无法与该UI进行交互,当射线与UI进行交互时,射线会由红色变为白色。
3.2 EventSystem中组件设置
对于EventSystem中的设置,想要射线能够与UI之间进行交互,在Inspector中需要将组件Standalone Input Module进行移除,并添加组件XR UI Input Module,两者同时进行处理,才能实现射线与UI之间进行交互。
移除EventSystem中的Standalone Input Module中的组件
如果不移除上述组件的话,对于射线的交互效果可能出现问题
添加组件XR UI Input Module