Unity 遊戲框架：UI 管理神器 UI Kit
阿新 • • 發佈：2020-03-28
### UI Kit 快速入門
首先我們來進行 UI Kit 的快速入門
製作一個介面的，步驟如下:
1. 準備
2. 生成程式碼
3. 邏輯編寫
4. 執行
#### 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 事件繫結，編寫後代碼如下:
```csharp
/* 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 中。程式碼如下:
```csharp
namespace QFramework
{
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
[System.Serializable]
public class UIPanelTesterInfo
{
///
/// 頁面的名字
///
public string PanelName;
///
/// 層級名字
///
public UILevel Level;
}
public class UIPanelTester : MonoBehaviour
{
///
/// 頁面的名字
///
public string PanelName;
///
/// 層級名字
///
public UILevel Level;
[SerializeField] private List