自定义皮肤-----tabBar按钮皮肤

最新推荐文章于 2020-12-22 23:24:54 发布

ttbat

最新推荐文章于 2020-12-22 23:24:54 发布

阅读量1k

点赞数 1

分类专栏： Flex自定义皮肤 Flex 文章标签： library layer encoding border

本文链接：https://blog.youkuaiyun.com/ttbat/article/details/7981976

版权

Flex 同时被 2 个专栏收录

17 篇文章

订阅专栏

Flex自定义皮肤

2 篇文章

订阅专栏

本文详细介绍了如何使用Flex SDK中的TabBar组件，并通过自定义样式实现个性化UI设计，包括按钮布局、字体大小、间距调整及点击事件响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

<mx:TabBar x="3" y="-3" buttonHeight="30" buttonWidth="65" tabStyleName="tabbar"
        horizontalGap="1" fontSize="12" fontWeight="normal"  textAlign="left"
        itemClick="tabbar1_itemClickHandler(event)">
    <mx:dataProvider>{tabbar}</mx:dataProvider>
   </mx:TabBar>

<fx:Style>
  @namespace s "library://ns.adobe.com/flex/spark";
  @namespace mx "library://ns.adobe.com/flex/mx";
  @namespace Control "widgets.Control.*";
  .tabbar{
   up-skin:ClassReference("widgets.ControlSkin.TabNavigatorTabSelectedSkin");
   
   down-skin:ClassReference("widgets.ControlSkin.TabNavigatorTabSelectedSkin");
   
   over-skin:ClassReference("widgets.ControlSkin.TabNavigatorTabSelectedSkin");
   
   disabled-skin:ClassReference("widgets.ControlSkin.TabNavigatorTabSelectedSkin");
   
   selected-up-skin:ClassReference("widgets.ControlSkin.TabNavigatorTabSkin");
   
   selected-down-skin:ClassReference("widgets.ControlSkin.TabNavigatorTabSkin");
   
   selected-over-skin:ClassReference("widgets.ControlSkin.TabNavigatorTabSkin");
   
   selected-disabled-skin:ClassReference("widgets.ControlSkin.TabNavigatorTabSkin");
  }
 
 </fx:Style>

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" radiusX="4" radiusY="4">
  <s:fill>
   <s:LinearGradient rotation="90">
    <s:GradientEntry 
     color="0xd3e9fe"
     alpha="1" />
    <s:GradientEntry 
     color="0x66aaed" 
     alpha="1" />
   </s:LinearGradient>
  </s:fill>
 </s:Rect>
 <!-- layer 2: highlight stroke -->
 <s:Rect left="1" right="1" top="1" bottom="1" alpha="0"  radiusX="4" radiusY="4">
  <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"  radiusX="4" radiusY="4">
  <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"  radiusX="4" radiusY="4">
  <s:fill>
   <s:SolidColor color="0x528ecb" alpha="0" />
  </s:fill>
 </s:Rect>
 <s:Rect left="1" right="1" top="0" height="1"  radiusX="4" radiusY="4">
  <s:fill>
   <s:SolidColor color="0x528ecb" alpha="0" />
  </s:fill>
 </s:Rect>
 <s:Rect width="1" right="0" top="0" bottom="0"  radiusX="4" radiusY="4">
  <s:fill>
   <s:SolidColor color="0x528ecb" alpha="0" />
  </s:fill>
 </s:Rect>
</s:SparkSkin>

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" radiusX="4" radiusY="4">
  
  <s:fill>
   
   <s:LinearGradient rotation="90">
    
    <s:GradientEntry color="0xedf3f9" alpha="1" />
    
    <s:GradientEntry color="0xcce1f6" alpha="1" />
    
   </s:LinearGradient>
   
   
  </s:fill>
  
 </s:Rect>
 
 
 <!-- layer 2: highlight stroke -->
 
 <s:Rect left="1" right="1" top="1" bottom="1" alpha=".22"  radiusX="4" radiusY="4">
  
  <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"  radiusX="4" radiusY="4">
  
  <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"  radiusX="4" radiusY="4">
  
  <s:stroke>
   
   <s:SolidColorStroke color="0xa1b8cf" alpha="1" />
   
  </s:stroke>
  
 </s:Rect>
 
 
</s:SparkSkin>