Unity 極簡UI框架

寫ui的時候一般追求控制邏輯和顯示邏輯分離，經典的類似於MVC，其余大多都是這個模式的衍生，實際上書寫的時候M是在整個游戲的底層，我更傾向於將它稱之為D（Data）而不是M（Model），而C（Ctrl）負責接收用戶的各類UI事件，例如點擊，滑動，還有其他游戲邏輯板塊發過來的事件或消息，處理這些消息並更新V（View）當中的各類顯示數據，這里更新數據的方式可以抽象為兩種：

1.外部事件觸發View更新，這時不用在意底層數據更新，因為在刷新View之前這些改變的數據可以在其他邏輯版塊中直接更新完。

2.UI內部點擊，滑動等事件觸發View更新，這種情況下有可能需要更新底層數據，但最好不要直接修改和調用，而是選擇向外部發送事件和消息的方式來告知外部需要更新數據。

無論是上面兩種情況中的哪一種，都不是View直接參與外部邏輯聯系，而是借助中間的Ctrl來聯系，Ctrl中處理UI與外部對接的所有邏輯，並能夠及時的更新View。

 

再來分析下Ctrl，我們發現Ctrl的控制流程是可以固定下來，抽象如下：

1.進入一個View界面之前，得到View組件，初始化View中各個元素的狀態

2.播放一段進入動畫，例如淡入

3.進入動畫播放完成后，對View中的一些元素添加事件偵聽，或對外部的一些事件添加偵聽

4.當偵聽中的事件觸發后，可以選擇是否對View更新，或向外部發送事件，消息

5.同樣的，離開時播放一段動畫，例如淡出

6.離開動畫播放完成后，移除所有事件偵聽，載入一個新的View或場景

 

定義Ctrl基類：

using UnityEngine;
using UnityEngine.Events;
using UnityEngine.SceneManagement;

 6 public class HudBase : MonoBehaviour
{
    public GameObject Root;
    protected Canvas Canvas;
    protected HudView HudView;
    private void Awake()
    {
        Canvas = GetComponentInParent<Canvas>();
        HudView = GetComponent<HudView>();
    }

    private void Start() => InitState();

    private void OnEnable() => Enter(() => AddListeners());

    private void OnDisable() => RemoveListeners();

    protected virtual void InitState() { }

    protected virtual void AddListeners() { }

    protected virtual void RemoveListeners() { }

    protected void Enter(UnityAction complete) => Canvas.FadeIn(Root, () => complete());

    protected void ExitTo(string sceneName) => Canvas.FadeOut(Root, () => SceneManager.LoadScene(sceneName));

    protected void UpdateView<T>(T t) where T : HudView => t.Refresh();
}

 

View基類：

using UnityEngine;

public class HudView : MonoBehaviour
{
    public virtual void Refresh() { }
}

View只有一個自帶的更新視圖的通用方法，數據來源則直接取游戲底層即可，能夠從Ctrl中直接調用View視圖的更新。

 

其他通用的UI方法則全部寫在一個統一的地方，例如淡入淡出的函數，向外部發送事件，偵聽事件等，這里統一寫成了Canvas的擴展方法，便於在基類中也方便直接調用：

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Events;
using DG.Tweening;

public static class HudHelper
{
    //UI
    public static void FadeIn(this Canvas canvas, GameObject target, TweenCallback action)
    {
        var cg = target.GetOrAddComponent<CanvasGroup>();
        cg.alpha = 0;
        cg.DOFade(1, .3f).OnComplete(action);
    }

    public static void FadeOut(this Canvas canvas, GameObject target, TweenCallback action)
    {
        var cg = target.GetOrAddComponent<CanvasGroup>();
        cg.DOFade(0, .3f).OnComplete(action);
    }

    public static void SendEvent<T>(this Canvas canvas, T e) where T : GameEvent => EventManager.QueueEvent(e);

    public static void AddListener<T>(this Canvas canvas, EventManager.EventDelegate<T> del) where T : GameEvent => EventManager.AddListener(del);

    public static void RemoveListener<T>(this Canvas canvas, EventManager.EventDelegate<T> del) where T : GameEvent => EventManager.RemoveListener(del);

    public static void ButtonListAddListener(this Canvas canvas, List<Button> buttons, UnityAction action)
    {
        foreach (var bt in buttons)
        {
            bt.onClick.AddListener(action);
        }
    }

    public static void ButtonListRemoveListener(this Canvas canvas, List<Button> buttons)
    {
        foreach (var bt in buttons)
        {
            bt.onClick.RemoveAllListeners();
        }
    }
}

關於事件隊列可以詳細見之前的隨筆：

https://www.cnblogs.com/koshio0219/p/11209191.html

具體的用法如下：（Ctrl）

using UnityEngine;
using UnityEngine.EventSystems;

public class MapCanvasCtrl : HudBase
{
    private MapCanvasView View;
    public GameObject UnderPanel;

    protected override void InitState()
    {
        //將基類的View轉化為對應子類
        View = HudView as MapCanvasView;
        UnderPanel.SetActive(false);
        UpdateView(View);
    }

    protected override void AddListeners()
    {
        View.Back.onClick.AddListener(() => ExitTo("S_Main"));

        Canvas.AddTriggerListener(View.Map, EventTriggerType.Drag, OnDrag);

        Canvas.ButtonListAddListener(View.TaskPoints, () =>
        {
            UnderPanel.SetActive(true);
            Canvas.FadeIn(UnderPanel, () => View.HitOut.onClick.AddListener(() => ExitTo("S_DemoBattle")));
        });
    }

    private void OnDrag(BaseEventData data)
    {
        //將基類的Data轉化為對應子類
        var d = data as PointerEventData;
        Debug.Log(d.dragging);
    }

    protected override void RemoveListeners()
    {
        View.HitOut.onClick.RemoveAllListeners();
        Canvas.ButtonListRemoveListener(View.TaskPoints);
        Canvas.RemoveTriggerListener(View.Map);
    }
}

只需要重寫以上三個方法即可。注意初始化時將基類的View轉為對應子類使用，使用關鍵字as。

 

對應的具體View：

using UnityEngine.UI;

public class MapCanvasView : HudView
{
    public UpBoxView UpBoxView;

    public Button HitOut;
    public Button Back;

    public Image Map;

    public List<Button> TaskPoints = new List<Button>();

    public override void Refresh()
    {
        UpBoxView.Refresh();
        //Do something else...
    }
}

當然了，大的View中也可能嵌套小的View，這樣可以更為方便的將一些零散的UI控件隨意的插入到其他View中，例如一般游戲中頂部的角色基礎信息欄等：

using TMPro;

public class UpBoxView : HudView
{
    public TextMeshProUGUI Name;
    public TextMeshProUGUI Resource;
    public TextMeshProUGUI Level;

    public override void Refresh()
    {
        var d = GameData.Instance.PlayerData;
        Level.text = "Lv. " + d.lv.ToString();
        Resource.text = d.ResourcePoint.ToString();
        Name.text = "咕嚕靈波";
    }
}

 

在上面的例子中，用到了動態添加EventTrigger偵聽的擴展方法：（看了下網上的很多寫法都有些問題，要不就是不判斷列表中有沒有同類型的就直接往里塞，要不就是判斷了之后發現沒有同類型的實例化一個不添加偵聽就放進去）

    public static void AddTriggerListener(this Canvas canvas, Component obj, EventTriggerType type, UnityAction<BaseEventData> action)
    {
        //先看有沒有對應組件沒有就加上
        var trigger = obj.gameObject.GetOrAddComponent<EventTrigger>();
        //再看看觸發列表中有沒有事件，沒有就新建一個列表
        if (trigger.triggers == null || trigger.triggers.Count == 0)
            trigger.triggers = new List<EventTrigger.Entry>();
        //再看事件列表中是不是已經存在對應類型的值，如果存在的話簡單直接給那個事件加個偵聽就好
        foreach (var e in trigger.triggers)
        {
            if (e.eventID == type)
            {
                e.callback.AddListener(action);
                return;
            }
        }
        //到這里就是很遺憾沒有對應類型的事件，那就實例化一個新的，注意實例化完了以后還要把對應的事件類型和回調設定進去
        var entry = new EventTrigger.Entry();
        entry.eventID = type;
        entry.callback.AddListener(action);
        //全部設定好了再加進去，要不然沒有效果知道么
        trigger.triggers.Add(entry);
    }

    public static T GetOrAddComponent<T>(this GameObject obj) where T : Component => obj.GetComponent<T>() ? obj.GetComponent<T>() : obj.AddComponent<T>();

 調用的時候可以進行as轉換類型來使用，這樣就可以取到對應子類的值了：

    private void OnDrag(BaseEventData data)
    {
        var d = data as PointerEventData;
        Debug.Log(d.dragging);
    }

 

2020年5月25日更新：

1.在刷新視圖時可傳入不定類型和個數的參數。

在實際使用的過程中發現，不傳遞參數有時刷新視圖比較困難，但不同的View又會根據不同的需要傳遞類型和個數均不同的參數，這時就想到了使用params object[] parameters作為參數進行傳遞。

using UnityEngine;

public class HudView : MonoBehaviour
{
    public virtual void Refresh(params object[] parameters) { }
}

    /// <summary>
    /// 刷新視圖
    /// </summary>
    /// <typeparam name="T">視圖類型</typeparam>
    /// <param name="t">視圖實例</param>
    /// <param name="parameters">不定類型和個數的參數</param>
    protected void UpdateView<T>(T t, params object[] parameters) where T : HudView => t.Refresh(parameters);

因為C#中所有的類型都繼承自object，通過裝箱和拆箱就可以傳遞任何類型的參數，這樣寫非常簡潔，但缺點是對於性能會有一點的損失；如果你實在不想損失性能，也可以考慮用多種不同類型的泛型參數作為替代。

    protected void UpdateView<T0, T1>(T0 t0, T1 t1) where T0 : HudView => t0.Refresh(t1);
    protected void UpdateView<T0, T1, T2>(T0 t0, T1 t1, T2 t2) where T0 : HudView => t0.Refresh(t1, t2);
    protected void UpdateView<T0, T1, T2, T3>(T0 t0, T1 t1, T2 t2, T3 t3) where T0 : HudView => t0.Refresh(t1, t2, t3);
    protected void UpdateView<T0, T1, T2, T3, T4>(T0 t0, T1 t1, T2 t2, T3 t3, T4 t4) where T0 : HudView => t0.Refresh(t1, t2, t3, t4);

這樣的缺點就是，寫起來會很繁瑣，需要多少參數就要加幾個不同類型的函數，但因為不需要頻繁的轉換類型，性能來講是較優解。

 

2.可以靈活控制切換View的函數。

有時我們不僅僅希望只用FadeIn或者FadeOut來進入或退出頁面，而是可以自定義各種切換的方式，這是就需要用到委托作為參數了。

    /// <summary>
    /// 切換頁面
    /// </summary>
    /// <param name="obj">目標</param>
    /// <param name="way">切換方式委托</param>
    /// <param name="complete">切換完成后委托</param>
    protected void Shift(GameObject obj, UnityAction<GameObject, TweenCallback> way, UnityAction complete) => way(obj, () => complete());

當然了，這樣的話我們就需要規定所有的切換方式的函數參數類型和個數都需要與way保持一致。

 

補充——關於類型的判斷與轉換：

使用params object[] parameters在實際函數實現的過程中需要判斷傳入的參數類型是否符合當前預期，可以通過下來的方式來進行具體判斷，例如：

        if (parameters.Length > 0 && parameters[0] is int)
        {
            Debug.Log((int)parameters[0]);
        }

        if (parameters.Length > 0 && parameters[0].GetType() == typeof(int))
        {
            Debug.Log((int)parameters[0]);
        }

當然了，如果是引用類型，除了強制類型轉換之外還可以使用關鍵字as進行裝換，上面的例子中已經有了就不再舉例了。

 

但如果是泛型的話是不能直接執行強制類型轉換的，但還是可以先轉換為object類型，再執行強制類型轉換：

    private void Test<T>(T t)
    {
        if (t is int)
        {
            object temp = t;
            Debug.Log((int)temp);
        }
        //or
        if (typeof(T) == typeof(int))
        {
            object temp = t;
            Debug.Log((int)temp);
        }
    }