笔记七 :EgretH5通用MVC框架的入门操作:TabBar+ViewStack搭配使用,基于框架中的基本Panel(UI部分)
前言:TabBar是游戏菜单中同样使用度非常高的界面元素,通常包括一系列按钮,和与之对应的切换的页面。
此次范例是基于“笔记一”中构建的scene,以及框架内的BasePanelView构建的,在“笔记六”中有独立构建的范例。
源代码:
示例:
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.测试运行