flex togglebuttonbar 实现的导航

1     flex4 API中的togglebuttonbar定义：

          ToggleButtonBar 控件定义一组水平或垂直按钮，这些按钮保持其选中或取消选中状态。在 ToggleButtonBar 控件中，只有一个按钮可以处于选中状态。这就意味着，当用户在 ToggleButtonBar 控件中选择一个按钮后，该按钮将保持选中状态直到用户选择其他按钮。

           要控制 ToggleButtonBar 控件的按钮样式，请使用ButtonStyleName、firstButtonStyleName 、lastButtonStyleName和 样式属性；请勿尝试设置 ToggleButtonBar 控件中单个 Button 控件的样式。

2     ToggleButtonBar实现的导航

          1  Work.mxml文件：

<?xml version="1.0" encoding="utf-8"?>
<local:WorkAS xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" width="400" height="300">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <fx:Style source="css/style.css"/>
    <mx:VBox verticalCenter="0" horizontalCenter="0">
        <mx:HBox>
            <mx:ToggleButtonBar dataProvider="viewstack"  buttonStyleName="toggleButtonBarButtonSkin"
                                firstButtonStyleName="toggleButtonBarButtonSkin" lastButtonStyleName="toggleButtonBarButtonSkin"/>
        </mx:HBox>
    <mx:ViewStack id="viewstack">
        <mx:VBox id="new1" label="第一页">
            <s:Button label="1111"/>
        </mx:VBox>
        <mx:VBox id="new2"  label="第二页">
            <s:Button label="2222"/>
        </mx:VBox>
        <mx:VBox id="new3"  label="第三页">
            <s:Button label="3333"/>
        </mx:VBox>
        <mx:VBox id="new4"  label="第四页">
            <s:Button label="4444"/>
        </mx:VBox>
    </mx:ViewStack>
            </mx:VBox>
</local:WorkAS>

         2    style.css文件：

 

.toggleButtonBarButtonBar{
    upSkin:Embed(source="assets/btnup.png");
    overSkin:Embed(source="assets/btndown.png");
    downSkin:Embed(source="assets/btnup.png");
    focusSkin:Embed(source="assets/btnup.png");
    disabledSkin:Embed(source="assets/btnup.png");
    selectedUpSkin:Embed(source="assets/btndown.png");
    selectedDownSkin:Embed(source="assets/btndown.png");
    selectedOverSkin:Embed(source="assets/btnup.png");
    selectedDisabledSkin:Embed(source="assets/btndown.png");
}

实现效果：

 

 

就是对togglebuttonbar的Button 赋了各个转状态的皮肤。学习ING