Unity 游戏框架：UI 管理神器 UI Kit

首先我们来进行 UI Kit 的快速入门

制作一个界面的，步骤如下:

准备

生成代码

逻辑编写

运行

1. 准备

先创建一个场景 TestUIHomePanel。

删除 Hierarchy 其他的 GameObject。

搜索 UIRoot.prefab，拖入 Hierarchy。

在 UIRoot / Design GameObject 下创建 Panel ( 右击 Design -> UI -> Panel )。

将该 Panel 改名为 UIHomePanel。

添加按钮 BtnStart、BtnAbout。

对 BtnStart、BtnAbout 添加 UIMark Component。

将 UIHomePanel 做成 prefab，再进行 AssetBundle 标记。

2. 生成代码

右击 UIHomePanel Prefab 选择 @UI Ki t- Create UI Code，生成 UI 脚本。

此时，生成的脚本自动挂到了 UIHomePanel 上，并且进行 UIMark 标记的控件，自动绑定到 prefab 上，如图所示:

3. 逻辑编写

打开 UIHomePanel ，在 ResgisterUIEvent 上编写 Button 事件绑定，编写后代码如下:

/* 2018.7 凉鞋的MacBook Pro (2) */ using System; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using QFramework; namespace QFramework.UIKitExample { public class UIHomePanelData : UIPanelData { // TODO: Query Mgr's Data } public partial class UIHomePanel : UIPanel { protected override void InitUI(IUIData uiData = null) { mData = uiData as UIHomePanelData ?? new UIHomePanelData(); //please add init code here } protected override void ProcessMsg (int eventId,QMsg msg) { throw new System.NotImplementedException (); } protected override void RegisterUIEvent() { BtnStart.onClick.AddListener(() => { Log.E("BtnStart Clicked !!!"); }); BtnAbout.onClick.AddListener(() => { Log.E("BtnAbout Clicked !!!"); }); } protected override void OnShow() { base.OnShow(); } protected override void OnHide() { base.OnHide(); } protected override void OnClose() { base.OnClose(); } void ShowLog(string content) { Debug.Log("[ UIHomePanel:]" + content); } } } 4. 运行

创建一个 空 GameObject，命名为 TestUIHomePanel，挂上 UIPanelTester 脚本。

UIPanelTester 脚本的 PanelName 填写为 UIHomePanel。

运行！

运行之后，点击对应的按钮则会有对应的输出。

UI Kit 的快速入门就介绍到这里。其中的 UI Kit 代码生成和 Res Kit 的 Simulation Mode 为日常开发节省了大量的时间。

UI Kit 层级管理

我们的 UIHomePanel 是怎么打开的呢?

答案在 UIPanelTester 中。代码如下:

namespace QFramework { using System.Collections; using System.Collections.Generic; using UnityEngine; [System.Serializable] public class UIPanelTesterInfo { /// <summary> /// 页面的名字 /// </summary> public string PanelName; /// <summary> /// 层级名字 /// </summary> public UILevel Level; } public class UIPanelTester : MonoBehaviour { /// <summary> /// 页面的名字 /// </summary> public string PanelName; /// <summary> /// 层级名字 /// </summary> public UILevel Level; [SerializeField] private List<UIPanelTesterInfo> mOtherPanels; private void Awake() { ResMgr.Init(); } private IEnumerator Start() { yield return new WaitForSeconds(0.2f); UIMgr.OpenPanel(PanelName, Level); mOtherPanels.ForEach(panelTesterInfo => { UIMgr.OpenPanel(panelTesterInfo.PanelName, panelTesterInfo.Level); }); } } }

在 Start 方法中，有一句 UIMgr.OpenPanel ( PanelName, Level );

其中 PanelName 是我们填写的 UIHomePanel。Level 则是用来显示层级的枚举。

枚举定义如下:

public enum UILevel { AlwayBottom = -3, //如果不想区分太复杂那最底层的UI请使用这个 Bg = -2, //背景层 UI AnimationUnder = -1, //动画层 Common = 0, //普通层 UI AnimationOn = 1, // 动画层 PopUI = 2, //弹出层 UI Guide = 3, //新手引导层 Const = 4, //持续存在层 UI Toast = 5, //对话框层 UI Forward = 6, //最高UI层用来放置UI特效和模型 AlwayTop = 7, //如果不想区分太复杂那最上层的UI请使用这个 }

默认为 UILevel.Common。