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