UFL7——UI管理器的自定义事件添加函数

前置知识点：UGUI中 EventTrigger​ 相关知识点（UI四部曲之UGUI 中）

为什么要进行 自定义事件添加函数 优化

我们在制作UI功能时，经常会有这样的需求:

  1. 为一些不带默认事件的控件添加自定义事件，比如 Image​、Text​ 这些基础组件，想为他们添加点击、单击、拖拽等事件监听
  2. 为一些带默认事件的控件添加自定义事件，比如为 Button​ 按钮添加鼠标进入、鼠标移除等事件监听

等等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
EventTrigger eventtrigger = GetControl<Button>("btnStart").gameObject.AddComponent<EventTrigger>();
//鼠标抬起
EventTrigger.Entry entry = new EventTrigger.Entry();
entry.eventID = EventTriggerType.PointerUp;
entry.callback.AddListener((data) =>
{
    print("抬起");
});
eventTrigger.triggers.Add(entry);
//鼠标离开
EventTrigger.Entry entry2 = new EventTrigger.Entry();
entry2.eventID = EventTriggerType.PointerExit;
entry2.callback.AddListener((data) =>
{
    print("离开");
});
eventTrigger.triggers.Add(entry2);

因此我们完全可以把添加自定义事件封装为一个公共函数，方便为各种控件添加自定义事件

自定义事件添加函数 实现

主要实现思路:

  1. 为想要添加自定义事件的控件添加EventTrigger​组件
  2. 通过EventTrigger​组件添加对应自定义事件的监听
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/// <summary>
/// 为控件添加自定义事件
/// </summary>
/// <param name="control">要添加自定义事件的控件</param>
/// <param name="type">事件的类型</param>
/// <param name="callBack">响应的函数</param>
public static void AddCustomEventListener(UIBehaviour control, EventTriggerType type, UnityAction<BaseEventData> callBack)
{
    //这种逻辑主要是用于保证，控件上只会挂载一个EventTrigger
    EventTrigger trigger = control.GetComponent<EventTrigger>();
    if (trigger == null)
        trigger = control.gameObject.AddComponent<EventTrigger>();
    EventTrigger.Entry entry = new EventTrigger.Entry();
    entry.eventID = type;
    entry.callback.AddListener(callBack);
    trigger.triggers.Add(entry);
}

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public class BeginPanel : BasePanel
{
    private void Start()
    {
        string name = GetControl<Button>("btnBegin").name;
        UIManager.AddCustomEventListener(GetControl<Button>("btnBegin"), EventTriggerType.PointerEnter, (data) =>
        {
            print("鼠标进入");
        });
        UIManager.AddCustomEventListener(GetControl<Button>("btnBegin"), EventTriggerType.PointerExit, (data) =>
        {
            print("鼠标离开");
        });
    }
}

鼠标进入按键与离开按键时分别输出：image​