Flex4强大的Skin——以RadioButton为例

Flex4强大的Skin——以RadioButton为例

Flex4弱化了css样式的功能，使得复杂界面效果必须通过Skin来完成，Skin几乎能实现所有你希望设计界面显示的效果。

SparkSkin是一个Group类型的容器（继承自Group）；全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类；

 

可以用几种方式使用Skin：

（1）在css中直接定义

s|Button{

        skinClass:ClassReference("com.skin.ButtonSkin");

}

（2）在组件定义时设置

<s:Button skinClass="com.skin.ButtonSkin"/>

 

Skin实例详解：

所有skin的修改方式大都相同，根据详细的注释，可以清楚的了解控件的样式实现方法，知道哪些是用来设计边框的，哪些是用来设计填充颜色的，以及哪些是现实文本的颜色。可以通过<s:stroke>来修改边框，<s:fill>来修改填充等。

下面讲解如何通过皮肤将如左图的普通radioButton，设计如右图中的效果。

   

1）首先新建一个MXML Skin类型的文件，组件选择RadioButton.

2）初始生成的文件，为系统默认的皮肤效果。首先你会看到

<s:states>

        <s:State name="up" />

        <s:State name="over" stateGroups="overStates" />

        <s:State name="down" stateGroups="downStates" />

        <s:State name="disabled" stateGroups="disabledStates" />

......

 </s:states>

定义了RadioButton的视图状态，包括鼠标滑过、选中等状态，在皮肤定义里会经常看到例如color.downStates="0xFFFFFF"；alpha. over="1"意在定义不同状态时组件呈现的颜色。

3）接着会有一个Group容器，里面放了很多用于效果设计的组件，RadioButton原始皮肤是由很多个Ellipse组件组成的，包括它的边框，阴影，高光等效果。因为效果图的显示效果比原来的效果要大，因此将Group大小由长宽13改为长宽都为14。

首先找到注释为<!-- drop shadow -->的椭圆控件，该内容定义了RadioButton的阴影效果。

默认情况下的阴影效果为：

<!-- drop shadow -->

        <s:Ellipse left="-1" top="-1" right="-1" bottom="-1">

            <s:stroke>

                <s:LinearGradientStroke rotation="90" weight="1">

                    <s:GradientEntry color="0x000000"  color.downStates="0xFFFFFF" alpha="0.011" alpha.downStates="0" />

                    <s:GradientEntry color="0x000000" color.downStates="0xFFFFFF" alpha="0.121" alpha.downStates="0.57" />

                </s:LinearGradientStroke>

            </s:stroke>

    </s:Ellipse>

即边框线性渐变，宽度为1，旋转角度90度，即正中切割一般有阴影，根据效果图，阴影效果在右上，因此旋转角度改为45度；

阴影颜色也不是纯黑色颜色

另外为了增加渐变的效果性，改为四色线性渐变，色彩之间通过透明度不同来实现缓冲效果；

阴影的宽度增加到3增强立体效果。

<!-- drop shadow -->

        <s:Ellipse left="-1" top="-1" right="-1" bottom="-1">

            <s:stroke>

                <s:LinearGradientStroke rotation="45" weight="3">

                  <s:GradientEntry color="0x7ca39b" color.downStates="0xFFFFFF" alpha="0.8" alpha.downStates="0.8" />        

                  <s:GradientEntry color="0x7ca39b" color.downStates="0xFFFFFF" alpha="1" alpha.downStates="1" />

                  <s:GradientEntry color="0xf5f8f7" color.downStates="0xFFFFFF" alpha="0.8" alpha.downStates="0.8" />

                  <s:GradientEntry  color="0xf5f8f7" color.downStates="0xFFFFFF" alpha="1" alpha.downStates="1" />          

                </s:LinearGradientStroke>

            </s:stroke>

      </s:Ellipse>

再看边框，比较原图和效果图会发现，效果图没有边框，只靠阴影形成来形成圆形形状，因此找到注释为<!—border的组件，将其删掉，或者设置alpha值为0，使其不显示边框。

 

选中点：dot

找到注释为<!-- dot -->的组件，可以发现，中心选中点，是一个由path绘制而成的原点，填充而成的，现在需要加大这个原点。

path指令很难记的，绘制了半天最终偶放弃了，用了一个简单的Ellipse绘制而成的。

但是注意：可以用其他组件代替已有组件，但是id="dotFill"的定义要仍然保留给新定义组件的填充器，否则报错，代码如下。

<s:Ellipse right="3" bottom="3" left="3" top="3" includeIn = "selectedStates" id="dot" itemCreationPolicy="immediate">

           <s:fill>

              <s:SolidColor id="dotFill" color="#e67f25" />

           </s:fill>

    </s:Ellipse>

4)使用已定义的皮肤。

.chartRadioButton{

        skinClass:ClassReference("com.skin.radioButtonSkin");

        symbolColor:#1cb49b;

}

效果：

.levelRadioButton{

        skinClass:ClassReference("com.skin.radioButtonSkin");

        symbolColor:#e67f25;

}

效果：

使用同一个Skin，设置了不同的symbolColor（元件的颜色），使得选中效果有不同展示效果。