flex4自定义皮肤详解(转)

在Flex4新增加了一个包：spark.skins，这个包里面只有一个类：SparkSkin，而我们（非美工的程序员）通过这个class来实现任意自定义控件的样式。
通过上述关系可以得出如下的结论：
1、SparkSkin是一个Group类型的容器。（它继承与Group）
2、是全部Spark类的基础类，也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类）

注意Skin，这个类是SparkSkin的父类，同时Skin继承与Group。

Skin：
是SparkSkin的父类，例如ButtonBarSkin就是Skin的子类，如果想要自定义这部分组件的样式，则需要使用Skin。

SparkSkin：
是全部Spark类的基础类，也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类。

综上所述，用SparkSkin和Skin都可达到同样的效果。

在Flex4中，我们只需要将这个button的样式继承与SparkSkin或者Skin，然后在其中加入一些想要的内容即可，请看以下代码：
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009">
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
<s:Ellipse width="100%" height="100%">
<s:fill>
<s:SolidColor color="#FFFF00“ color.over="#00FF00" color.down="#FF0000"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x00FFFF" />
</s:stroke>
</s:Ellipse>
<s:RichText id="labelElement"
fontFamily="Myriad Pro"
fontSize="11"
color="0xBBBBBB"
textAlign="center"
horizontalCenter="0"
verticalCenter="1"
width="100%">
   </s:RichText>
</s:SparkSkin>

我们可以用以下几个方式将这个样式应用：
1、
    Button{
           skinClass: ClassReference("cn.xuedi.SelfButton");
    }

2、myButton.setStyle( "skinClass", Class(cn.xuedi.SelfButton));

3、<Button skinClass="cn.xuedi.SelfButton" />

其中skinClass也是Flex4里面新增加的一个类，其作用就是设定当前这个组件的Skin。

主程序：
<?xml version='1.0' encoding='UTF-8'?>
<s:Application xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009"
height="254" width="576"
backgroundColor="#222222" >
<fx:Script>
<![CDATA[
import com.rianote.flex.skin.Button;
]]>
</fx:Script>
<s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32" width="77" label="Button"/>
</s:Application>

-----------------------------------------------------------------------------------------

以上代码解释：

1、
<s:SparkSkin
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:fx="http://ns.adobe.com/mxml/2009">
</s:SparkSkin>
含义：
如果要自定义控件样式，必须要要继承SparkSkin或者Skin。

2、
<fx:Metadata>[HostComponent("spark.components.Button")]></fx:Metadata>
含义：
我们要修改的是spark.components.Button的外形，Flex4新增了一个matadata tag：HostComponent
同时，Metadata也由原来的mx:变成了现在的fx，因为名称空间发生了改变。

3、
<s:states>
   <s:State name="up"/>
   <s:State name="over"/>
   <s:State name="down"/>
   <s:State name="disabled"/>
</s:states>
含义：
定义了Button的四种状态：up、down、over、disabled。这是Flex4新增的一种功能，用State来描述状态。
在Flex3的情况下，只能描述UI的不同状态，而在Flex4中，又赋予了State描述控件状态的功能。

4、
<s:Ellipse width="100%" height="100%"></s:Ellipse>
含义：
画一个圆形（椭圆形）的图形，而Ellipse也是Flex4新增一个包：spark.primitives里面的一个类。
spark.primitives里面定义了一些图形，例如：Ellipse、Rect、Path、Line等类。同样根据这些类名就可以得出是做什么用的。

5、
<s:fill>
   <s:SolidColor color="#FFFF00" color.over="#00FF00" color.down="#FF0000"/>
</s:fill>
含义：
设定填充的方式（SolidColor）填充颜色值FFFF00的颜色，color.over是指鼠标移动上去后的颜色，color.down是鼠标按下时候的颜色。
引申一下，还有color.up、color.display，通过这些值就可以描述四种状态时的颜色。
注意：SolidColor外层必须要有<s:fill>否则会出现错误。fill是填充的意思。

6、
<s:stroke>
   <s:SolidColorStroke color="0x0c0d0d" />
</s:stroke>
含义：
设定边线的颜色（SolidColorStroke）当然也可以设定诸如：color.up、color.display、color.down、color.over的颜色。
同样SolidColorStroke必须在stroke内部，而stroke的含义：设定边框。

7、我们在重新看一下这些代码的意义：
<s:Ellipse width="100%" height="100%">
   <s:fill>
       <s:SolidColor color="FFFF00" color.over="#00FF00" color.down="#FF0000"/>
   </s:fill>
   <s:stroke>
       <s:SolidColorStroke color="#00FFFF" />
   </s:stroke>
</s:Ellipse>
含义：
定义一个圆形（因为宽和高相等）然后填充一个0xFFFF00的颜色，并且设定鼠标移上、按下时的颜色值（color.over="#00FF00" color.down="#FF0000"）
然后在定义一个边框，设定颜色为0x0c0d0d。

8、
<s:RichText id="labelElement"
   fontFamily="Myriad Pro"
   fontSize="11"
   color="0xBBBBBB"
   textAlign="center"
   horizontalCenter="0"
   verticalCenter="1"
   width="100%">
</s:RichText>
含义：
上面的代码定义了Button中可以显示文字的部分。注意，id必须设定为labelElement，否则出错。其他的样式可以自行设定了。

主程序：
<s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32" width="77" label="Button"/>

我们要注意的地方：skinClass，这也是Flex4新增加的一个类，专门用来设定当前皮肤的properties，请注意skinClass只适用于Spark包里面的可视化控件。

以上就是通过继承SparkSkin、Skin和skinClass的方式很简单的实现自定义组件的皮肤。

评论

1 楼 lsf009 2012-04-12  

[flash=200,200][/flash][url][/url]