Feathers:page-indicator

原文地址：http://wiki.starling-framework.org/feathers/page-indicator

如何使用Feathers的页面指示器组件

PageIndicator 组件显示一系列的符号，其中有一个突出显示，用来告诉用户当前选择的页面索引。通常，它与支持分页的List或类似组件一起使用。用户通过点击PageIndicator选中符号的任意一侧来向前或向后导航。

基础

首先，让我们创造一个页面指示器并且给它一些符号。

var pages:PageIndicator = new PageIndicator();
pages.pageCount = 5;
this.addChild( pages );

pageCount 属性. 你将看到第一个符号是自动选择的，如果你点击右侧的页面，它将前进到下一个索引。

如果你想对当前选择索引的变化有所响应的话，我们添加一个Event.CHANGE事件监听器:

pages.addEventListener( Event.CHANGE, pageIndicator_changeHandler );

监听器看起来可能像这样:

function pageIndicator_changeHandler( event:Event ):void
{
    var pages:PageIndicator = PageIndicator( event.currentTarget );
    trace( "selected index:", pages.selectedIndex );
}

为页面指示器设置皮肤

你可以自定义页面指示器的布局, 也可以自定义"normal" 和 "selected"符号的外观.

页面指示器布局

你可以设置页面指示器的direction 方向为DIRECTION_HORIZONTAL 或者 DIRECTION_VERTICAL. 默认的排列方向是水平的. 下面，我们把它改成垂直方向的:

pages.direction = PageIndicator.DIRECTION_VERTICAL;

我们可以设置其它的布局属性, 比如 gap between symbols, 边缘周围的边距, 和对齐方式, horizontally 和 vertically:

pages.gap = 4;
pages.paddingTop = 4;
pages.paddingRight = 4;
pages.paddingBottom = 4;
pages.paddingLeft = 10;
pages.horizontalAlign = PageIndicator.HORIZONTAL_ALIGN_CENTER;
pages.verticalAlign = PageIndicator.VERTICAL_ALIGN_MIDDLE;

设置符号的皮肤

使用normalSymbolFactory 和 selectedSymbolFactory 分别创建普通符号和当前选中符号，这些函数都将返回任意Starling显示对象。下面，我们分别为普通和选中状态返回不同的Starling Images:

pages.normalSymbolFactory = function():DisplayObject
{
    return new Image( normalSymbolTexture );
};
 
pages.selectedSymbolFactory = function():DisplayObject
{
    return new Image( selectedSymbolTexture );
};

如果页面计数或当前选中改变，页面指示器将自动重用符号.

相关链接

• PageIndicator API Documentation
• PageIndicatorScreen source code, a simple example in the Explorer

For more tutorials, return to the Feathers Documentation.

---

翻译者：王庆