笔记七 ：EgretH5通用MVC框架的入门操作：TabBar+ViewStack搭配使用,基于框架中的基本Panel（UI部分）

前言：TabBar是游戏菜单中同样使用度非常高的界面元素，通常包括一系列按钮，和与之对应的切换的页面。

此次范例是基于“笔记一”中构建的scene，以及框架内的BasePanelView构建的，在“笔记六”中有独立构建的范例。

源代码：笔记七Egret切换页面TabBar+ViewStack

示例：

 

1.由于基于BasePanelView，可以不用再构建Controller,直接借FriendController打开的FriendView中加载这个TabBar的View页面：

打开：\src\example\module\friend\FriendView.ts :

定义TabBar的对象：

tarbarDemoView:TarBarDemoView;

 public initUI(): void中添加：（生成对象并加载到FriendView中BasePanelView中的Group中）

        this.tarbarDemoView = new TarBarDemoView();
        this.contentGroup.addChild(this.tarbarDemoView);

FriendView.ts参考代码：

/**
 * Created by egret on 15-1-7.
 */
class FriendView extends BasePanelView {
    public constructor(controller: BaseController, parent: eui.Group) {
        super(controller, parent);

        this.icon = "table_tittle"; //好友的图片
    }
    tarbarDemoView:TarBarDemoView;
    public initUI(): void {
        super.initUI();
        this.tarbarDemoView = new TarBarDemoView();
        this.contentGroup.addChild(this.tarbarDemoView);
    }

    protected closeBtnClickHandler(e: egret.TouchEvent): void {
        App.ViewManager.playcloseView(2, this);
        GameDispatcher.getInstance().dispatchEvent(new egret.Event(EventName.MAINBAR_CLOSE));
        //App.ViewManager.open(ViewConst.Home);//rongqingmei
    }
}

 

2.创建 \src\example\module\demo\tarbar\TarBarDemoView.ts  ：（TarBar的View文件）

/**
 * Created by egret on 15-1-7.
 */
class TarBarDemoView extends eui.Component {
    public constructor() {
        super();
        this.addEventListener(eui.UIEvent.COMPLETE, this.initUI, this)
        this.once(egret.Event.REMOVED_FROM_STAGE, this.dispose, this);
        this.skinName = "resource/skins/demo/TarBarDemoSkin.exml";
    }

    viewStack:eui.ViewStack;
    arrCollection:eui.ArrayCollection;
    tarbar:eui.TabBar;
    public initUI(): void {
        this.removeEventListener(eui.UIEvent.COMPLETE, this.initUI, this)
        //创建 3 个 group ,每个 group 里面有 1 个按钮
        //这里的每一个group都代表一个页面，如果想把页面添加到这个goup里面，直接添加addChild()就可以
        for (var i: number = 0; i < 3; i ++) {
            var group: eui.Group = new eui.Group();
            group.name = "Group" + i;
            var btn: eui.Button = new eui.Button();
            btn.label = "页面" + i;
            btn.scaleX = 3.0;
            btn.scaleY = 3.0;
            btn.x = i*60;
            group.addChild(btn);
            this.viewStack.addChild(group);
        }

        //特殊用法：将 tabBat 的数据源设置为 viewStack ，这样的话，viewStack有几个goup，tabbar就会显示几个按钮
        this.tarbar.dataProvider = this.viewStack;
    }

    public dispose():void{
        console.log("执行了dispose");
    }

}

3.创建\resource\skins\demo\TarBarDemoSkin.exml（TarBar的exml界面文件）

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="TarBarDemoSkin" width="400"  xmlns:e="http://ns.egret.com/eui"
        xmlns:w="http://ns.egret.com/wing">
	<e:Group width="400" height="300" horizontalCenter="0" verticalCenter="87">
		<e:Rect fillColor="0x097993" width="400" height="300" horizontalCenter="0" verticalCenter="0" x="0" y="0" scaleX="1" scaleY="1"/>
		<e:TabBar id="tarbar" width="362" height="63" anchorOffsetX="0" anchorOffsetY="0" itemRendererSkinName="TabBarButtonSkin" horizontalCenter="0" x="19" scaleX="1" scaleY="1" bottom="-16">
			<e:layout>
			<e:HorizontalLayout/>
			</e:layout>
		</e:TabBar>
		<e:ViewStack id="viewStack" width="398" height="248" anchorOffsetX="0" anchorOffsetY="0" scaleX="1" scaleY="1" verticalCenter="-26" horizontalCenter="0"/>
	</e:Group>
</e:Skin>

4.其中可以参考的代码 \resource\skins\TabBarButtonSkin.exml

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="TabBarButtonSkin"
        states="up,down,disabled,upAndSelected,downAndSelected,disabledAndSelected" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
	<e:Image includeIn="up,down,disabled" x="0" y="0" source="tabBar_down"/>
	<e:Image id="iconDisplaySelected" includeIn="up,down,disabled" x="18" y="7" source="text_fertilizer01"/>
	<e:Image includeIn="upAndSelected,downAndSelected,disabledAndSelected" x="0" y="0" source="tabBar_selected_down"/>
	<e:Image id="iconDisplay" includeIn="upAndSelected,downAndSelected,disabledAndSelected" x="18" y="10" source="text_fertilizer02"/>
</e:Skin>

5.测试运行