flex中自定义皮肤的按钮制作

今天聊一下FLEX中自定义皮肤的按钮的制作。首先这是一个按钮皮肤文件：

<?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" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5">
    
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        [HostComponent("spark.components.Button")]  //表明这是一个按钮皮肤
        ]]>
    </fx:Metadata>
    
    <!-- states -->
    <!--按钮的四种状态-->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
   
 
 <!-- skinParts中定义的外观部件，表示按钮上的文字-->
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="2">
    </s:Label>
    
</s:SparkSkin>

在Flex4.0 API中，打开spark.components.Button可以看到：

这里定义了按钮的几种状态，而则是按钮的外观部件，这里指的是按钮上面的文字。

 

然后我为按钮指定一个填充背景：

<s:Rect id="buttonColor" 
            top="0" bottom="0" 
            left="0" right="0"
           radiusY="50" radiusX="50"
            width.over="900" width.down="700" >    
        <s:fill>
            <s:SolidColor color.up="#0074aa" 
                          color.over="#64BC48" 
                          color.down="#FF7256"/>
        </s:fill>

 

此时我们应用这个小皮肤会发现，按钮上的文字有点按钮难以看清，此时有一个小技巧就是将Label的颜色改为白色.

接下里给按钮加上状态切换时候的动画：

<s:transitions>
        <s:Transition fromState="up" toState="over">            
            <s:Resize target="{buttonColor}"   widthBy="100"/>            
        </s:Transition>
        <s:Transition fromState="over" toState="up">    
            <s:Resize target="{buttonColor}"   widthBy="-100"/>    
        </s:Transition>
        <s:Transition fromState="over" toState="down">    
            <s:Resize target="{buttonColor}" widthBy="-100"/>    
        </s:Transition>
    </s:transitions>

在这里我发现了一个问题，就是我用这些效果起作用的前提是你的按钮的宽度都是固定的

<!--不能在此设定按钮的宽度-->
    <s:Button   label="定制按钮实例_Flex开发课堂"  
                       fontFamily="黑体"  fontSize="40"
                       top="10"  
                       skinClass="skins.really_defaultButton"
                       horizontalCenter="0" verticalCenter="0">
    </s:Button>

到这里一个自定义皮肤的按钮就做好了。

2013-07-25 09:25:04