Feathers:tab-bar

原文地址：http://wiki.starling-framework.org/feathers/tab-bar

如何使用Feathers TabBar组件

TabBar类展示的是一套可切换的处于水平或垂直布局的按钮，它同时只允许一个按钮是选中的。一个tab条标签页可以运行时的通过它的数据源同步增加或删除，而且第一个和最后的标签可随意地差异样式化。例如，可以创建一个更形似丸子的那种类似于分段式而不像一套标签集的控件。

DisplayObjectExplorer例子就演示了如何把TabBar与ScreenNavigator联系起来。

基础部分

让我们从创建一个tab条开始，设置其数据源来显示少量的标签页，同时把它添加到显示列表中：

var tabs:TabBar = new TabBar();
tabs.dataProvider = new ListCollection(
[
    { label: "One" },
    { label: "Two" },
    { label: "Three" },
]);
this.addChild( tabs );

在每个数据源项的label域可以在其相关的tab中设定label属性。除label外你还可以设置可用的icon到Button类中，defaultIcon, upIcon, 或者 downIcon。

监听Event.CHANGE事件来判断该属性发生了变化:

tabs.addEventListener( Event.CHANGE, tabs_changeHandler );

监听器可能像这样:

function tabs_changeHandler( event:Event ):void
{
    var tabs:TabBar = TabBar( event.currentTarget );
    trace( "selectedIndex:", tabs.selectedIndex );
}

selectedIndex属性表示当前所选的基于0开始的tab索引。

对Tab Bar着肤

除了一对layout属性，大部分着肤是发生在tabs上。

对于layout，你可以设置direction属性为DIRECTION_HORIZONTAL或者DIRECTION_VERTICAL。gap属性是设定tabs间的间隔，以像素为单位。

对Tabs着肤

一个tab条的标签集简单来说也是按钮控件，你可以像其他按钮一个着肤。如果你正要创建一个主题，你可用名为TabBar.DEFAULT_CHILD_NAME_TAB定位到Button的initializer来创建。

setInitializerForClass( Button, tabInitializer, TabBar.DEFAULT_CHILD_NAME_TAB );

也可以这样，你可以通过customTabName来指定tabs在一个特定的不同名而非默认的tab条。这要求你给定不同的tab条以不同的皮肤。

除了theme，你还可以指定tabFactory来创建tab和传皮肤给它。

tabs.tabFactory = function():Button
{
    var tab:Button = new Button();
    tab.defaultSkin = new Scale9Image( upTextures );
    tab.defaultSelectedSkin = new Scale9Image( selectedTextures );
    tab.downSkin = new Scale9Image( downTextures );
    tab.defaultLabelProperties.textFormat = format;
    return tab;
}

上述代码就是给tabs设定tabFactory来创建tab和传自定义皮肤给它。

第一和最后一个Tab

你可以定制第一和最后一个Tab来使得他们与中间的tabs有所不同。类似于customTabName，TabBar类也可以定义customFirstTabName和customLastTabName。同样地，除了tabFactory，你也可以指定一个firstTabFactory和lastTabFactory。

在所有例子中，如果第一和最后一个tabs没有特定的属性被指定，那么第一和最后一个tabs将与其他tabs一样以同样的方式样式化。

相关链接

• TabBar API Documentation
• TabBarScreen source code, a simple example in the Components Explorer

For more tutorials, return to the Feathers Documentation.

---

翻译者：郭必江