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

　　UI Kit 快速入门
　　
　　首先我们来进行 UI Kit 的快速入门
　　
　　制作一个界面的，步骤如下:
　　
　　准备
　　
　　生成代码
　　
　　逻辑编写
　　
　　运行
　　
　　1. 准备
　　
　　先创建一个场景 TestUIHomePanel。
　　
　　enter image description here
　　
　　删除 Hierarchy 其他的 GameObject。
　　
　　搜索 UIRoot.prefab，拖入 Hierarchy。
　　
　　enter image description here
　　
　　在 UIRoot / Design GameObject 下创建 Panel ( 右击 Design -> UI -> Panel )。
　　
　　将该 Panel 改名为 UIHomePanel。
　　
　　添加按钮 BtnStart、BtnAbout。
　　
　　enter image description here
　　
　　对 BtnStart、BtnAbout 添加 UIMark Component。
　　
　　将 UIHomePanel 做成 prefab，再进行 AssetBundle 标记。
　　
　　enter image description here
　　
　　2. 生成代码
　　
　　右击 UIHomePanel Prefab 选择 @UI Ki t- Create UI Code，生成 UI 脚本。
　　
　　enter image description here
　　
　　此时，生成的脚本自动挂到了 UIHomePanel 上，并且进行 UIMark 标记的控件，自动绑定到 prefab 上，如图所示:
　　
　　enter image description here
　　
　　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
　　
　　4. 运行
　　
　　创建一个 空 GameObject，命名为 TestUIHomePanel，挂上 UIPanelTester 脚本。
　　
　　UIPanelTester 脚本的 PanelName 填写为 UIHomePanel。
　　
　　enter image description here
　　
　　运行！
　　
　　运行之后，点击对应的按钮则会有对应的输出。
　　
　　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
　　
　　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。
　　
　　层级管理的核心实现比较简单，代码如下:
　　
　　switch (uiLevel)
　　
　　{
　　
　　case UILevel.Bg:
　　
　　ui.Transform.SetParent(mBgTrans);
　　
　　break;
　　
　　case UILevel.AnimationUnderPage:
　　
　　ui.Transform.SetParent(mAnimationUnderTrans);
　　
　　break;
　　
　　case UILevel.Common:
　　
　　ui.Transform.SetParent(mCommonTrans);
　　
　　break;
　　
　　case UILevel.AnimationOnPage:
　　
　　ui.Transform.SetParent(mAnimationOnTrans);
　　
　　break;
　　
　　case UILevel.PopUI:
　　
　　ui.Transform.SetParent(mPopUITrans);
　　
　　break;
　　
　　case UILevel.Const:
　　
　　ui.Transform.SetParent(mConstTrans);
　　
　　break;
　　
　　case UILevel.Toast:
　　
　　ui.Transform.SetParent(www.motiazxzc.cn mToastTrans);
　　
　　break;
　　
　　case UILevel.Forward:
　　
　　ui.Transform.SetParent(mForwardTrans);
　　
　　break;
　　
　　}
　　
　　这种是最通用最常见的层级管理方式。只要将 UIPanel 放到对应层级的 GameObject 下面就好了。
　　
　　不过这种层级管理会有一点问题。当这个 UIRoot 只有一个 Canvas 的时候，页面的打开或关闭都会进行 Canvas 网格的重新排序，也就是网格重建，所以很多方案都建议，每个 UIPanel 挂一个 Canvas。然后根据 Canvas Sorting Order 进行层级管理。
　　
　　使用 Canvas 的 Sorting Order 可以更精细地进行层级管理，而 UI Kit 目前的方式相对粗糙一些。
　　
　　使用 Canvas 的方式是 UI Kit 的一个方向，等 QFramework 团队找到比较简洁的实现之前，UI Kit 还是默认使用当前方式。
　　
　　UI Kit 最佳实践 (一) 界面跳转及数据展示
　　
　　接下来，我们来制作两个界面。一个是 UILevelPanel，一个是 UIGamePanel。
　　
　　UILevelPanel 功能定义:
　　
　　有若干个关卡，这里暂时定义为九个关卡。
　　
　　点击任意关卡则跳转到 UIGamePanel，并在 UIGamePanel 中显示当前关卡信息。比如，在 UILevelPanel 点击第一关，则打开的 UIGamePanel 则展示 第一关,同理第二关。
　　
　　UIGamePanel 功能定义:
　　
　　游戏暂停按钮。
　　
　　关卡信息展示，这里只展示第几关就够了。
　　
　　这里 UILevelPanel 和 UIGamePanel 的制作的详细过程和 UI Kit 快速入门类似。简单展示下两个页面的布局，和相关的逻辑代码。
　　
　　UIGamePanel.prefab:
　　
　　enter image description here
　　
　　BtnPause 是一个 Button。
　　
　　Level 是一个 Text，主要是用来表示第几关的。
　　
　　其代码如下:
　　
　　UIGamePanel.cs
　　
　　/* 2018.7 凉鞋的MacBook Pro (2) */
　　
　　namespace QFramework.Example
　　
　　{
　　
　　public class UIGamePanelData : UIPanelData
　　
　　{
　　
　　public int LevelIndex = 1;
　　
　　}
　　
　　public partial class UIGamePanel : UIPanel
　　
　　{
　　
　　protected override void InitUI(IUIData uiData = null)
　　
　　{
　　
　　mData = uiData as UIGamePanelData www.51feiyuzc.cn new UIGamePanelData();
　　
　　//please add init code here
　　
　　Level.text = "第" + mData.LevelIndex + "关";
　　
　　}
　　
　　protected override void ProcessMsg (int eventId,QMsg msg)
　　
　　{
　　
　　throw new System.NotImplementedException ();
　　
　　}
　　
　　protected override void RegisterUIEvent()
　　
　　{
　　
　　BtnPause.onClick.AddListener((www.zhuyngyule.cn ) =>
　　
　　{
　　
　　Log.E("BtnPause Clicked");
　　
　　});
　　
　　}
　　
　　}
　　
　　}
　　
　　在 InitUI 方法中，会接收到一个 UIData，然后转为 UIGamePanelData 后赋值给 MData。
　　
　　那么这个 UIData 从哪里传过来呢?
　　
　　答案是 UIMgr.Open 这个 API，这个 API 提供传入相应界面的 UIData。这部分在下一小结详细说。
　　
　　现在重点是，在 UIMgr.Open 不传入 UIData 时，UIGamePanel， UIData 有可能是空的，那么当 UIData 为空时，则会默认创建一个 UIGamePanelData()。
　　
　　默认创建一个 UIGamePanelData 这样做有什么好处呢?
　　
　　答案是 方便测试，可以在 UIGamePanelData 里给数据设置一些默认值，这里 LevelIndex 默认是 1。当然这也不是本小节的重点，这个也下一小节详细说。
　　
　　由于可以设置默认值，所以 TestUIGamePanel.scene 运行之后如下:
　　
　　enter image description here
　　
　　默认就是第一关。这样负责编写 UIGamePanel 和游戏战斗模块的同学们，主要改自己部分的 UIGamePanelData 就可以进行一些测试了，而不是从头开始运行游戏手点直到打开 UIGamePanel 才看到测试结果，重点是 UIGamePanel 不依赖任何其他数据，只是作为数据的一个展示而已。反正这不是本节重点。。。不好意思实在忍不住:）
　　
　　接下来 UILevelPanel
　　
　　UILevelPanel.prefab:
　　
　　enter image description here
　　
　　LevelProtoype 是一个 Button，代表关卡 item 的原型。
　　
　　LevelsContainer 则是一个 普通的 GameObject，不过挂上了 GridLayoutGroup 了。
　　
　　BtnBack 则是左上角的的返回按钮。
　　
　　UILevelPanel 可能会复杂一点了，代码如下:
　　
　　/* 2018.7 凉鞋的MacBook Pro (www.51kunlunyule.com 2) */
　　
　　using UnityEngine.UI;
　　
　　namespace QFramework.Example
　　
　　{
　　
　　public class UILevelPanelData : UIPanelData
　　
　　{
　　
　　// TODO: Query Mgr's Data
　　
　　}
　　
　　public partial class UILevelPanel : UIPanel
　　
　　{
　　
　　protected override void InitUI(IUIData uiData = null)
　　
　　{
　　
　　mData = uiData www.baihuayl7.cn  UILevelPanelData ?? new UILevelPanelData();
　　
　　//please add init code here
　　
　　for (var i = 0; i <www.jucaiyle.cn  10; i++)
　　
　　{