FairyGUI 超简单的UI框架

Laya使用fgui的超简单UI框架

使用场景：用于使用fgui进行layaUI开发的程序人员

整个框架分为3个模块，共有4个类:

  • FGUIManager ：FGUI的管理类,继承于IUIManager 负责所有UI的打开关闭等事项
  • FUIBase ：UI的管理基类，具体实现
  • IUIManager ：FGUI的接口类 规定管理类的各个方法
  • UILayerType： UI 层级分类

FGUIManager管理类

  1.     import IUIManager from "./IUIManager";
  2.     import { FUIBase } from "./FUIBase";
  3.     import GameEntry from "../../GameEntry";
  5.     /**
  6.     * @ name:FGUIManager
  7.     * @ desc:自动创建说明
  8.     * @ user:By NUOLO
  9.     * @ data: 2021-06-02 18:14
  10.     */
  11.     export default class FGUIManager implements IUIManager {
  12.     /**
  13.     *
  14.     */
  15.     constructor() {
  16.         this.Init();
  17.     }
  19.     Init(): void {
  20.         Laya.stage.addChild(fgui.GRoot.inst.displayObject);		//初始化FGUI
  21.         this.UIroot = fgui.GRoot.inst.displayObject;
  22.         this.UIroot.width = Laya.stage.width;
  23.         this.UIroot.height = Laya.stage.height;
  24.         fgui.UIConfig.packageFileExtension = "fui";			//设置导出文件的拓展名  代码默认的拓展名为fui，可能于自身导出的拓展名不同 但最好这样做因为有些平台只认这种文件名
  25.         this.UIDic = {};
  26.     }
  28.         /**
  29.         * UI字典
  30.         */
  31.         UIDic: { [name: string]: FUIBase<fgui.GComponent>};
  33.         /**
  34.         * UI的根节点
  35.         */
  36.         private UIroot: Laya.Sprite;
  37.         /**
  38.         * 注入FUIBase
  39.         */
  40.         RigisterUIBase(name: string, ui: FUIBase<fgui.GComponent>): void {
  41.             if (this.UIDic[name]) {
  42.                 console.log(name + "::字段已存在UI界面，请勿重复添加")
  43.                 return;
  44.             }
  45.             else {
  46.                 this.UIDic[name] = ui;
  47.             }
  48.         }
  50.         CreateOrOpenPanel(name: string, data?:new () => FUIBase<fgui.GComponent> , isCloseOther?: boolean): FUIBase<any> {
  51.         if (!this.UIroot) {
  52.                 this.Init();
  53.             }
  54.             if (this.UIDic[name]) {
  55.             return this.OpenPanel(name, isCloseOther);
  56.             }
  57.             else {
  58.                 let cla = new data();
  60.                 if (fgui.UIPackage.addPackage(data['ResName']) == null) {
  61.                     console.log('资源包未加载,将进行自动加载');
  62.                     fgui.UIPackage.addPackage(data['ResName']);
  63.                 }
  65.                 // let com = fgui.UIPackage.createObject(data['UIpackName'], data['UIName'], cla.ClassType).asCom;
  66.                 let com =  fgui.UIPackage.createObjectFromURL(cla.ClassType.URL,cla.ClassType).asCom ;
  67.                 com.name = data['UIName'];
  68.                 fgui.GRoot.inst.addChild(com);
  69.                 com.makeFullScreen();
  71.                 com.sortingOrder = cla.LayerType;
  72.                 cla.MUI = com;
  73.                 cla.UIMgr = this;
  74.                 cla.AutoRigisterToUIManager();
  75.                 cla.onAwake();
  76.                 cla.onEnable();
  77.                 return cla;
  78.             }
  79.         }
  81.         OpenPanel(name: string, isCloseOther?: boolean): FUIBase<any> {
  82.             if (isCloseOther) {
  83.                 for (let uiname in this.UIDic) {
  84.                     this.UIDic[uiname].Close();
  85.                 }
  86.             }
  87.             if (this.UIDic[name]) {
  88.                 let ui = this.UIDic[name];
  89.                 ui.Open();
  90.                 return ui;
  91.             }
  92.             else {
  94.                 console.error(name + "::字段在UI字典中不存在，请检查是否有误")
  95.                 return null;
  96.             }
  97.         }
  98.         ClosePanel(name: string, toOpenWindow?: string): void {
  99.             if (this.UIDic[name]) {
  100.                 let ui = this.UIDic[name];
  101.                 ui.Close();
  102.                 if (toOpenWindow != null) {
  103.                     this.OpenPanel(toOpenWindow);
  104.                 }
  105.             }
  106.             else {
  107.                 console.log(name + "::字段在UI字典中不存在，请检查是否有误")
  108.             }
  109.         }
  110.         CloseAllPanel(): void {
  111.             for (const key in this.UIDic) {
  112.                 this.UIDic[key].Close();
  113.             }
  114.         }
  115.         GetUIPanel(name: string): any {
  116.             if (this.UIDic[name]) {
  117.                 return this.UIDic[name] ;
  118.             }
  119.             else {
  120.                 console.log(name + "::字段在Ui字典中不存在，请检查")
  121.                 return null;
  122.             }
  123.         }
  124.         DestoryUIPanel(name: string) {
  125.             if (this.UIDic[name]) {
  126.                 this.UIDic[name].Destory();
  127.             }
  128.             else {
  129.                 console.log(name + "::字段在Ui字典中不存在，请检查")
  130.             }
  131.         }
  133.     }

FUIBase

  1.     import AssetData from "../../Asset/AssetData";
  2.     import Debug from "../../Debug/Debug";
  3.     import GameEntry from "../../GameEntry";
  4.     import IUIManager from "./IUIManager";
  5.     import { UILayerType } from "./UILayerType";
  7.     /**
  8.     * @ name:FUIBase
  9.     * @ desc:自动创建说明
  10.     * @ user:By NUOLO
  11.     * @ data: 2021-06-02 16:24
  12.     */
  13.     export class FUIBase<T extends fgui.GComponent>  {
  15.         /**需子类设置 导出包的路径 */
  16.         public static ResName: string = "res/UIVSLoading";
  17.         /**需子类设置 图集的数量 从0 开始 */
  18.         public static AtliasCount: number = 1;
  20.         public static UIName: string = "1";                     //UI的名字 要存在字典中
  21.         public get UIName(): string { return FUIBase.UIName; }
  22.         public set UIName(v: string) { FUIBase.UIName = v; }
  24.         /** UI的层级  默认0级为最底层 */
  25.         public LayerType: UILayerType = UILayerType.Normal;
  27.         /**fgui 组件 */
  28.         private m_uiComPonent: T;
  29.         public get MUI(): T { return this.m_uiComPonent; }
  30.         public set MUI(v: T) { this.m_uiComPonent = v;  }
  32.         /**fgui 组件 */
  33.         public ClassType: any;
  35.         /**UI管理类 */
  36.         private m_uimgr: IUIManager;
  37.         public get UIMgr(): IUIManager { return this.m_uimgr; }
  38.         public set UIMgr(v: IUIManager) { this.m_uimgr = v; }
  40.         /**
  41.         * 自动注册进UIManager
  42.         */
  43.         public AutoRigisterToUIManager() {
  44.             this.UIMgr.RigisterUIBase(this.UIName, this);
  45.         }
  47.         /**
  48.         * 打开界面
  49.         */
  50.         public Open() {
  51.             this.onEnable();
  52.             this.m_uiComPonent.visible = true;
  54.         }
  55.         /**
  56.     * 关闭界面
  57.     */
  58.         public Close() {
  59.             this.onDisable();
  60.             this.m_uiComPonent.visible = false;
  61.         }
  63.         /**
  64.         * 销毁界面
  65.         */
  66.         public Destory() {
  67.             this.m_uiComPonent.dispose();
  68.         }
  70.         //#region fgui加载
  72.         /**
  73.         * 获取当前界面所对应的资源文件
  74.         * @returns
  75.         */
  76.         public static GetLoadUIPackDic(): any[] {
  77.             let urls = [];
  78.             urls.push({ url: this.ResName + ".fui", type: Laya.Loader.BUFFER });
  79.             urls.push({ url: this.ResName + "_atlas0.png", type: Laya.Loader.IMAGE });
  80.             //加载纹理集
  81.             if (this.AtliasCount >=1) {
  82.                 for (let i = 1; i <= this.AtliasCount; i++) {
  83.                     urls.push({ url: this.ResName + "_atlas0_" + i + ".png", type: Laya.Loader.IMAGE });
  84.                 }
  85.             }
  86.             return urls;
  87.         }
  89.         /**
  90.         * 获取FGUI 二进制文件路径
  91.         * @returns 对应路径
  92.         */
  93.         public static GetUIByte(): string {
  94.             return this.ResName + ".fui";
  95.         }
  96.         /**
  97.         * 加载完成之后 将包添加到fgui包管理中
  98.         */
  99.         public static AddPackage() {
  100.             fgui.UIPackage.addPackage(this.ResName);
  101.         }
  102.         //#endregion
  104.         //#region  功能
  106.         /**
  107.         *  获得子节点
  108.         * @param path 路径信息  s.b.v
  109.         */
  110.         public FindChild<T extends fgui.GObject>(path: String): T {
  111.             return this.m_uiComPonent.getChildByPath(path) as T;
  112.         }
  114.         /**
  115.         * 添加事件监听
  116.         * @param btn 点击按钮
  117.         * @param callback 回调
  118.         * @param args 传递数据
  119.         */
  120.         public AddLinster(btn: fgui.GObject, callback, ...args) {
  121.             btn.onClick(this, callback, args);
  122.         }
  124.         /**
  125.         * 移除事件监听
  126.         * @param btn 按钮
  127.         * @param callback 回调
  128.         */
  129.         public RemoveLinster(btn: fgui.GObject, callback) {
  130.             btn.offClick(btn, callback);
  131.         }
  132.         //#endregion
  134.         //#region 生命流程
  136.         onAwake() {}        //onAwake 创建时调用
  137.         onEnable() {}       //每次打开时调用，可自行拓展打开时的打开效果等功能
  138.         onDisable() {}      //每次关闭时调用，可自行拓展关闭时的 所需调用的功能
  139.         //#endregion
  140.     }

IUIManager

  1.     import { FUIBase } from "./FUIBase";
  3.     /**
  4.     * @ name:IUIManager
  5.     * @ desc:UI管理类的接口
  6.     * @ user:By NUOLO
  7.     * @ data: 2021-06-02 16:14
  8.     */
  9.     export default interface IUIManager {
  11.         /**
  12.         * 初始化
  13.         */
  14.         Init():void
  16.         /**
  17.         * UI字典
  18.         */
  19.         UIDic: { [name: string]: FUIBase<any> };
  21.         /**
  22.         * 注入FUIBase
  23.         */
  24.         RigisterUIBase(name: string, ui: FUIBase<any>): void;
  26.         /**
  27.         * 自动创建 或者打开 界面 注意：创建UI是异步操作的
  28.         * @param name 名字
  29.         * @param isCloseOther 是否关闭其他界面
  30.         * @param data 数据
  31.         */
  32.         CreateOrOpenPanel(name: string, data?:any, isCloseOther?: boolean ): FUIBase<any>
  34.         /**
  35.         * 打开UI界面
  36.         * @param name 要打开界面的名字
  37.         * @param isCloseOther 是否关闭其他界面 默认否
  38.         */
  39.         OpenPanel(name: string, isCloseOther?: boolean): FUIBase<any>;
  41.         /**
  42.         * 关闭UI界面
  43.         * @param name 要关闭UI界面的名字
  44.         * @param TOOpen 关闭此界面后要打开的界面的名字  默认无  不打开其他界面
  45.         */
  46.         ClosePanel(name: string,toOpenWindow?:string): void;
  47.         /**
  48.         * 关闭所有UI界面
  49.         */
  50.         CloseAllPanel(): void;
  51.         /**
  52.         * 根据标识符获取FUIBase
  53.         * @param name 标识符
  54.         */
  55.         GetUIPanel(name: string):any;
  57.         /**
  58.         * 销毁UIPanel
  59.         * @param name 标识符
  60.         */
  61.         DestoryUIPanel(name: string);
  63.     }

UILayerType

  1.     /**
  2.     * @ name:UILayerType
  3.     * @ desc:UI 层级分类
  4.     * @ user:By NUOLO
  5.     * @ data: 2021-06-02 16:55
  6.     */
  7.     export  enum UILayerType {
  8.     //普通窗体
  9.     Normal=0,
  10.     //固定窗体
  11.     Fixed=20,
  12.     //弹出窗体
  13.     PopUp = 50,
  14.     //提示窗体
  15.     Tip = 40,
  16.     }

框架就分为这4个类 使用的话就每个UI界面都继承 FUIBase<具体fgui导出的UI类>

并重写 参数

如例子：

  1. fgui 导出文件为  Package1.fui
  2.                 Package1Binder.ts
  3.                 UI_Component1.ts
  4.                 Package1Binder.ts
  6. 新建一个ShowUI 的脚本 继承与FUIBase <UI_Component1>

示例 ShowUI类

  1.     import { FUIBase } from "../Core/UI/FGUI/FUIBase";
  2.     import { UILayerType } from "../Core/UI/FGUI/UILayerType";
  3.     import Package1Binder from "./Package1/Package1Binder";
  4.     import UI_Component1 from "./Package1/UI_Component1";
  6.     /**
  7.     * @ name:ShowUI
  8.     * @ desc:UI的控制类
  9.     * @ user:By NUOLO
  10.     * @ data: 2021-06-09 11:00
  11.     */
  12.     export default class ShowUI extends FUIBase <UI_Component1>{
  14.         public static ResName: string = "res/FGUI/Package1";    //路径
  15.         public static AtliasCount: number = 0;                  //图集数量 从0开始
  16.         public static UIName: string = "1";                     //名称
  17.         constructor() {
  18.             super();
  19.             this.LayerType = UILayerType.Normal;                //设置层级
  20.             this.ClassType = UI_Component1;                     //设置UI所对应的类，，确定好再填
  21.             Package1Binder.bindAll();                           //UI绑定类
  22.         }
  24.         onAwake() {
  25.             super.onAwake();
  26.         }
  27.         onEnable() {
  28.             super.onEnable();
  29.         }
  30.         onDisable() {
  31.             super.onDisable();
  32.         }
  33.     }

示例 调用方法

  1.     onConfigLoaded(): void {
  2.         //加载IDE指定的场景
  3.         //  GameConfig.startScene && Laya.Scene.open(GameConfig.startScene);
  4.         this.openFGUI();
  5.     }
  6.     openFGUI() {
  7.         let uimagr = new FGUIManager();			//初始化UI管理类
  9.         //打开界面
  10.         Laya.loader.create(ShowUI.GetLoadUIPackDic(), Laya.Handler.create(this, () => {
  11.             uimagr.CreateOrOpenPanel(ShowUI.UIName, ShowUI);
  12.         }));
  13.     }

整个调用过程都很简单，代码逻辑也很明了，自己正在使用中

如果有更好的方法和更优雅的写法，也请通过邮件联系我，共同学习一下，多谢！

个人博客地址 https://nuolo.xyz

laya fgui 超简单的UI框架的更多相关文章

  1. WPF - 简单的UI框架

    实现了一个简单的WPF应用程序UI框架 ,分享出来.界面效果图如下: 运行效果如下: 喜欢的可以下载源码参考:https://github.com/DuelWithSelf/WPFEffects 左侧 ...

  2. WPF - 简单的UI框架 - 仪表盘

    源码链接:https://github.com/DuelWithSelf/WPFEffects 参考:https://www.cnblogs.com/duel/p/duel_clock.html 更新 ...

  3. 【设计和开发一套简单自己主动化UI框架】

    !有兴趣的朋友请直接移步Github,本帖子已经不做更新,框架的详细的实现已经做了优化和代码整理,本文仅仅介绍了详细的设计思路! 目标:编写一个简单通用UI框架用于管理页面和完毕导航跳转 终于的实现效 ...

  4. 【转】发布一个基于NGUI编写的UI框架

    发布一个基于NGUI编写的UI框架 1.加载,显示,隐藏,关闭页面,根据标示获得相应界面实例 2.提供界面显示隐藏动画接口 3.单独界面层级,Collider,背景管理 4.根据存储的导航信息完成界面 ...

  5. ssh框架整合---- spring 4.0 + struts 2.3.16 + maven ss整合超简单实例

    一 . 需求 学了这么久的ssh,一直都是别人整合好的框架去写代码,自己实际动手时才发现框架配置真是很坑爹,一不小心就踏错,真是纸上得来终觉浅! 本文将记录整合struts + spring的过程 , ...

  6. (转载)基于Unity~UGUI的简单UI框架（附UIFramework源码）

    此博客跟随siki老师的课程笔记生成,感谢siki老师的辛勤付出! 此框架功能较简单,适用于学习,可以很好的锻炼我们的设计思想 框架源码地址: UIFramework litjson.dll下载地址: ...

  7. 关于几种UI框架简单总结

    最近两年多的时间先后做过几款终端程序,UI框架从MFC转向过WxWidgets,之后再转向Qt.三种框架精通远谈不上,用起来还是没什么问题. 简单聊聊三种框架的优缺点. 1.MFC 似乎作为一种饱受批 ...

  8. ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  9. 如何快速体验鸿蒙全新声明式UI框架ArkUI？

    HDC2021将于10月22日在东莞松山湖正式开幕,大会将设立Codelab体验专区,超多好玩.有趣的Demo等你体验.想快速入门HarmonyOS?学习HarmonyOS新特性?以下几个Codela ...

随机推荐

  1. Python中的迭代器、生成器、装饰器

    1. 迭代器  1 """ 2 iterator 3 迭代器协议: 对象必须提供一个next()方法,执行该方法要么返回迭代中的下一项,要么引起一个StopIterati ...

  2. 类的两个装饰器classmethod、staticethod和内置魔术方法

    一.两个装饰器@classmethod.@staticmethod @classmethod:把类中的绑定方法变成一个类方法,cls 就等于类名 有什么用? 1.在方法中任然可以引用类中的静态变量 2 ...

  3. 2-9-9-12分页机制（xp）

    10-10-12分页限制 10-10-12分页因为页表PEB只有四个字节所以只能访问2^32 = 4GB物理地址空间,现在的物理内存都大于4GB为了能访问到更多的物理内存2-9-9-12将PEB的大小 ...

  4. 改善c++程序的150个建议（读后总结）-------10-11

    10. 优化结构体中元素的布局 结构体变量所占空间大小并不是其所含类型所占字节数之和,其所占内存字节数涉及到字节对齐. 字节对齐 :变量在内存中储存都是以字节数为单位,每一个字节都有自己的地址,逻辑上 ...

  5. Pytorch_Part4_损失函数

    VisualPytorch beta发布了! 功能概述:通过可视化拖拽网络层方式搭建模型,可选择不同数据集.损失函数.优化器生成可运行pytorch代码 扩展功能:1. 模型搭建支持模块的嵌套:2. ...

  6. 【BUAA 软工博客作业】个人博客作业

    项目 内容 课程:2020春季软件工程课程博客作业(罗杰,任健) 博客园班级链接 作业:热身作业,阅读并撰写博客 作业要求 课程目标 学习大规模软件开发的技巧与方法,锻炼开发能力 作业目标 阅读教材, ...

  7. opencv——轮廓发现与轮廓(二值图像)分析

    引言 二值图像分析最常见的一个主要方式就是轮廓发现与轮廓分析,其中轮廓发现的目的是为轮廓分析做准备,经过轮廓分析我们可以得到轮廓各种有用的属性信息. 这里顺带提下边缘检测,和轮廓提取的区别: 边缘检测 ...

  8. 每天一个linux命令（49）：at命令 　　atrm删除作业，由作业号标识。

    atq命令 例如:从现在起三天后的下午四点运行作业at 4pm + 3 days:在July 31上午十点运行作业at 10am July 31:明天上午一点运行作业at 1am tomorrow. ...

  9. 【BIGDATA】ElasticSearch HEAD插件的GET请求的坑

    今使用HEAD插件,发现复杂查询功能下,使用GET请求有坑. 查询语句如下: GET kk/_search { "query": { "match": { &q ...

  10. MyBatis 高级查询之一对多查询（十）

    高级查询之一对多查询 查询条件:根据游戏名称,查询游戏账号信息 我们在之前创建的映射器接口 GameMapper.java 中添加接口方法,如下: /** * 根据游戏名查询游戏账号 * @param ...