今天来介绍一下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, IViewBase
where 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设置相关显示。