LayaBox進階之UI管理器

自己動手寫框架的話，UI管理器是最基礎的一部分；

打開界底層是addChild打開的；

 

 

新建一個UIManager

export class UIManager {
    private mainContent: Laya.Sprite;
    private scene: GameScence;
    private uiList:any[];

    constructor() {
        this.mainContent = new Laya.Sprite();

        this.uiList = [];
    }
    }

　　mainContent 為默認添加到的層級，

GameScence 為UI管理器默認場景

uiList放所有加載進來的場景

第一步實現 打開界面 openWindow

 

    public openWindow(clazz: any, param?: { data?: any }) {
        let view = new clazz()
        this.setView(clazz, view);
        this.mainContent.addChild(view);
    }

　　

  初始化傳進來的場景類；

存進字典

添加到顯示層

 

下面是緩存的過程 setView

    private setView(clazz: any, view:Laya.Node):void{
        let v: Laya.Node = this.getView(clazz);
        if(!v){
            let uiData = {clazz: clazz, view: view};
            this.uiList.push(uiData);
        }
    }

　　首先判斷本地緩存有沒有，有的話 不處理，沒得話，創建，push到數組中

    private getView(clazz: any):Laya.Node{
        for(let i:number =0 ; i<this.uiList.length ; i++){
            let uiData = this.uiList[i];
            if(uiData.clazz == clazz){
                return uiData.view;
            }
        }
    }

　　

根據clazz名字獲取本地緩存的場景類

 

 

下面是關閉場景，

    public closeWindow(clazz: any): void {
        let v = this.getView(clazz);
        let index: number = this.getViewIndex(clazz);
        if(v){
            v.removeSelf();
            this.uiList.splice(index,1);
        }
    }

　　

    private getViewIndex(clazz: any):number{
        for(let i:number =0 ; i<this.uiList.length ; i++){
            let uiData = this.uiList[i];
            if(uiData.clazz == clazz){
                return i;
            }
        }
        return -1;
    }

　　

這就是最簡單的打開和關閉；

 

還要有一個初始化UIManager的方法， 設置管理器的初始化場景

    public setGameScene(gameScene: GameScence): void {
        this.scene = gameScene;
        if (this.scene) {
            this.scene.parent.addChild(this.mainContent);
        }
    }

　　

export let ui: UIManager = new UIManager();
window["ui"] = ui;

　　

有時候通過open方法，或者UiManager打開一個場景后，場景里面的元素還不能正常獲取；解決辦法是

修改Node Sprite的原型， 那么，所有的場景被加載時，都會執行這些方法，

 

import { LogUtil } from "../util/LogUtil";

/**
* 為基類定義若干方法
*/
export class PatchManager{}
(function(){
let _proto:any;

_proto = Laya.Scene.prototype;
_proto.createView = function(view:Object){
if (view && !this._viewCreated) {
this._viewCreated = true;
Laya.SceneUtils.createByData(this, view);
}

this.onInit();
this.onShow();

Laya.timer.frameLoop(1, this, ()=>{
// console.info(this);
this.onUpdate();
});
}

/********************************************************************************
* Node
********************************************************************************/
_proto = Laya.Node.prototype;

_proto.onInit = function(){
}

_proto.onShow = function(){
}

_proto.onUpdate = function(){
}

_proto.onDisable=function(){
this.onHide();
    }

_proto.onHide = function(){
}
})();

　　

在場景中 直接寫  onShow () {}   界面被加載完成后， 會自動調用這個方法、。

搞定。