TabNavigator自定义Tab

通过自定义TabNavigator 样式 tabStyleName 来改变Tab的外观。

样式的SCC代码：

 

.myTab

{

up-skin:ClassReference("skins.TabNavigatorTabSkin");

down-skin:ClassReference("skins.TabNavigatorTabSkin");

over-skin:ClassReference("skins.TabNavigatorTabSkin");

disabled-skin:ClassReference("skins.TabNavigatorTabSkin");

selected-up-skin:ClassReference("skins.TabNavigatorTabSelectedSkin");

selected-down-skin:ClassReference("skins.TabNavigatorTabSelectedSkin");

selected-over-skin:ClassReference("skins.TabNavigatorTabSelectedSkin");

selected-disabled-skin:ClassReference("skins.TabNavigatorTabSelectedSkin");

}

 

其中的TabNavigatorTabSkin和TabNavigatorTabSelectedSkin为两个自定义的皮肤，可以定义如下：

1.TabNavigatorTabSkin

<?xml version="1.0" encoding="utf-8"?>

 

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 

minWidth="21" minHeight="21">

<!-- layer 1: fill -->

<s:Rect left="1" right="1" top="1" bottom="0" >

<s:fill>

<s:LinearGradient rotation="90">

<s:GradientEntry color="0xf3f8fb" alpha="1" />

<s:GradientEntry color="0xd3eaf8" alpha="1" />

</s:LinearGradient>

</s:fill>

</s:Rect>

<!-- layer 2: highlight stroke -->

<s:Rect left="1" right="1" top="1" bottom="1" alpha=".22" >

<s:stroke>

<s:LinearGradientStroke rotation="90">

<s:GradientEntry color="0xFFFFFF" alpha="1" />

<s:GradientEntry color="0xD8D8D8" alpha="1" />

</s:LinearGradientStroke>

</s:stroke>

</s:Rect>

<!-- layer 3: fill highlight -->

<s:Rect left="1" right="1" top="1" bottom="1" >

<s:fill>

<s:LinearGradient rotation="90">

<s:GradientEntry color="0xFFFFFF"

ratio="0.0"

alpha="0.12"/>

<s:GradientEntry color="0xFFFFFF"

ratio="0.48"

alpha="0.12" />

<s:GradientEntry color="0xFFFFFF"

ratio="0.48001"

alpha="0" />

</s:LinearGradient>

</s:fill>

</s:Rect>

<!-- layer 4: border - unselected only -->

<s:Rect left="0" right="0" top="0" bottom="0">

<s:stroke>

<s:SolidColorStroke color="0xbed1d7" alpha="1" />

</s:stroke>

</s:Rect>

</s:SparkSkin>

2.TabNavigatorTabSelectedSkin：

<?xml version="1.0" encoding="utf-8"?>

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 

minWidth="21" minHeight="21">

<!-- layer 1: fill -->

<s:Rect left="1" right="1" top="1" bottom="0" >

<s:fill>

<s:LinearGradient rotation="90">

<s:GradientEntry 

color="0xd3f0fe"

alpha="1" />

<s:GradientEntry 

color="0x67c4ed" 

alpha="1" />

</s:LinearGradient>

</s:fill>

</s:Rect>

<!-- layer 2: highlight stroke -->

<s:Rect left="1" right="1" top="1" bottom="1" alpha=".22" >

<s:stroke>

<s:LinearGradientStroke rotation="90">

<s:GradientEntry color="0xFFFFFF" alpha="1" />

<s:GradientEntry color="0xD8D8D8" alpha="1" />

</s:LinearGradientStroke>

</s:stroke>

</s:Rect>

<!-- layer 3: fill highlight -->

<s:Rect left="1" right="1" top="1" bottom="1" >

<s:fill>

<s:LinearGradient rotation="90">

<s:GradientEntry color="0xFFFFFF"

ratio="0.0"

alpha="0.12"/>

<s:GradientEntry color="0xFFFFFF"

ratio="0.48"

alpha="0.12" />

<s:GradientEntry color="0xFFFFFF"

ratio="0.48001"

alpha="0" />

</s:LinearGradient>

</s:fill>

</s:Rect>

<!-- layer 5: border - selected only -->

<s:Rect left="0" width="1" top="0" bottom="0" >

<s:fill>

<s:SolidColor color="0x66a8c2" alpha="1" />

</s:fill>

</s:Rect>

<s:Rect left="1" right="1" top="0" height="1" >

<s:fill>

<s:SolidColor color="0x66a8c2" alpha="1" />

</s:fill>

</s:Rect>

<s:Rect width="1" right="0" top="0" bottom="0"  >

<s:fill>

<s:SolidColor color="0x66a8c2" alpha="1" />

</s:fill>

</s:Rect>

</s:SparkSkin>