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);     //初始化FGUIthis.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;this.UIDic[name] = cla;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.fuiPackage1Binder.tsUI_Component1.tsPackage1Binder.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