tab与viewStack

​ Tab 组件用于定义选项卡按钮组，例如多页面切换显示。

ViewStack组件主要用于多页面视图切换。它包含多个子页面，但默认只显示一个，可以通过子页面索引进行显示切换。一般情况我们用它与Tab标签组合制作标签切换页面，表现上类似于页签，不同页面都会显示，但是对应不同的页面，显示不同的状态，有点类似页签。

点击tab切换页面内容显示，同时viewStack会切换显示，例如显示不同的页签图片。

以官方示例对表现进行说明

这张图中，雪人、糖罐、绿树为viewStack，下方的雪人大图为页面内容，点击上方viewStack，viewStack的文字颜色、背景图片会根据是否选中进行切换，同时下方内容区域会根据选中的页签进行内容替换。

-----------------下面说下编辑器的UI操作-----------------

1、在编辑器中拖拽一个tab组件到页面；

2、拖拽UI组件，给tab添加子元素（可以是BOX，也可以是其他，博主用的是BOX）；

3、给BOX添加组件内容，博主添加的button和viewStack

4、给viewStack添加不同状态，博主添加的两张文字图片，分别对应选中和未选中时的图片显示；

5、复制tab组件需要的个数

tab的子元素box可以随意命名，但是为了统一，最好命名为前缀+index的形式，box的子元素就不要再用变量名了，而是设置name，通过name获取box相应的子元素，viewStack可以随意命名name，但是tab三个box中viewStack的name要相同，这样方便直接通过index获取想要的对象，需要注意的是，viewStack的子元素必须命名为item+index形式的name，这个是layabox引擎决定的。通过设置viewStack的selectedIndex,显示不同状态的图片。通过设置button的选中状态，调用button同一张skin图片资源不同的stateNum下的显示。

-----------------代码实现-----------------

主界面主要代码
//定义全局变量
//当前显示的选项卡页面
private var curShowVIew:Itab;
//3种不同的选项卡页面
private var ui1:ClassUi1;
private var ui2:ClassUi2;
private var ui3:ClassUi3;
private var views:Vector.<Itab> = new Vector.<Itab>();
private var tabItem:Vector.<Box> = new Vector.<Box>();
privar var viewClassArr:Array = [ui1,ui2,ui3];
//对应viewStack中三个不同的item
tabItems.push(item0,item1,item2);
//添加监听
for(var i:int = 0;i<tabItem){
    var item:Box = tabItems.[I];
    item.on(Event.CLICK,this,onSelectTab,[i]);
}
tab.selectHandler = Handler.create(this,onSelectTab,null,false);
//封装方法
//点击viewStack切换页面
private function onSelectTab(selectIndex:int):void{
    //设置按钮是否被选中
    for(var i:int = 0;i<tabItems,length;i++){
        var box:Box = tabItems[I];
        setTabBtnSelected(box,selectIndex == i);
    }
    //切换页面，调用相应页面的失活接口
    if(curSHowView){
        (curShowView as View).visible = false;
        curShowView.deactivate();
    }
    //添加相应页面到主UI上
    if(!views[selectIndex]){
        views[selectIndex] = new ViewClassArr[selectIndex]();
        addClassRes(ViewClassArr[selectIndex]);
    }
    ViewBox.addChild(views[selectIndex] as View);
    CurShowView = Views[selectIndex];
    //设置可见，并调用相应页面的激活接口
    if(curShowVIew){
        (curShowView as View).visible = true;
        curShowVIew.activate();
    }
}

//点击viewStack设置button是否选中以及viewStack中的不同状态
private function setTabBtnSelected(item:Box, selected:Boolean):void{
    var btn:Button = item.getChildByName("btn") as Button;
    var labelStack:ViewStack = item.getChildByName("labelStack") as ViewStack;
    btn.selected = selected;
    //给viewStack设置不同的selectedIndex即可控制显示不同的状态
    labelStack.selectedIndex = selected?1:0;
}

除了主界面代码，还需要在各个页面也有相应代码实现，主要注意四点
1、类要implements Itab；
2、实现激活接口，activate，并且为public 方法；
3、实现失活接口，deactive，并且为public方法；
4、因为这些分页面都是主页面下，实现的选项卡，其实整个界面属于同一个界面，故不要再次调用loadDisplay()图集或者其他打开新UI时调用的方法、设置等。

 

至此，layabox tab组件与viewStack联用实现选项卡多页面切换，主体框架搭建完成，剩下的就是实现各个页面各自的逻辑，没什么特殊的。

----------------------------------------------分割线，20191105补充----------------------------------------------

Itab为自定义接口， addClassRes为资源管理相关，loadDisplay()也是资源管理相关逻辑，视具体项目框架实现资源管理逻辑，只实现纯页签逻辑，可以不管这里的资源管理逻辑