FLex的Spark主题下TabNavigator的Tab皮肤、颜色与圆角效果

转载的，真心是转载的，转自：http://blog.csdn.net/sjz168/article/details/6707594

 

下面贴上，方便看：

 

Main.mxml文件：

 

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 <fx:Declarations>
  <!-- 将非可视元素（例如服务、值对象）放在此处 -->
 </fx:Declarations>
 
 <fx:Style>
  @namespace s "library://ns.adobe.com/flex/spark";
  @namespace mx "library://ns.adobe.com/flex/mx";
  
  mx|TabNavigator {
   tabStyleName: "myTabs";
   firstTabStyleName: "myTabs";
   lastTabStyleName: "myTabs";
   selectedTabTextStyleName: "mySelectedTabs";
  }
  
  .myTabs {
   up-skin:ClassReference("TabNavigatorTabSkin");
   
   down-skin:ClassReference("TabNavigatorTabSkin");
   
   over-skin:ClassReference("TabNavigatorTabSkin");
   
   disabled-skin:ClassReference("TabNavigatorTabSkin");
   
   selected-up-skin:ClassReference("TabNavigatorTabSelectedSkin");
   
   selected-down-skin:ClassReference("TabNavigatorTabSelectedSkin");
   
   selected-over-skin:ClassReference("TabNavigatorTabSelectedSkin");
   
   selected-disabled-skin:ClassReference("TabNavigatorTabSelectedSkin");

   
  }
  
  .mySelectedTabs {
  }
 </fx:Style>
 
 <mx:TabNavigator x="120" y="70" width="200" height="200">
  <s:NavigatorContent width="100%" height="100%" label="列表基础模板">
  </s:NavigatorContent>
  <s:NavigatorContent width="100%" height="100%" label="输入框">
  </s:NavigatorContent>
 </mx:TabNavigator>
</s:WindowedApplication>

 

 

 

皮肤页面

 

TabNavigatorTabSkin.mxml：

 

<?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" topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
  
  <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"  topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
  
  <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"  topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
  
  <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"  topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
  
  <s:stroke>
   
   <s:SolidColorStroke color="0xbed1d7" alpha="1" />
   
  </s:stroke>
  
 </s:Rect>
 
 
</s:SparkSkin>

 

TabNavigatorTabSelectedSkin.mxml：

 

 

<?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"  topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
  <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="0"  topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
  <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"  topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
  <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"  topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
  <s:fill>
   <s:SolidColor color="0x66a8c2" alpha="0" />
  </s:fill>
 </s:Rect>
 <s:Rect left="1" right="1" top="0" height="1"  topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
  <s:fill>
   <s:SolidColor color="0x66a8c2" alpha="0" />
  </s:fill>
 </s:Rect>
 <s:Rect width="1" right="0" top="0" bottom="0"   topLeftRadiusY="25" topRightRadiusY="25" topLeftRadiusX="25" topRightRadiusX="25">
  <s:fill>
   <s:SolidColor color="0x66a8c2" alpha="0" />
  </s:fill>
 </s:Rect>
</s:SparkSkin>