zoukankan      html  css  js  c++  java
  • 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(元件的颜色),使得选中效果有不同展示效果。

  • 相关阅读:
    CREATE AGGREGATE
    技术文档列表
    jQuery 判断表单中多个 input text 中至少有一个不为空
    Java实现 蓝桥杯 算法提高 奥运会开幕式
    Java实现 蓝桥杯 算法提高 最长滑雪道
    Java实现 蓝桥杯 算法提高 最长滑雪道
    Java实现 蓝桥杯 算法提高 最长滑雪道
    Java实现 蓝桥杯 算法提高 最大值路径
    Java实现 蓝桥杯 算法提高 最大值路径
    Java实现 蓝桥杯 算法提高 最大值路径
  • 原文地址:https://www.cnblogs.com/gaozhen-Dream/p/flex_radioButtonSkin.html
Copyright © 2011-2022 走看看