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)