FairyGUI 超簡單的UI框架

Laya使用fgui的超簡單UI框架

使用場景：用于使用fgui進(jìn)行l(wèi)ayaUI開發(fā)的程序人員

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

• FGUIManager ：FGUI的管理類,繼承于IUIManager 負(fù)責(zé)所有UI的打開關(guān)閉等事項
• FUIBase ：UI的管理基類，具體實現(xiàn)
• IUIManager ：FGUI的接口類 規(guī)定管理類的各個方法
• UILayerType： UI 層級分類

FGUIManager管理類 import IUIManager from "./IUIManager";import { FUIBase } from "./FUIBase";import GameEntry from "../../GameEntry";/*** @ name:FGUIManager* @ desc:自動創(chuàng)建說明* @ 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"; //設(shè)置導(dǎo)出文件的拓展名 代碼默認(rèn)的拓展名為fui，可能于自身導(dǎo)出的拓展名不同 但最好這樣做因為有些平臺只認(rèn)這種文件名this.UIDic = {};}/*** UI字典*/UIDic: { [name: string]: FUIBase<fgui.GComponent>};/*** UI的根節(jié)點(diǎn)*/private UIroot: Laya.Sprite;/*** 注入FUIBase */RigisterUIBase(name: string, ui: FUIBase<fgui.GComponent>): void {if (this.UIDic[name]) {console.log(name + "::字段已存在UI界面，請勿重復(fù)添加")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('資源包未加載,將進(jìn)行自動加載');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:自動創(chuàng)建說明* @ user:By NUOLO* @ data: 2021-06-02 16:24*/export class FUIBase<T extends fgui.GComponent> {/**需子類設(shè)置 導(dǎo)出包的路徑 */public static ResName: string = "res/UIVSLoading";/**需子類設(shè)置 圖集的數(shù)量 從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的層級 默認(rèn)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; }/*** 自動注冊進(jìn)UIManager*/public AutoRigisterToUIManager() {this.UIMgr.RigisterUIBase(this.UIName, this);}/*** 打開界面*/public Open() {this.onEnable();this.m_uiComPonent.visible = true;}/*** 關(guān)閉界面*/public Close() {this.onDisable();this.m_uiComPonent.visible = false;}/*** 銷毀界面*/public Destory() {this.m_uiComPonent.dispose();}//#region fgui加載/*** 獲取當(dāng)前界面所對應(yīng)的資源文件* @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 二進(jìn)制文件路徑* @returns 對應(yīng)路徑*/public static GetUIByte(): string {return this.ResName + ".fui";}/*** 加載完成之后 將包添加到fgui包管理中*/public static AddPackage() {fgui.UIPackage.addPackage(this.ResName);}//#endregion//#region 功能/*** 獲得子節(jié)點(diǎn)* @param path 路徑信息 s.b.v*/public FindChild<T extends fgui.GObject>(path: String): T {return this.m_uiComPonent.getChildByPath(path) as T;}/*** 添加事件監(jiān)聽* @param btn 點(diǎn)擊按鈕* @param callback 回調(diào)* @param args 傳遞數(shù)據(jù)*/public AddLinster(btn: fgui.GObject, callback, ...args) {btn.onClick(this, callback, args);}/*** 移除事件監(jiān)聽* @param btn 按鈕* @param callback 回調(diào)*/public RemoveLinster(btn: fgui.GObject, callback) {btn.offClick(btn, callback);}//#endregion//#region 生命流程onAwake() {} //onAwake 創(chuàng)建時調(diào)用onEnable() {} //每次打開時調(diào)用，可自行拓展打開時的打開效果等功能onDisable() {} //每次關(guān)閉時調(diào)用，可自行拓展關(guān)閉時的 所需調(diào)用的功能//#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;/*** 自動創(chuàng)建 或者打開 界面 注意：創(chuàng)建UI是異步操作的* @param name 名字* @param isCloseOther 是否關(guān)閉其他界面* @param data 數(shù)據(jù)*/CreateOrOpenPanel(name: string, data?:any, isCloseOther?: boolean ): FUIBase<any>/*** 打開UI界面* @param name 要打開界面的名字* @param isCloseOther 是否關(guān)閉其他界面 默認(rèn)否*/OpenPanel(name: string, isCloseOther?: boolean): FUIBase<any>;/*** 關(guān)閉UI界面 * @param name 要關(guān)閉UI界面的名字* @param TOOpen 關(guān)閉此界面后要打開的界面的名字 默認(rèn)無 不打開其他界面*/ClosePanel(name: string,toOpenWindow?:string): void;/*** 關(guān)閉所有UI界面*/CloseAllPanel(): void;/*** 根據(jù)標(biāo)識符獲取FUIBase* @param name 標(biāo)識符*/GetUIPanel(name: string):any;/*** 銷毀UIPanel* @param name 標(biāo)識符*/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導(dǎo)出的UI類>
并重寫 參數(shù)

如例子：

fgui 導(dǎo)出文件為 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; //圖集數(shù)量 從0開始public static UIName: string = "1"; //名稱constructor() {super();this.LayerType = UILayerType.Normal; //設(shè)置層級this.ClassType = UI_Component1; //設(shè)置UI所對應(yīng)的類，，確定好再填Package1Binder.bindAll(); //UI綁定類}onAwake() {super.onAwake();}onEnable() {super.onEnable();}onDisable() {super.onDisable();}} 示例 調(diào)用方法 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);}));}

整個調(diào)用過程都很簡單，代碼邏輯也很明了，自己正在使用中
如果有更好的方法和更優(yōu)雅的寫法，也請通過郵件聯(lián)系我，共同學(xué)習(xí)一下，多謝！

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

總結(jié)

以上是生活随笔為你收集整理的laya fgui 超简单的UI框架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。