UI Kit 簡介
UI Kit 是一套界面管理&快速開發解決方案
UI Kit 的特性如下：
- 界面管理
- 層級管理
- 代碼生成及元件自動綁定（底層用的 ViewController)
UI Kit 基本使用
UI Kit 本身有一套推薦使用的工作流程，而此工作流程的設計是為了使每個界面隻負責展示資料和監聽使用者輸入，界面與界面之間互相獨立，并且可獨立測試。
下面我們将介紹如何制作一個遊戲首頁（UIBasicPanel）。
首先我們先建立一個場景：TestUIBasicPanel，如下圖所示:
在這裡大家要注意一下，UI Kit 推薦每個界面建立一個對應的測試場景，要保證每個界面是可以獨立測試的。
接着打開 TestUIBasicPanel 如下所示：
我們拖出來一個 UIRoot prefab，如下所示:
這裡非常清晰地可以看到 UI Kit 所支援的所有層級。
接着我們在 Design 層級下建立一個 Panel（右擊 Design->UI->Panel) ，并命名為 UIBasicPanel，如下所示:
這裡要說一點，Design 層級，顧名思義就是用來做設計的層級，什麼是設計？就是拼界面，這個層級就是專門用來拼界面的，Design 層級會在運作的時候會自動隐藏掉自己以及所有的子節點。
OK，接下來，我們将 UIBasic 制作成 prefab，将其放到 Assets/Art/UIPrefabs 目錄下，如果沒有這個目錄就自己手動建立一下。
放入後如下圖所示:
Assets/Art/UIPrefab 這個目錄是怎麼來的呢？它是 QFramework 約定的專門放置 UI 界面 prefab 的位置。而 Assets/Art 是架構推薦存放資源的位置，當然關于資源的存放位置隻是推薦，而不是強制的。
但是 UI 界面的 prefab 必須放在 Assets/Art/UIPrefab 目錄下，因為這個部分在代碼生成的時候需要。
那麼有的童鞋可能會問，Assets/Art/UIPrefab 這個路徑可以不可以更改？
當然可以，更改的方式也很簡單，就是打開包管理面闆(QFramework/Preference ctrl + e)，打開後可以看到如下面闆:
詳細的設定方式在上邊介紹了，這裡就不多介紹了。
接下來需要将 UIHomePanel prefab 标記為 AssetBundle，如下圖所示:
标記成功後。
會看到如下結果:
接着，我們在這裡要確定一件事情，就是 Res Kit 需要保證目前環境是模拟環境（Simulation Mode），具體看面闆中的如下選項是否是勾上即可。
確定勾上之後，我們就開始生成代碼，具體操作如下所示（右鍵->@UI-Kit Create UI Code):
點選之後等待編譯，編譯結束後，我們看到如下結果:
腳本生成成功
腳本自動挂載了 UIBasicPanel Prefab 上
到此，代碼生成部分就介紹完了。
接着，我們想辦法讓這個場景獨立運作。
現在，我們直接運作場景，是不會加載任何界面的，如下所示:
如何讓這個場景加載 UIBasicPanel 呢？
很簡單，使用 UIPanelTester 如下所示:
按照圖中樣子設定就好，然後運作場景。
結果如下:
圖中成功加載了改界面。
這樣，最基本的 UIBasicPanel 測試場景就算搭建完了，同時我們是完全按照 QFramework 推薦的工作流程完成的。
雖然步驟會稍微繁瑣一點，但是用一段時間大家就會覺得這是值得的。
OK，接下來我們來介紹控件的自動綁定功能。
控件的自動綁定功能
我們在 UIBasicPanel 上添加一些按鈕，并在每個按鈕上挂上 Bind 腳本，如下所示:
接着 Apply UIBasicPanel，如下所示:
這裡要注意，一定要標明 UIBasicPanel 再進行 Apply，千萬别選成 UIRoot 了。
Apply 之後，再次生成一次代碼，操作如下所示:
生成之後，結果如下:
接着，我們打開 UIHomePanel.cs 腳本，試着寫一些代碼:
using UnityEngine;
using UnityEngine.UI;
using QFramework;
namespace QFramework.Example
{
public class UIBasicPanelData : UIPanelData
{
}
public partial class UIBasicPanel : UIPanel
{
protected override void OnInit(IUIData uiData = null)
{
mData = uiData as UIBasicPanelData ?? new UIBasicPanelData();
BtnStart.onClick.AddListener(() =>
{
Debug.Log("開始遊戲");
});
}
protected override void OnOpen(IUIData uiData = null)
{
}
protected override void OnShow()
{
}
protected override void OnHide()
{
}
protected override void OnClose()
{
}
}
}
代碼很簡單，主要是在 OnInit 的時候注冊了 BtnStart 按鈕。
接着我們運作場景，接着點選 BtnStart 按鈕，得到結果如下:
這樣控件自動綁定功能就介紹完了。
自動綁定的功能與 View Controller + Bind 是使用的是同一套機制。
打開、關閉界面
我們運作 UIBasicPanel 是通過 UIPanelTester 實作的。
UIPanelTester 是一個 UI 界面的測試器，它隻能在編輯器環境下運作。
真正打開一個 UI 界面，是通過 UIKit.OpenPanel 這個 API 完成的。
隻需要寫如下代碼即可:
代碼非常簡單。
而我們要關閉掉一個 UI 界面也比較容易，代碼如下:
如果是在一個界面内部關掉自己的話，代碼如下:
OK，到此我們接觸了 3 個 API：
- UIKit.OpenPanel<T>();
- UIKit.ClosePanel<T>();
- UIPanel.CloseSelf();
後邊的兩個沒什麼好講的，很簡單，但是第一個 API 比較重要，因為它有一些參數我們可以填。
UIKit.OpenPanel
UIKit.OpenPanel 的參數定義及重載如下：
public static T OpenPanel<T>(UILevel canvasLevel = UILevel.Common, IUIData uiData = null,
string assetBundleName = null,
string prefabName = null) where T : UIPanel
{
...
}
public static T OpenPanel<T>(IUIData uiData, PanelOpenType panelOpenType = PanelOpenType.Single,
string assetBundleName = null,
string prefabName = null) where T : UIPanel
{
...
}
public static UIPanel OpenPanel(string panelName, UILevel level = UILevel.Common, string assetBundleName = null)
{
...
}
所有參數如下：
- canvasLevel：界面在哪個層級打開
- 預設值：Common
- uiData：打開時可以給界面傳的初始資料
- 預設值：null
- assetBundleName：界面資源所在的 assetBundle 名
- 預設值：null
- prefabName：如果界面名字和 prefab 名字不同，則以這個參數為準去加載界面資源
- 預設值：null
都有預設值，是以這四個參數都可以不用傳。
不過這四個 API 在某種情況下非常實用。
下邊舉一些例子。
// 在 Forward 層級打開
UIKit.OpenPanel<UIBasicPanel>(UILevel.Forward);
// 傳遞初始資料給 UIHomePanel
UIKit.OpenPanel<UIBasicPanel>(new UIHomePanelData()
{
Coin = 10
});
// 從 UIHomePanelTest.prefab 加載界面
UIKit.OpenPanel<UIBasicPanel>(prefabName: "UIBasicPanel");
都比較容易了解。
有的童鞋可能會問，我們給 UIHomePanel 傳遞的 UIHomePanelData，在哪裡使用呢？
答案是在，OnInit 和 OnOpen 中，如下所示:
namespace QFramework.Example
{
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UI;
public class UIBasicPanelData : QFramework.UIPanelData
{
public int Coin;
}
public partial class UIBasicPanel : QFramework.UIPanel
{
protected override void OnInit(QFramework.IUIData uiData)
{
mData = uiData as UIBasicPanelData ?? new UIBasicPanelData();
// please add init code here
// 外邊傳進來的，第一次初始化的時候使用
Debug.Log(mData.Coin);
}
protected override void OnOpen(QFramework.IUIData uiData)
{
// 每次 OpenPanel 的時候使用
Debug.Log((uiData as UIBasicPanelData).Coin);
}
protected override void OnShow()
{
}
protected override void OnHide()
{
}
protected override void OnClose()
{
}
}
}
為什麼要這樣做呢？
筆者認為，界面有兩種顯示資料的用法，一種是有的界面是需要從外邊填充的，比如警告、彈框、或者道具資訊頁面等。另一種界面是需要自己擷取資料并展示的，比如遊戲中的主角金币、等級、經驗值等。
如果界面的資料都從外邊填充，那麼這個界面會擁有更好的可複用性。
當然需要一個可複用性的界面還是需要一個普通界面就看大家的需求了，并不是說有可複用性的界面就是好的。
異步加載界面
StartCoroutine(UIKit.OpenPanelAsync<UIHomePanel>());
// 或者
UIKit.OpenPanelAsync<UIHomePanel>().ToAction().Start(this);
在 WebGL 平台上, AssetBundle 加載資源隻支援異步加載，是以為此提供了 UIKit 的異步加載支援。
UIPanel 生命周期
我們先看下 UIBasicPanel 的代碼，如下:
namespace QFramework.Example
{
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UI;
public class UIBasicPanelData : QFramework.UIPanelData
{
}
public partial class UIBasicPanel : QFramework.UIPanel
{
protected override void OnInit(QFramework.IUIData uiData)
{
mData = uiData as UIHomePanelData ?? new UIHomePanelData();
// please add init code here
}
protected override void OnOpen(QFramework.IUIData uiData)
{
}
protected override void OnShow()
{
}
protected override void OnHide()
{
}
protected override void OnClose()
{
}
}
}
預設的生命周期函數如下:
- OnInit
- OnOpen
- OnShow
- OnHide
- OnClose
OnInit 則是在 UIPanel 所在的 prefab 初始化的時候進行調用的，在調用 UIKit.OpenPanel 時，隻要在 UIKit 中沒有對應的緩存界面時，就會調用一次 OnInit 這個周期。
OnOpen 就是每次 UIKit.OpenPanel 調用時，就會調用。
OnShow 實際上調用時機與 UIKit.OpenPanel 是一樣的，隻不過 OnShow 是最初版本遺留下拉的 API，是以就保留了。當然還有 UIMgr.ShowPanel 調用時，OnShow 會被調用
OnHide 則是在 UIKit.HidePanel 調用時，OnHide 會被調用。
最後 OnClose 就是在 UIKit.ClosePanel 調用時，就會觸發，實際上 OnClose 相當于 OnDestory 這個周期。
大概就這些，其中 UIKit.OpenPanel 會觸發資源的加載和初始化操作，而 UIKit.ClosePanel 則會觸發解除安裝和銷毀操作，隻要記得這兩點就好。
筆者基本上就隻會用到 OnInit 和 OnClose 這些周期，偶爾會用一用 OnOpen。
OK，此篇的内容就這些。
UIKit 剩下的常用 API
UIKit.Root.SetResolution
參數定義如下：
對應 UIRoot 上的 Canvas Scaler 如下:
大部分項目，用這個 API 做螢幕适配足夠了。
UIKit.Root.Camera
擷取 UIRoot 的錄影機。
UIKit.Stack.Push、UIPanel.Back（Pop）
有的時候，UI 需要實作一個 UI 界面的堆棧，以便于支援傳回上一頁這樣的操作。
這個時候就可以用 Push 和 UIPanel.Back 實作。
示例代碼:
UIKit.Stack.Push(this); // this 是 Panel
// UIHomePanel 需要確定是打開的狀态，如果不打開會報錯。
UIKit.Stack.Push<UIHomePanel>();
this.Back(); // 彈出 UIHomePanel
this.Back(); // 彈出 this
非常簡單。
UIPanel 自動生成工具
在此篇的最開始，筆者手動建立了一套圍繞 UIBasicPanel 的測試、開發場景，其過程比較繁瑣。
為了解決這個問題，筆者寫了一個簡單的 UIPanel 自動生成工具。
接下來看下它的基本使用流程。
基本使用
首先，快捷鍵 ctrl + e 打開 PackageKit 面闆，如下:
在上圖中界面名字的輸入框中輸入 Game/UIGamePanel，然後點選建立 UI Panel，如下所示:
輸入之後可以看到即将生成檔案的預覽。
在這個面闆中，我們還可以設定 分辨率與适配對齊，還有子產品的目錄，如果不想在更目錄建立按照規範生成檔案，也可以在其他子目錄中建立。
我們點選 “建立 UI Panel” 這個按鈕。
點選之後結果如下:
相關的 prefab，場景、腳本都生成好了，就連 AssetBundle 也都标記好了，如下:
這就是這個工具的一個用處，非常友善，解決了筆者大量的開發工作量。
在上一篇，我們了解了界面的打開和關閉相關的 API。
在這一篇，我們了解一下 UI Kit 中的 子界面/子控件—UI Element
UI Element 簡介
在前篇，我們了解到，一個 UIPanel 是可以自動綁定幾個 子控件的（Bind）。但是當一個界面結構比較複雜的時候，不可能一個 UIPanel 管理數十個 Bind，這時候就需要對 Bind 進行一些打組操作。我們的 UIElement 就可以登場了。
UIElement 基本使用
使用方式非常簡單，就是将 Bind 中的 标記類型 改成 Element即可,如下所示。
并且要給 生成類名 填寫一個名字，這個名字決定生成的類的名字。這裡填寫了 UIAboutSubPanel。
之後進行 Apply 操作。
注意這裡 Apply 的是 UIBasicPanel。
接着生成代碼， 如下:
等待編譯後，如下所示：
BtnClose 由 UIAboutSubPanel 管理了
我們看下腳本目錄:
目錄生成了一個新的檔案夾，是以父 Panel （UIBasicPanel）為名的。
打開 UIAboutSubPanel 腳本，代碼如下所示:
/****************************************************************************
* 2022.7 LIANGXIEWIN
****************************************************************************/
using System;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using QFramework;
namespace QFramework.Example
{
public partial class SubPanel1 : UIElement
{
private void Awake()
{
}
protected override void OnBeforeDestroy()
{
}
}
}
再看下 UILoginView.Designer.cs 腳本，如下所示:
/****************************************************************************
* 2022.7 LIANGXIEWIN
****************************************************************************/
using UnityEngine;
using UnityEngine.UI;
using QFramework;
namespace QFramework.Example
{
public partial class SubPanel1
{
[SerializeField] public UnityEngine.UI.Button BtnStart2;
[SerializeField] public UnityEngine.UI.Button BtnStart3;
public void Clear()
{
BtnStart2 = null;
BtnStart3 = null;
}
public override string ComponentName
{
get { return "SubPanel1";}
}
}
}
結構與之前的 UIBasicPanel 非常相似。
接下來，就可以寫一些與子子產品相關的邏輯了，關于 UIElement 的基本使用就介紹到這裡。
同一個類型的界面打開多個
如何自定義界面加載方式?
繼承 AbstractPanelLoaderPool 類，再實作一個 IPanelLoader 的類，參考代碼如下:
using System;
using UnityEngine;
namespace QFramework.Example
{
public class CustomPanelLoaderExample : MonoBehaviour
{
public class ResourcesPanelLoaderPool : AbstractPanelLoaderPool
{
/// <summary>
/// Load Panel from Resources
/// </summary>
public class ResourcesPanelLoader : IPanelLoader
{
private GameObject mPanelPrefab;
public GameObject LoadPanelPrefab(PanelSearchKeys panelSearchKeys)
{
mPanelPrefab = Resources.Load<GameObject>(panelSearchKeys.GameObjName);
return mPanelPrefab;
}
public void LoadPanelPrefabAsync(PanelSearchKeys panelSearchKeys, Action<GameObject> onPanelLoad)
{
var request = Resources.LoadAsync<GameObject>(panelSearchKeys.GameObjName);
request.completed += operation => { onPanelLoad(request.asset as GameObject); };
}
public void Unload()
{
mPanelPrefab = null;
}
}
protected override IPanelLoader CreatePanelLoader()
{
return new ResourcesPanelLoader();
}
}
void Start()
{
// 遊戲啟動時，設定一次
UIKit.Config.PanelLoaderPool = new ResourcesPanelLoaderPool();
}
}
}
如果想要支援 其他方式加載界面則可以通過此方式定制。
另外，QFramework 中的 UIKit 預設使用 ResKit 的方式加載界面。
可以在 QFramework 源碼中看到如下代碼:
using System;
using UnityEngine;
namespace QFramework
{
public class UIKitWithResKitInit
{
[RuntimeInitializeOnLoadMethod(RuntimeInitializeLoadType.BeforeSceneLoad)]
public static void Init()
{
UIKit.Config.PanelLoaderPool = new ResKitPanelLoaderPool();
}
}
...
}
如果想要使用自定義的方式加載界面，需要将以上代碼注釋掉。
好了，關于 UIKit 自定義加載界面就簡單介紹到這裡。
UI Kit 小結
在這一章，UI Kit 的核心功能，我們都接觸過了，如下：
- UIPanel/UIElement 代碼生成
- UIKit 常用 API
- UIKit.OpenPanel（Async）
- UIKit.ClosePanel
- UIKit.CloseSelf
- UIKit.SetResolution
- UIKit.Stack.Push、UIPanel.Back(Pop)
- UIPanel 生命周期
- UIPanel 測試場景生成工具
隻要掌握了以上這些，基本上開發一些界面就沒啥問題了。
關于 UIKit 就介紹到這裡。
更多内容
- 轉載請注明位址：liangxiegame.com
- QFramework 首頁：qframework.cn
- QFramework Github 位址: https://github.com/liangxiegame/qframework
- QFramework Gitee 位址：https://gitee.com/liangxiegame/QFramework