Feathers:toggle-switch
原文地址：http://wiki.starling-framework.org/feathers/toggle-switch
目录 |
如何使用Feathers的ToggleSwitch（拨动开关）组件
ToggleSwitch 组件有开启和关闭两个可以相互转换的状态. 如果你需要一个像Check一样有两个状态供选择的组件要用在触摸屏幕上，那么ToggleSwitch更合适，你可以用手指把它从一边拨到另一边, 或者轻击以转换它的选择状态.
基础介绍
先让我们来创建一个拨动开关.
var toggle:ToggleSwitch = new ToggleSwitch(); toggle.isSelected = true; this.addChild( toggle );
isSelected 属性表明开关处于开启(true) 或者关闭状态(false). 我们可以添加一个 Event.CHANGE 的侦听器来捕获isSelected发生改变时的事件:
toggle.addEventListener( Event.CHANGE, toggle_changeHandler );
事件处理函数如下:
function toggle_changeHandler( event:Event ):void { var toggle:ToggleSwitch = ToggleSwitch( event.currentTarget ); trace( "toggle.isSelected changed:", toggle.isSelected ); }
为ToggleSiwtch设置皮肤
ToggleSwitch组件的皮肤被分为几个部分.
设置标签的皮肤
标签上的on和off文本样式可以分开设置也可以采用相同设置，默认是两个标签使用相同设置.
toggle.defaultLabelProperties.textFormat = new BitmapFontTextFormat( myBitmapFont );
如果你想要区分每个标签都，则需要为每个标签设置不同的属性:
toggle.defaultLabelProperties.textFormat = new BitmapFontTextFormat( myBitmapFont ); toggle.onLabelProperties.textFormat = new BitmapFontTextFormat( myBitmapFont, myBitmapFont.size, 0xff9900 );
为滑块设置皮肤
ToggleSwitch中的滑块其实就是一个简单的 Button，你可以像其他任何按钮一样设置皮肤. 如果你有创建主题, 你可以设置一个名为ToggleSwitch.DEFAULT_CHILD_NAME_THUMB的initializer指向 Button 类.
setInitializerForClass( Button, toggleSwitchThumbInitializer, ToggleSwitch.DEFAULT_CHILD_NAME_THUMB );
若没有创建主题，则可以使用ToggleSwitch的thumbProperties 来设置滑块的属性. 接下来，我们将通过使用 Scale9Image显示对象为滑块的每一个状态设置皮肤:
toggle.thumbProperties.defaultSkin = new Scale9Image( up9Textures ); toggle.thumbProperties.downSkin = new Scale9Image( down9Textures ); toggle.thumbProperties.hoverSkin = new Scale9Image( hover9Textures );
设置轨道的皮肤
ToggleSwitch的轨道由一个或两个按钮组成, 由 trackLayoutMode 属性决定. 默认是由单个滑块填满整个ToggleSwitch。如果我们想把滑块两边的轨道（一个开启，一个关闭）区分开来, 则需要把 trackLayoutMode 的值设为ToggleSwitch.TRACK_LAYOUT_MODE_ON_OFF. 为了确保在该模式下两边不同的轨道一直相接在滑块中间，它们的宽度会随滑块的移动而调整.
同样，如果我们有创建主题, 我们可以创建一个名为ToggleSwitch.DEFAULT_CHILD_NAME_ON_TRACK的initializer指向Button 类来设置左边的“on”轨道。 该名称也适用于使用ToggleSwitch.TRACK_LAYOUT_MODE_SINGLE的单轨道模式 。同样, 我们可以用名为ToggleSwitch.DEFAULT_CHILD_NAME_OFF_TRACK的initializer指向Button 类来设置右边的“off”轨道.
setInitializerForClass( Button, toggleSwitchOnTrackInitializer, ToggleSwitch.DEFAULT_CHILD_NAME_ON_TRACK ); setInitializerForClass( Button, toggleSwitchOffTrackInitializer, ToggleSwitch.DEFAULT_CHILD_NAME_OFF_TRACK );
若没有主题, 我们可以用ToggleSwitch中定义的属性onTrackProperties 和offTrackProperties来设置两个轨道的皮肤.
toggle.onTrackProperties.defaultSkin = new Scale9Image( onTrackUpTextures ); toggle.onTrackProperties.downSkin = new Scale9Image( onTrackDownTextures ); toggle.offTrackProperties.defaultSkin = new Scale9Image( offTrackUpTextures ); toggle.offTrackProperties.downSkin = new Scale9Image( offTrackDownTextures );
另外, 如果我们想让单一的轨道充满整个ToggleSwitch的区域, 我们可以设置 trackLayoutMode 为ToggleSwitch.TRACK_LAYOUT_MODE_SINGLE。 在这种情况下, 我们只需要设置onTrackProperties 来改变该轨道的属性. 而offTrackProperties 将会被忽略.
toggle.onTrackProperties.defaultSkin = new Scale9Image( trackTextures );
在轨道不需要区分开启和关闭状态时，通常使用ToggleSwitch.TRACK_LAYOUT_MODE_SINGLE. 如果开启和关闭状态需要不同的背景颜色，那么ToggleSwitch.TRACK_LAYOUT_MODE_ON_OFF 更佳。
相关链接
更多教程, 请返回 Feathers Documentation.
翻译者：乱乱
