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. 预览