Feathers:callout

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

如何使用 Feathers 呼出菜单组件

Callout 类在其他所有显示对象之上渲染一个弹出菜单。通常callout呼出菜单是一个矩形，外框有一个箭头标记或者尾巴标记指向对应的源显示对象，比如一个按钮。箭头可能出现在callout的任何一个边缘。点击callout区域以外的任何地方将会自动关闭callout.

基础

创建callout的方式与Feathers其他组件有一些区别。我们调用静态函数 Callout.show()来创建一个callout，这样比直接调用构造函数好得多. 让我们看看如何实现点击一个按钮显示带有Starling Image的呼出菜单。首先，创建按钮:

var button:Button = new Button();
button.label = "Click Me";
button.addEventListener( Event.TRIGGERED, button_triggeredHandler );
this.addChild( button );

然后在 Event.TRIGGERED 事件的监听器里创建呼出菜单:

function button_triggeredHandler( event:Event ):void
{
    var button:Button = Button( event.currentTarget );
    var content:Image = new Image( myTexture );
    var callout:Callout = Callout.show( content, button );
}

有两个参数是必须的。第一个参数是callout的显示内容，它可以是任意Starling显示对象，callout会自动调整大小来适应它的显示对象内容，除非你主动设置width或者height。第二个参数是callout的源对象，当callout显示时，它会自动调整位置使他的箭头标记指向源对象。

调用 close() 函数可以关闭呼出菜单。

让我们看看Callout.show()的其他参数。

方向

下一个参数是callout的方向，指定了callout相对于源对象的位置方向. 默认值是DIRECTION_ANY] ，这意味着callout可能在源对象的 above], below], left, right 任意一个方向. callout会根据一些因素自动的选择准确的方向，从而设置理想的显示位置.如果你只想callout只显示一个方向，你可以通过指定此参数一个特定的方向.

模态

接下来的是 isModal 参数，它决定了是否有叠加层在callout和其他显示对象之间. 当callout是模态的时候, 叠加阻断了所有在callout之下的显示对象的鼠标活动. 关闭callout可以调用 Callout 实例的close() 方法或者点击callout区域以外的地方.如果callout不是模态的, callout在点击非自身区域的地方仍然会关闭(和模态一样), 但是没有叠加层阻断鼠标活动, 任何callout以下的显示对象仍然可以进行交互.

Callouts 用PopUpManager 显示. 通常模态叠加层是被PopUpManager管理的, 但是你可以通过设置静态属性calloutOverlayFactory来指定一个自定义的叠加层来给callout:

Callout.calloutOverlayFactory = function():DisplayObject
{
    return new TiledImage( myTexture );
};

当调用PopUpManager.addPopUp() 来显示callout, 该自定义的叠加层工厂方法将以一个参数的形式传进来。

自定义呼出菜单工厂

当Callout.show()创建一个callout, Callout.calloutFactory() 被调用来实例化一个 Callout 实例. Callout.show() 的最后一个参数允许你指定一个自定义的callout工厂方法，这可以让你自定义一个与众不同的callout.例如,比如说我们想创建一个callout有着特殊的皮肤，我们可以像这样创建callout工厂方法:

function customCalloutFactory():Callout
{
    var callout:Callout = new Callout();
    callout.nameList.add( "my-custom-callout" );
    return callout;
};
Callout.show( content, origin, Callout.DIRECTION_ANY, true, customCalloutFactory );

如果你已经有了一个 custom theme, 你可以设置一个名字为"my-custom-callout" 的initializer来提供不同的皮肤给callout.

给呼出菜单换个外观

Callouts 有很多皮肤和样式属性用来定制他们的外观. 让我们先来看皮肤.

callout.backgroundSkin = new Scale9Image( backgroundTextures );
callout.topArrowSkin = new Image( topArrowTexture );
callout.rightArrowSkin = new Image( rightArrowTexture );
callout.bottomArrowSkin = new Image( bottomArrowTexture );
callout.leftArrowSkin = new Image( leftArrowTexture );

背景和每个指向箭头都有单独的皮肤. 如果想在箭头皮肤遮盖背景边界的一部分时没有缝隙, 你应该设置每一个方向的箭头的gap为负数:

callout.topArrowGap = callout.rightArrowGap = callout.bottomArrowGap =
    callout.leftArrowGap = -2;

说到边框, 你可以用填充样式确保callout的边界在内容显示对象周围可见.

callout.topArrowGap = 6;
callout.rightArrowGap = 8;
callout.bottomArrowGap = 6;
callout.leftArrowGap = 8;

最后，有一些设置stage padding的静态属性，他们确定了callouts离舞台边缘有多少像素.

Callout.stagePaddingTop = Callout.stagePaddingRight = Callout.stagePaddingBottom =
    Callout.stagePaddingLeft = 10;

不用主题给呼出菜单换皮肤

如果你没有使用主题, 你可以设置 Callout.calloutFactory 方法来给callout换肤.

function skinnedCalloutFactory():Callout
{
    var callout:Callout = new Callout();
    callout.backgroundSkin = new Scale9Image( myTextures );
    callout.topArrowSkin = new Image( myTopTexture );
    // etc...
    return callout;
};
Callout.calloutFactory = skinnedCalloutFactory;

比起传皮肤给调用Callout.show()返回的Callout实例来给呼出菜单换肤，你更应该直接使用工厂方法给callout指定皮肤 . 如果你在Callout.show() 调用以后才换肤, callout的显示位置可能会出错.

相关链接

• Callout API Documentation
• CalloutScreen source code in Components Explorer Example

For more tutorials, return to the Feathers Documentation.

---

翻译者：王庆