【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, 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设置相关显示。

相关文档链接

工程源代码：https://gitee.com/huoyixian/release-framework-client