返回 导航

Flex

hangge.com

Flex4 - 设置button按钮背景图片(up,down,over等各状态)

作者:hangge | 2015-04-07 16:07
Flex4中,如果要设置spark组件的button按钮背景图,可以通过自定义皮肤来实现。在皮肤中添加BitmapImage组件,分别设置在各个状态下的图片即可(同时背景图可使用9宫格样式,便于拉伸)。代码如下:

--- 按钮皮肤 ImageBgButtonSkin.mxml ---
<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin 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">
     
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [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>
	
	<s:BitmapImage width="100%" height="100%" 
				   source="@Embed('up.png',
				   scaleGridTop='13', scaleGridBottom='49', scaleGridLeft='15', scaleGridRight='237')"
				   source.over="@Embed('over.png',
				   scaleGridTop='13', scaleGridBottom='49', scaleGridLeft='15', scaleGridRight='237')"
				   source.down="@Embed('down.png',
				   scaleGridTop='13', scaleGridBottom='49', scaleGridLeft='15', scaleGridRight='237')"
				   source.disabled="@Embed('disabled.png',
				   scaleGridTop='13', scaleGridBottom='49', scaleGridLeft='15', scaleGridRight='237')"
				   /> 
          
    <s:Label id="labelDisplay"
             textAlign="center"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
             left="10" right="10" top="2" bottom="2">
    </s:Label>    
</s:SparkButtonSkin>

--- 使用 ---
<s:Button label="spark按钮" width="200" height="70" skinClass="ImageBgButtonSkin"/>
评论

全部评论(0)

回到顶部