【Framework系列之Client】UIManager和UIPanel模块介绍

今天来介绍一下UIManager和UIPanel模块，话不多说直接开始。

UIManager

功能介绍

UIManager是管理UIPanel的唯一模块，UIManager的主要功能包括：

提供打开、隐藏、关闭UIPanel的相关接口。
负责UIPanel对象的创建以及初始化。
负责储存UIPanel对象实例。

UIManager提供了打开、隐藏、关闭UIPanel的泛型接口，通过传入UIPanel的子类型，就可以对其进行相应的操作。接口代码如下：

/// <summary>打开UI</summary>
/// <typeparam name="T">UI类型</typeparam>
public void OpenUI<T>(Action pCallback = null) where T : Component/// <summary>隐藏UI（不销毁）</summary>
/// <typeparam name="T">UI类型</typeparam>
public void HideUI<T>()/// <summary>关闭UI（销毁）</summary>
/// <typeparam name="T">UI类型</typeparam>
public void CloseUI<T>()

UIManager内以键值对的方式存储UIPanel，当调用OpenUI时会先判断是否存在该UIPanel，如果没有则会加载创建并存储下来。示例代码如下：

public class UIManager : ManagerBase<UIManager>
{private Dictionary<string, GameObject> mUIDictionary = new Dictionary<string, GameObject>();/// <summary>打开UI</summary>/// <typeparam name="T">UI类型</typeparam>public void OpenUI<T>(Action pCallback = null) where T : Component{string uiName = GetUIName<T>();GameObject uiGameObject = null;if (!mUIDictionary.TryGetValue(uiName, out uiGameObject)){uiGameObject = InstantiateUI<T>();if (uiGameObject == null){ManagerCollection.LoadManager.LoadAssetAsync(uiName, (bool pIsSucceeded) =>{OpenUI<T>(pCallback);});}else{uiGameObject.SetActive(true);pCallback?.Invoke();}}else{uiGameObject.SetActive(true);pCallback?.Invoke();}}/// <summary>实例化UI</summary>/// <param name="uiName">面板名称</param>/// <param name="gameObjectAsset">资源</param>/// <returns>面板对象</returns>private GameObject InstantiateUI<T>() where T : Component{GameObject uiGameObject = null;string uiName = GetUIName<T>();GameObject gameObjectAsset = ManagerCollection.ResourceManager.GetGameObject(uiName);if (gameObjectAsset != null){uiGameObject = GameObject.Instantiate(gameObjectAsset);IPanelBase panelBase = uiGameObject.AddComponent<T>() as IPanelBase;panelBase.Init();uiGameObject.transform.SetParent(mCanvasDictionary[panelBase.CanvasType], false);uiGameObject.transform.localScale = Vector3.one;uiGameObject.transform.localRotation = Quaternion.identity;mUIDictionary.Add(uiName, uiGameObject);}return uiGameObject;}
}

设计思路

先说一下UIManager为什么采用泛型接口的设计，而不是通过string作为参数来传递UIPanel的名称。这么做的主要原因是为了正确的获取面板名称。泛型接口通过传递的UIPanel类型来获取名称，这样做的好处在于，在代码编译阶段就可以利用编译器（如VS，VSCode）检测判断类型是否正确，并且可以通过UIPanel类型正确的获取UIPanel的名称。而采用string作为参数传递UIPanel名称，则需要在运行时才能判断UIPanel名称是否正确。所泛型接口能更好的确保代码的正确性。

再说一下InstantiateUI方法中为什么用AddComponent的方式添加UIPanel脚本。原因在于游戏框架被分为Client、Server、Desgin、Resource多个工程，前端和美术在各自的工程项目中开发，流程是美术在Resource工程中制作Prefab资源，制作完成后由程序同步到Client工程中开发脚本逻辑。由于美术在Resource工程中并不会涉及到脚本文件，为了避免不必要的同步，所以在运行时创建UIPanel实例时绑定脚本。

UIPanel模块

功能介绍

UIPanel借鉴了MVC的设计模式，UIPanel分为PanelBase、ControllerBase、ViewBase三个部分，在创建一个新UIPanel时需分别创建三个子类，并继承上面各自的基类。示例代码如下：

/// <summary>UI面板类</summary>
public class UIPanel : PanelBase<UIPanelController, UIPanelView>
{protected override void OnInit(){}
}/// <summary>UI面板Controller类</summary>
public class UIPanelController : ControllerBase<UIPanelView>
{protected override void OnInit(){}
}/// <summary>UI面板View类</summary>
public class UIPanelView : ViewBase<UIController>
{protected override void OnInit(){}
}

Panel部分的主要功能有：

Panel作为面板的主类，Panel类名作为面板的名称。在UIManager调用泛型接口时，传入Panel类型，如上面代码的UIPanel。
负责Controller和View的创建初始化。

Controller部分的主要功能和主要职责有：

Controller主要负责面板的逻辑部分代码，处理UI响应、事件响应。
ControllerBase提供了相关UI组件事件响应的接口。

示例代码如下：

protected void RegisterButton(string pGameObjectName, ExButton.EnumCallbackType pCallbackType, Action pCallback)protected void RegisterSlider(string pGameObjectName, ExSlider.EnumCallbackType pCallbackType, Action<float> pCallback)protected void RegisterToggle(string pGameObjectName, ExToggle.EnumCallbackType pCallbackType, Action<bool> pCallback)

View部分的主要功能和职责有：

View主要负责面板显示部分的代码。
View储存持有代码中需要用到UI对象。
View提供获取UI对象和组件的相关接口。

示例代码如下：

public class ViewBase<C> : UIBase, IViewBasewhere C : IControllerBase
{private C mControllerBase;[SerializeField]private List<GameObject> mGameObjectList = new List<GameObject>();public GameObject GetGameObject(string pGameObjectName)public T GetComponent<T>(string pGameObjectName)
}

设计思路

UIPanel借鉴了MVC的设计模式，将UI面板中逻辑处理和界面显示两大部分的代码分开，让代码更加的清晰，从而便于开发与维护。虽然Controller和View可以相互的访问，但在实际开发中还是遵从Controller驱动View的思路来开发。UIPanel先在Controller处理UI响应、事件响应相关逻辑，完成后在View设置相关显示。