Feathers:button
原文地址：http://wiki.starling-framework.org/feathers/button
目录 |
如何使用 Feathers 按钮组件
Button 类显示一个有切换功能(可选)的可点击的按钮. 它可以根据不同的布局选项显示一个可选标签和一张可选图标.按钮有不同状态下的点击阶段和相对应的皮肤，并且每种状态的皮肤都可以自定义，包括选中状态的变化.
基础
首先，让我们创建一个按钮控件，并添加到显示列表:
var button:Button = new Button(); button.label = "Click Me"; this.addChild( button );
很简单吧, 但如果我们运行代码, 我们什么也不会看到，因为Feathers组件没有默认的皮肤. 你可以添加一个 theme (通常就是一行代码), 但下面我们要自己给按钮配一个皮肤.
背景皮肤
我们以给按钮设置合适的背景皮肤来开始换肤过程.
button.defaultSkin = new Image( myUpTexture ); button.downSkin = new Image( myDownTexture );
以上代码中, 我们为不同的状态添加了背景皮肤. 如果没有指定特定的皮肤，defaultSkin 将会用于任何状态下. 代码中我们提供了一个按钮按下的皮肤, 这样就优先于默认的皮肤. 然而, 其他状态像up和hover没有皮肤, 所以它们会用默认的皮肤. 按钮弹起状态的皮肤总是一个defaultSkin.
标签
接下来, 让我们确保文本正常显示了. 默认地, Feathers 使用 Starling的 bitmap font capabilities.
为了设置文本的样式, 我们传入一个 BitmapFontTextFormat，它允许我们传入一个 BitmapFont 实例或者一个用TextField.registerBitmapFont()方法注册过的BitmapFont的名字.
button.defaultLabelProperties.textFormat = new BitmapFontTextFormat( myBitmapFont );
请注意，我们使用 defaultLabelProperties 的方法和上面的 defaultSkin 差不多 . 就像皮肤一样, 按钮状态不同标签的样式也跟着不同. 如果你想所有状态都使用一样的标签样式, 那么你需要传你的值给 defaultLabelProperties. 其他状态的标签样式, 像 downLabelProperties 也存在. 请参阅Button 文档获取更多详细信息.
如果你不想使用位图字体渲染, 你想使用Flash传统的设备字体或者嵌入字体, 你可以告诉 Feathers 使用 TextFieldTextRenderer 代替. 这个渲染器可以使用经典的 flash.text.TextFormat. 关于使用设备和嵌入字体的更多信息, 请参阅 Text Renderers 教程.
图标
最后, 让我们给 Button 添加图标. 所有状态下的图标都可自定义, 我们先来简单的使用一个图标.
button.defaultIcon = new Image( myIcon ); button.iconPosition = Button.ICON_POSITION_TOP;
和标签类似, Button 为所有状态的图标提供了一个默认选项. 所有其他状态的图标, 像 downIcon 和 hoverIcon 也是可以自定义的.
我们可以设置 iconPosition 属性使图标在标签上层显示. 我们可以把图标贴在标签的上方, 右侧, 下方, 或者左侧. 下面还有一些其他有用的布局选项:
button.gap = 10; button.horizontalAlign = Button.HORIZONTAL_ALIGN_CENTER; button.verticalAlign = Button.VERTICAL_ALIGN_MIDDLE;
'gap 指的是标签和图标之间的以像素为单位的空间距离. horizontalAlign 和 verticalAlign 属性会调整标签和图标在按钮内的对齐方式, 允许你设置他们靠边缘对齐或者居中对齐.
事件
Button 为鼠标点击或者手指触碰提供了一个 Event.TRIGGERED 事件. 当触摸结束并且鼠标（或手指）没有拽出按钮范围时派发此事件. 让我们添加一个Event.TRIGGERED 监听器:
button.addEventListener( Event.TRIGGERED, button_triggeredHandler );
监听器函数通常会像这样:
function button_triggeredHandler( event:Event ):void { trace( "button triggered" ); }
切换按钮
设置isToggle 属性为 true后, 我们可以在点击按钮后切换按钮的 isSelected 属性.
button.isToggle = true;
这将给按钮带来一些其他的状态:
button.defaultSelectedSkin = new Image( mySelectedUpTexture ); button.selectedDownSkin = new Image( mySelectedDownTexture );
选中状态下的标签和图标也可以自定义:
button.defaultSelectedLabelProperties.textFormat = new BitmapFontTextFormat( mySelectedBitmapFont ); button.defaultSelectedIcon = new Image( mySelectedIcon );
最后, 我们可以通过监听 Event.CHANGE 事件来跟踪isSelected属性的变化:
button.addEventListener( Event.CHANGE, button_changeHandler );
在监听器里检查 isSelected 更新后的值:
function button_changeHandler( event:Event ):void { trace( "button.isSelected has changed:", button.isSelected ); }
相关链接
For more tutorials, return to the Feathers Documentation.
翻译者：王庆
