FairyGUI 超簡單的UI框架

Laya使用fgui的超簡單UI框架

使用場景：用於使用fgui進行layaUI開發的程式人員

整個框架分為3個模組，共有4個類:

• FGUIManager ：FGUI的管理類,繼承於IUIManager 負責所有UI的開啟關閉等事項
• FUIBase ：UI的管理基類，具體實現
• IUIManager ：FGUI的介面類 規定管理類的各個方法
• UILayerType： UI 層級分類

FGUIManager管理類

    import IUIManager from "./IUIManager";
    import { FUIBase } from "./FUIBase";
    import GameEntry from "../../GameEntry";

    /**
    * @ name:FGUIManager
    * @ desc:自動建立說明
    * @ user:By NUOLO
    * @ data: 2021-06-02 18:14
    */
    export default class FGUIManager implements IUIManager {
    /**
    *
    */
    constructor() {
        this.Init();
    }

    Init(): void {
        Laya.stage.addChild(fgui.GRoot.inst.displayObject);		//初始化FGUI
        this.UIroot = fgui.GRoot.inst.displayObject;
        this.UIroot.width = Laya.stage.width;
        this.UIroot.height = Laya.stage.height;
        fgui.UIConfig.packageFileExtension = "fui";			//設定匯出檔案的拓展名  程式碼預設的拓展名為fui，可能於自身匯出的拓展名不同 但最好這樣做因為有些平臺只認這種檔名
        this.UIDic = {};
    }

        /**
        * UI字典
        */
        UIDic: { [name: string]: FUIBase<fgui.GComponent>};
        
        /**
        * UI的根節點
        */
        private UIroot: Laya.Sprite;
        /**
        * 注入FUIBase 
        */
        RigisterUIBase(name: string, ui: FUIBase<fgui.GComponent>): void {
            if (this.UIDic[name]) {
                console.log(name + "::欄位已存在UI介面，請勿重複新增")
                return;
            }
            else {
                this.UIDic[name] = ui;
            }
        }

        CreateOrOpenPanel(name: string, data?:new () => FUIBase<fgui.GComponent> , isCloseOther?: boolean): FUIBase<any> {
        if (!this.UIroot) {
                this.Init();
            }
            if (this.UIDic[name]) {
            return this.OpenPanel(name, isCloseOther);
            }
            else {
                let cla = new data();

                if (fgui.UIPackage.addPackage(data['ResName']) == null) {
                    console.log('資源包未載入,將進行自動載入');
                    fgui.UIPackage.addPackage(data['ResName']);
                }

                // let com = fgui.UIPackage.createObject(data['UIpackName'], data['UIName'], cla.ClassType).asCom;
                let com =  fgui.UIPackage.createObjectFromURL(cla.ClassType.URL,cla.ClassType).asCom ;
                com.name = data['UIName'];
                fgui.GRoot.inst.addChild(com);
                com.makeFullScreen();

                com.sortingOrder = cla.LayerType;
                cla.MUI = com;
                cla.UIMgr = this;
                cla.AutoRigisterToUIManager();
                cla.onAwake();
                cla.onEnable();
                return cla;
            }
        }

        OpenPanel(name: string, isCloseOther?: boolean): FUIBase<any> {
            if (isCloseOther) {
                for (let uiname in this.UIDic) {
                    this.UIDic[uiname].Close();
                }
            }
            if (this.UIDic[name]) {
                let ui = this.UIDic[name];
                ui.Open();
                return ui;
            }
            else {
        
                console.error(name + "::欄位在UI字典中不存在，請檢查是否有誤")
                return null;
            }
        }
        ClosePanel(name: string, toOpenWindow?: string): void {
            if (this.UIDic[name]) {
                let ui = this.UIDic[name];
                ui.Close();
                if (toOpenWindow != null) {
                    this.OpenPanel(toOpenWindow);
                }
            }
            else {
                console.log(name + "::欄位在UI字典中不存在，請檢查是否有誤")
            }
        }
        CloseAllPanel(): void {
            for (const key in this.UIDic) {
                this.UIDic[key].Close();
            }
        }
        GetUIPanel(name: string): any {
            if (this.UIDic[name]) {
                return this.UIDic[name] ;
            }
            else {
                console.log(name + "::欄位在Ui字典中不存在，請檢查")
                return null;
            }
        }
        DestoryUIPanel(name: string) {
            if (this.UIDic[name]) {
                this.UIDic[name].Destory();
            }
            else {
                console.log(name + "::欄位在Ui字典中不存在，請檢查")
            }
        }

        
    }
 

FUIBase

    import AssetData from "../../Asset/AssetData";
    import Debug from "../../Debug/Debug";
    import GameEntry from "../../GameEntry";
    import IUIManager from "./IUIManager";
    import { UILayerType } from "./UILayerType";

    /**
    * @ name:FUIBase
    * @ desc:自動建立說明
    * @ user:By NUOLO
    * @ data: 2021-06-02 16:24
    */
    export class FUIBase<T extends fgui.GComponent>  {

        /**需子類設定 匯出包的路徑 */
        public static ResName: string = "res/UIVSLoading";
        /**需子類設定 圖集的數量 從0 開始 */
        public static AtliasCount: number = 1;

        public static UIName: string = "1";                     //UI的名字 要存在字典中
        public get UIName(): string { return FUIBase.UIName; }
        public set UIName(v: string) { FUIBase.UIName = v; }

        /** UI的層級  預設0級為最底層 */
        public LayerType: UILayerType = UILayerType.Normal;

        /**fgui 元件 */
        private m_uiComPonent: T;
        public get MUI(): T { return this.m_uiComPonent; }
        public set MUI(v: T) { this.m_uiComPonent = v;  }

        /**fgui 元件 */
        public ClassType: any;
 
        /**UI管理類 */
        private m_uimgr: IUIManager;
        public get UIMgr(): IUIManager { return this.m_uimgr; }
        public set UIMgr(v: IUIManager) { this.m_uimgr = v; }

        /**
        * 自動註冊進UIManager
        */
        public AutoRigisterToUIManager() {
            this.UIMgr.RigisterUIBase(this.UIName, this);
        }


        /**
        * 開啟介面
        */
        public Open() {
            this.onEnable();
            this.m_uiComPonent.visible = true;

        }
        /**
    * 關閉介面
    */
        public Close() {
            this.onDisable();
            this.m_uiComPonent.visible = false;
        }

        /**
        * 銷燬介面
        */
        public Destory() {
            this.m_uiComPonent.dispose();
        }

        //#region fgui載入

        /**
        * 獲取當前介面所對應的資原始檔
        * @returns 
        */
        public static GetLoadUIPackDic(): any[] {
            let urls = [];
            urls.push({ url: this.ResName + ".fui", type: Laya.Loader.BUFFER });
            urls.push({ url: this.ResName + "_atlas0.png", type: Laya.Loader.IMAGE });
            //載入紋理集
            if (this.AtliasCount >=1) {
                for (let i = 1; i <= this.AtliasCount; i++) {
                    urls.push({ url: this.ResName + "_atlas0_" + i + ".png", type: Laya.Loader.IMAGE });
                }
            }
            return urls;
        }

        /**
        * 獲取FGUI 二進位制檔案路徑
        * @returns 對應路徑
        */
        public static GetUIByte(): string {
            return this.ResName + ".fui";
        }
        /**
        * 載入完成之後 將包新增到fgui包管理中
        */
        public static AddPackage() {
            fgui.UIPackage.addPackage(this.ResName);
        }
        //#endregion


        //#region  功能

        /**
        *  獲得子節點
        * @param path 路徑資訊  s.b.v
        */
        public FindChild<T extends fgui.GObject>(path: String): T {
            return this.m_uiComPonent.getChildByPath(path) as T;
        }

        /**
        * 新增事件監聽
        * @param btn 點選按鈕
        * @param callback 回撥
        * @param args 傳遞資料
        */
        public AddLinster(btn: fgui.GObject, callback, ...args) {
            btn.onClick(this, callback, args);
        }

        /**
        * 移除事件監聽
        * @param btn 按鈕
        * @param callback 回撥
        */
        public RemoveLinster(btn: fgui.GObject, callback) {
            btn.offClick(btn, callback);
        }
        //#endregion


        //#region 生命流程

        onAwake() {}        //onAwake 建立時呼叫
        onEnable() {}       //每次開啟時呼叫，可自行拓展開啟時的開啟效果等功能
        onDisable() {}      //每次關閉時呼叫，可自行拓展關閉時的 所需呼叫的功能
        //#endregion
    }
 

IUIManager

    import { FUIBase } from "./FUIBase";

    /**
    * @ name:IUIManager
    * @ desc:UI管理類的介面
    * @ user:By NUOLO
    * @ data: 2021-06-02 16:14
    */
    export default interface IUIManager {
        
        /**
        * 初始化
        */
        Init():void

        /**
        * UI字典
        */
        UIDic: { [name: string]: FUIBase<any> };

        /**
        * 注入FUIBase 
        */
        RigisterUIBase(name: string, ui: FUIBase<any>): void;
        
        /**
        * 自動建立 或者開啟 介面 注意：建立UI是非同步操作的
        * @param name 名字
        * @param isCloseOther 是否關閉其他介面
        * @param data 資料
        */
        CreateOrOpenPanel(name: string, data?:any, isCloseOther?: boolean ): FUIBase<any>

        /**
        * 開啟UI介面
        * @param name 要開啟介面的名字
        * @param isCloseOther 是否關閉其他介面 預設否
        */
        OpenPanel(name: string, isCloseOther?: boolean): FUIBase<any>;

        /**
        * 關閉UI介面 
        * @param name 要關閉UI介面的名字
        * @param TOOpen 關閉此介面後要開啟的介面的名字  預設無  不開啟其他介面
        */
        ClosePanel(name: string,toOpenWindow?:string): void;
        /**
        * 關閉所有UI介面
        */
        CloseAllPanel(): void;
        /**
        * 根據識別符號獲取FUIBase
        * @param name 識別符號
        */
        GetUIPanel(name: string):any;

        /**
        * 銷燬UIPanel
        * @param name 識別符號
        */
        DestoryUIPanel(name: string);

    }
 

UILayerType

    /**
    * @ name:UILayerType
    * @ desc:UI 層級分類
    * @ user:By NUOLO
    * @ data: 2021-06-02 16:55
    */
    export  enum UILayerType {
    //普通窗體
    Normal=0,
    //固定窗體
    Fixed=20,
    //彈出窗體
    PopUp = 50,
    //提示窗體
    Tip = 40,
    }

框架就分為這4個類 使用的話就每個UI介面都繼承 FUIBase<具體fgui匯出的UI類>
並重寫 引數

如例子：

fgui 匯出檔案為  Package1.fui
                Package1Binder.ts
                UI_Component1.ts
                Package1Binder.ts

新建一個ShowUI 的指令碼 繼承與FUIBase <UI_Component1>

示例 ShowUI類

    import { FUIBase } from "../Core/UI/FGUI/FUIBase";
    import { UILayerType } from "../Core/UI/FGUI/UILayerType";
    import Package1Binder from "./Package1/Package1Binder";
    import UI_Component1 from "./Package1/UI_Component1";


    /**
    * @ name:ShowUI
    * @ desc:UI的控制類 
    * @ user:By NUOLO
    * @ data: 2021-06-09 11:00
    */
    export default class ShowUI extends FUIBase <UI_Component1>{


        public static ResName: string = "res/FGUI/Package1";    //路徑
        public static AtliasCount: number = 0;                  //圖集數量 從0開始
        public static UIName: string = "1";                     //名稱
        constructor() {
            super();
            this.LayerType = UILayerType.Normal;                //設定層級
            this.ClassType = UI_Component1;                     //設定UI所對應的類，，確定好再填
            Package1Binder.bindAll();                           //UI繫結類
        }

        
        onAwake() {
            super.onAwake();
        }
        onEnable() {
            super.onEnable();
        }
        onDisable() {
            super.onDisable();
        }
    }

示例 呼叫方法

    onConfigLoaded(): void {
        //載入IDE指定的場景
        //  GameConfig.startScene && Laya.Scene.open(GameConfig.startScene);
        this.openFGUI();
    }
    openFGUI() {
        let uimagr = new FGUIManager();			//初始化UI管理類

        //開啟介面
        Laya.loader.create(ShowUI.GetLoadUIPackDic(), Laya.Handler.create(this, () => {
            uimagr.CreateOrOpenPanel(ShowUI.UIName, ShowUI);
        }));
    }

整個呼叫過程都很簡單，程式碼邏輯也很明瞭，自己正在使用中
如果有更好的方法和更優雅的寫法，也請通過郵件聯絡我，共同學習一下，多謝！

個人部落格地址 https://nuolo.xyz