spark下_TabNavigator改变Tab颜色和圆角

来源：互联网发布：驱动下载软件编辑：程序博客网时间：2024/05/02 16:20

1. 简单讲解

前段时间要求TabNavigator设置成圆角的并且改变Tab的颜色，在网上找遍了资料，并且在网上的编辑器中也是用scc样式设置，都是在flex3中起作用，我用的是Flash Builder 4.5 对皮肤也不是很了解，最后无奈试着写了两个皮肤实现了。废话不说看看是怎么实现的。

我只写了两个状态的皮肤，up和down是一种，over和disabled是一种；

在这两个皮肤中设置Tab的颜色和圆角的半径，然后再通过CSS样式应用，就OK了。

2. 源代码

2.1主程序代码main.mxml

<?xmlversion="1.0" encoding="utf-8"?>
<s:WindowedApplicationxmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="521"height="462">
    <fx:Stylesource="css/tabnavigator.css"/>
    <fx:Declarations>
        
    </fx:Declarations>
    <s:Panelwidth="468" height="376"horizontalCenter="0"title="http://blog.csdn.net/fly_air.com"
            verticalCenter="0">
        <mx:TabNavigatorwidth="396" height="316"horizontalCenter="0"verticalCenter="0">
            <s:NavigatorContentwidth="100%" height="100%"label="选项卡 1" backgroundColor="#39EC1C">
                <s:BorderContainerleft="0" right="0"top="0" height="40"backgroundColor="#C1D9F3"
                                   borderVisible="false">
                </s:BorderContainer>
            </s:NavigatorContent>
            <s:NavigatorContentwidth="100%" height="100%"label="选项卡2" backgroundColor="#EAB4B4">
                <s:BorderContainerleft="0" right="0"top="0" height="40"backgroundColor="#C1D9F3"
                                   borderVisible="false">
                </s:BorderContainer>
            </s:NavigatorContent>
            <s:NavigatorContentwidth="100%" height="100%"label="选项卡3" backgroundColor="#E281F7">
                <s:BorderContainerleft="0" right="0"top="0" height="40"backgroundColor="#C1D9F3"
                                   borderVisible="false">
                </s:BorderContainer>
            </s:NavigatorContent>
        </mx:TabNavigator>
    </s:Panel>
</s:WindowedApplication>

2.2 选择Tab后的Tab皮肤

<?xmlversion="1.0" encoding="utf-8"?>
<s:SparkSkinxmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"width="400" height="300">
    <fx:Declarations>
        
    </fx:Declarations>
    <s:Rectleft="1" right="1"top="1" bottom="0" topLeftRadiusY="8"topRightRadiusY="8"topLeftRadiusX="8"topRightRadiusX="8">
        <s:fill>
            <s:LinearGradientrotation="90">
                <s:GradientEntrycolor="#C1D9F3" alpha="1" />
                <s:GradientEntrycolor="#C1D9F3" alpha="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
</s:SparkSkin>

2.3 为选择的Tab皮肤
<?xmlversion="1.0" encoding="utf-8"?>
<s:SparkSkinxmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"width="78" height="66">
    <fx:Declarations>
        
    </fx:Declarations>
    <s:Rectleft="1" right="1"top="1" bottom="0"topLeftRadiusY="8"topRightRadiusY="8"topLeftRadiusX="8"topRightRadiusX="8">
        <s:fill>
            <s:LinearGradientrotation="90">
                <s:GradientEntrycolor="#E0ECFA" alpha="1" />
                <s:GradientEntrycolor="#E0ECFA" alpha="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
</s:SparkSkin>
2.4 CSS样式
@namespaces "library://ns.adobe.com/flex/spark";
@namespacemx "library://ns.adobe.com/flex/mx";
mx|TabNavigator{
    tabHeight:32;
    tabWidth:105;
    paddingTop:0;
    paddingLeft:1;
    horizontalGap:3;
    tabStyleName:"myTab";
    firstTabStyleName:"myTab";
    lastTabStyleName: "myTab";
    borderVisible:false;
}
.myTab{
    fontFamily:宋体;
    fontSize:13;
    fontWeight:bold;
    up-skin:ClassReference("skins.tabnavitor");
    down-skin:ClassReference("skins.tabnavitor");
    over-skin:ClassReference("skins.tabnavitor");
    disabled-skin:ClassReference("skins.tabnavitor");
    selected-up-skin:ClassReference("skins.selectedTabnavitor");
    selected-down-skin:ClassReference("skins.selectedTabnavitor");
    selected-over-skin:ClassReference("skins.selectedTabnavitor");
    selected-disabled-skin:ClassReference("skins.selectedTabnavitor");
}
2.    预览