LayaBox进阶之UI管理器

自己动手写框架的话，UI管理器是最基础的一部分；

打开界底层是addChild打开的；

新建一个UIManager

1export class UIManager {
2    private mainContent: Laya.Sprite;
3    private scene: GameScence;
4    private uiList:any[];
5
6    constructor() {
7        this.mainContent = new Laya.Sprite();
8
9        this.uiList = [];
10    }
11    }

　　mainContent 为默认添加到的层级，

GameScence 为UI管理器默认场景

uiList放所有加载进来的场景

第一步实现 打开界面 openWindow

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

  初始化传进来的场景类；

存进字典

添加到显示层

下面是缓存的过程 setView

1private setView(clazz: any, view:Laya.Node):void{
2        let v: Laya.Node = this.getView(clazz);
3        if(!v){
4            let uiData = {clazz: clazz, view: view};
5            this.uiList.push(uiData);
6        }
7    }

　　首先判断本地缓存有没有，有的话 不处理，没得话，创建，push到数组中

1private getView(clazz: any):Laya.Node{
2        for(let i:number =0 ; i<this.uiList.length ; i++){
3            let uiData = this.uiList[i];
4            if(uiData.clazz == clazz){
5                return uiData.view;
6            }
7        }
8    }

根据clazz名字获取本地缓存的场景类

下面是关闭场景，

1public closeWindow(clazz: any): void {
2        let v = this.getView(clazz);
3        let index: number = this.getViewIndex(clazz);
4        if(v){
5            v.removeSelf();
6            this.uiList.splice(index,1);
7        }
8    }
9
10private getViewIndex(clazz: any):number{
11        for(let i:number =0 ; i<this.uiList.length ; i++){
12            let uiData = this.uiList[i];
13            if(uiData.clazz == clazz){
14                return i;
15            }
16        }
17        return -1;
18    }

这就是最简单的打开和关闭；

还要有一个初始化UIManager的方法， 设置管理器的初始化场景

1public setGameScene(gameScene: GameScence): void {
2        this.scene = gameScene;
3        if (this.scene) {
4            this.scene.parent.addChild(this.mainContent);
5        }
6    }
7
8export let ui: UIManager = new UIManager();
9window["ui"] = ui;

有时候通过open方法，或者UiManager打开一个场景后，场景里面的元素还不能正常获取；解决办法是

修改Node Sprite的原型， 那么，所有的场景被加载时，都会执行这些方法，

1import { LogUtil } from "../util/LogUtil";
2
3/**
4* 为基类定义若干方法
5*/
6export class PatchManager{}
7(function(){
8let _proto:any;
9
10_proto = Laya.Scene.prototype;
11_proto.createView = function(view:Object){
12if (view && !this._viewCreated) {
13this._viewCreated = true;
14Laya.SceneUtils.createByData(this, view);
15}
16
17this.onInit();
18this.onShow();
19
20Laya.timer.frameLoop(1, this, ()=>{
21// console.info(this);
22this.onUpdate();
23});
24}
25
26/********************************************************************************
27* Node
28********************************************************************************/
29_proto = Laya.Node.prototype;
30
31_proto.onInit = function(){
32}
33
34_proto.onShow = function(){
35}
36
37_proto.onUpdate = function(){
38}
39
40_proto.onDisable=function(){
41this.onHide();
42    }
43
44_proto.onHide = function(){
45}
46})();

在场景中 直接写  onShow () {}   界面被加载完成后， 会自动调用这个方法、。

搞定。