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