白鹭 Egret 实现Tabbar 类似APP底部Tabbar效果

捣鼓了几天白鹭引擎，总算是入门了。今天来实现一个类似于APP TabView的功能,先看效果图。

tabar效果图.png

首先新建一个项目：

项目.png

然后把资源引入到项目中：
放到resource下新建的Common文件夹里

5A5B5631-A87E-4176-9ABE-DADDBCE3B213.png

这时候IDE会帮我们把资源的ID对应好，在default.res.json中查看

98E13CCC-45DB-4CB2-A6C1-7B00EAA19B1E.png

要引入图片 直接写名称就行了 如：rank_sel_png

接下来新建一个exml,用来做tabbar 元素的皮肤

1FB033A8-4B79-4D5D-82C5-FD0C57D7AA30.png

如图用一个Rect 做背景，用一个Image 做元素，给Image 设置一个ID：img_res等会用来动态改变。然后给Rect 和 Image 设置约束，一定要设置 不然最终显示就乱了

接着 咱们定义一个和TabBarCell.exml 名字一样的类 TabBarCell ，代码如下：

module MGTabBar {
    export class TabBarCell extends eui.ItemRenderer {
        private img_res : eui.Image = null;
        public constructor() {
            super();
            this.skinName = "resource/eui_skins/TabBarCell.exml";
                
        }
         protected createChildren():void{
            super.createChildren();
        }
        protected dataChanged() : void{
            this.loadData();
        }
        private loadData() : void{
            let $dataModel : TabBarCell_Data = this.data;
            let $selected : boolean = $dataModel.selected;
            
            if ($selected) {
                
                this.img_res.source=$dataModel.img_sel_res;
            } else {
                
                this.img_res.source=$dataModel.img_unsel_res;
            }
        }
    }

    export interface TabBarCell_Data{
        /**是否处于选择状态*/
        selected : boolean;
        /**选择状态下的美术文本资源*/
       img_sel_res : string;
       /**未选择状态下的美术文本资源*/
       img_unsel_res : string;
       
    }
}

接下来 来到Main.ts 把方法createGameScene()里的代码干掉。写下如下代码：

private data2TabBar_arr : Array = null;
    private tabbar: eui.TabBar;
    private viewStack: eui.ViewStack;
    private lastindex = 0;
    private arrayCollection:eui.ArrayCollection;
    /**
     * 创建场景界面
     * Create scene interface
     */
    protected createGameScene(): void {
        
        let stageW = this.stage.stageWidth;
        let stageH = this.stage.stageHeight;
       
        let bk : eui.Rect= new eui.Rect;
        bk.width = stageW;
        bk.height = stageH;
        bk.fillColor = 0xF6F7F8;
        this.addChild(bk);
        this.tabbar = new eui.TabBar;
         this.data2TabBar_arr = [
                {
                    
                    selected : true,
                    img_sel_res : "home_sel_png",
                    img_unsel_res : "home_unsel_png"
                },
                {
                  
                    selected : false,
                    img_sel_res : "rank_sel_png",
                    img_unsel_res : "rank_unsel_png"
                },
                {
                    
                    selected : false,
                    img_sel_res : "box_sel_png",
                    img_unsel_res : "box_unsel_png"
                },
                {
                   
                    selected : false,
                    img_sel_res : "my_sel_png",
                    img_unsel_res : "my_unsel_png"
                },
            ];
            this.arrayCollection = new eui.ArrayCollection( this.data2TabBar_arr );
           this.tabbar.dataProvider = this.arrayCollection;
            this.tabbar.addEventListener(eui.ItemTapEvent.ITEM_TAP, this.onBarItemTap, this);
           this.tabbar.width = stageW;
           this.tabbar.height = 100;
           this.tabbar.y = stageH-100;
           this.addChild(this.tabbar);
            this.tabbar.itemRenderer = MGTabBar.TabBarCell;

            this.viewStack = new eui.ViewStack();
            this.viewStack.width = stageW;
            this.viewStack.height =  stageH-100;
        
        for (var i: number = 0; i < 4; i ++) {
            var group: eui.Group = new eui.Group();
            group.name = "Group" + i;
            var btn: eui.Button = new eui.Button();
            btn.label = "Button" + i;
            group.addChild(btn);
            this.viewStack.addChild(group);
        }
         this.addChild(this.viewStack);
    }

    
    
    private onBarItemTap(e: eui.ItemTapEvent): void {
        this.viewStack.selectedIndex = e.itemIndex;
        let lastdata:MGTabBar.TabBarCell_Data = this.arrayCollection.getItemAt(this.lastindex);
        this.lastindex = e.itemIndex;
         if (lastdata.selected) {
            lastdata.selected = false;
        } else {
            lastdata.selected = true;
        }
        let data:MGTabBar.TabBarCell_Data = this.arrayCollection.getItemAt(e.itemIndex) ;
        if (data.selected) {
            data.selected = false;
        } else {
            data.selected = true;
        }
        this.tabbar.dataProvider = new eui.ArrayCollection( this.data2TabBar_arr );
    }

OK!! 运行一下 即可看到想要的效果。因为是初学，如果大神们有更好的方法，请欢迎交流。