`

flex4 spark 组件 自定义RadioButton样式

阅读更多
<?xml version="1.0" encoding="utf-8"?>
<!--
    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.
    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for a Spark RadioButton component. 
       @see spark.components.RadioButton
       @see spark.components.RadioButtonGroup
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabledStates="0.5" xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.RadioButton")]
    ]]>
    </fx:Metadata> 
    
    <fx:Script fb:purpose="styling">
        /* Define the skin elements that should not be colorized. 
           For button, the graphics are colorized but the label is not. */
        static private const exclusions:Array = ["labelDisplay", "dot"];
        /**
         * @private
         */
        override public function get colorizeExclusions():Array {return exclusions;}
        
        /* Define the symbol fill items that should be colored by the "symbolColor" style. */
        static private const symbols:Array = ["dotFill"];
        
        /**
         * @private
         */
        override public function get symbolItems():Array {return symbols};
        
        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
    </fx:Script>
    
    <fx:Script>
        <![CDATA[
        /** 
         * @private 
         */     
        private static const focusExclusions:Array = ["labelDisplay"];
        /**
         *  @private
         */
        override public function get focusSkinExclusions():Array { return focusExclusions;};
        ]]>
    </fx:Script>
    
    <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:State name="upAndSelected" stateGroups="selectedStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
  <s:State name="noEnable" />
    </s:states>
    
    <s:Group verticalCenter="0" width="13" height="13" visible="true">
        <!-- drop shadow -->
        <s:Ellipse left="-1" top="-1" right="-1" bottom="-1" visible="true">
            <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>
        
        <!-- fill -->
        <s:Ellipse left="1" top="1" right="1" bottom="1" visible="true">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xFFFFFF" 
                                   color.overStates="0xBBBDBD" 
                                   color.downStates="0xAAAAAA" 
                                   alpha="0.85" />
                    <s:GradientEntry color="0xD8D8D8" 
                                   color.overStates="0x9FA0A1" 
                                   color.downStates="0x929496" 
                                   alpha="0.85" />
                </s:LinearGradient>
            </s:fill>
        </s:Ellipse>
        
        <!-- fill highlight -->
        <s:Path data="M 1 6 Q 2 2 6 1 Q 11 2 12 6 h -9" visible="true">
            <s:fill>
                <s:SolidColor color="0xFFFFFF" alpha="0.33" />
            </s:fill>
        </s:Path>
        
        <!-- layer 6: highlight stroke (all states except down) -->
        <s:Ellipse left="1" right="1" top="1" bottom="1" visible="true">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0xFFFFFF" color.downStates="0x939393" alpha.overStates="0.22" />
                    <s:GradientEntry color="0xD8D8D8" color.downStates="0xB1B1B1" alpha.overStates="0.22" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Ellipse>
        <s:Rect left="5" top="1" right="5" height="1">
            <s:fill>
                <s:SolidColor color="0xFFFFFF" 
                            color.downStates="0x939393"
                            alpha.overStates="0.22" />
            </s:fill>
        </s:Rect>
        
        <!-- border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
        <s:Ellipse left="0" top="0" right="0" bottom="0">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0x000000" alpha="0.70" />
                    <s:GradientEntry color="0x000000" alpha="0.80" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Ellipse>
        
        <!-- dot -->
        <!--- Defines the appearance of the RadioButton's dot. To customize the appearance of the dot, create a custom RadioButtonSkin class. -->
        <s:Path left="4" top="4" includeIn="selectedStates" id="dot" itemCreationPolicy="immediate"
                data="M 2.5 0 Q 4.5 0.5 5 2.5 Q 4.5 4.5 2.5 5 Q 0.5 4.5 0 2.5 Q 0.5 0.5 2.5 0">
            <s:fill>
                <!--- @private
                      Defines the appearance of the dot's fill. The default color is 0x000000. The default alpha is .9. -->
                <s:SolidColor id="dotFill" color="0" alpha="0.9" />
            </s:fill>
        </s:Path>
        <s:Path left="4" top="7" includeIn="selectedStates" 
                data="M 0 0 Q 0.5 2 2.5 2.0 Q 3.5 2.0 4 0">
            <s:stroke>
                <s:LinearGradientStroke>
                    <s:GradientEntry color="0xFFFFFF" alpha="0.3" />
                    <s:GradientEntry color="0xFFFFFF" alpha="0.7" />
                    <s:GradientEntry color="0xFFFFFF" alpha="0.3" />
                </s:LinearGradientStroke>
            </s:stroke>
        </s:Path>
  <s:Ellipse left="0" top="0" right="0" bottom="0" includeIn="disabled"><!--改变disabled 状态下  圆圈的样式 也可以用图片来更换 disabled状态 enabled=false-->
   <s:fill>
    <s:SolidColor color="#b4996d" alpha="1" />
   </s:fill>
  </s:Ellipse>
    </s:Group>
    <!-- Label -->
    <!---  @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
    <s:Label id="labelDisplay"
             textAlign="start"
             verticalAlign="middle"
             maxDisplayedLines="1"
             left="18" right="0" top="3" bottom="3" verticalCenter="2" />
</s:SparkSkin>

 

分享到:
评论

相关推荐

    C# WinForm 自定义 RadioButton

    4. **事件扩展**:除了.NET框架内置的事件外,还可以添加自定义事件,让其他组件能监听自定义RadioButton的特定行为。 ```csharp public event EventHandler CustomCheckedChanged; private void ...

    android 自定义RadioButton的样式

    默认情况下,Android提供的RadioButton样式较为单一,可能无法满足某些设计需求。因此,自定义RadioButton的样式成为了一种常见的需求。 #### 自定义RadioButton的基本步骤 1. **创建Drawable资源**:首先需要为...

    RadioButton和CheckBox自定义样式

    在本文中,我们将深入探讨如何自定义RadioButton和CheckBox的样式,特别是通过重写onDraw()方法来实现颜色选择器效果。首先,我们需要了解这两个控件的基本结构和工作原理。 RadioButton和CheckBox都是继承自...

    自定义android RadioButton样式

    因此,自定义RadioButton样式是提升应用视觉效果的重要手段。这篇内容将详细介绍如何自定义Android的RadioButton样式。 首先,我们可以在`res/drawable`目录下创建一个XML文件,例如`custom_radiobutton.xml`,来...

    Android自定义RadioButton及RadioGroup

    创建自定义RadioButton的第一步是创建一个新的XML布局文件,用于定义自定义的样式。在res/drawable目录下,可以创建一个名为custom_radio_button.xml的文件,内容如下: ```xml ``` 这里,@drawable/...

    自定义RadioButton

    4. **自定义颜色和样式**:利用`android:background`属性,可以设置选中和未选中时的背景颜色或图片。同时,`android:checkedButtonBackground`和`android:unCheckedButtonBackground`属性可以分别设定选中和未选中...

    android 自定义单选按钮radioButton

    在Android开发中,单选按钮(RadioButton)是用户界面中常用的一种组件,它通常用于提供一组互斥的选择项,用户只能选择其中的一项。本教程将深入探讨如何在Android中自定义RadioButton,使其满足特定的设计需求。 ...

    自定义RadioButton的实例

    在Android开发中,RadioButton是用户界面中常见的组件,通常用于实现单选按钮功能,让用户在多个选项中选择一个。在默认情况下,RadioButton的布局样式和元素间距可能无法满足所有设计需求,因此,开发者有时需要...

    Android 模仿美团的支付方式选择自定义RadioButton

    在这个过程中,我们将深入探讨如何自定义RadioButton,包括布局设计、样式设置以及事件处理。 首先,RadioButton是Android中的一个基本选择组件,通常用于在多个选项中选择一个。默认情况下,RadioButton的样式比较...

    RadioButton自定义样式详解

    3. 自定义RadioButton样式: - 我们可以通过修改默认的样式来实现自定义效果。首先,创建一个XML资源文件(如:res/drawable/radioButton_style.xml),定义自定义的背景、选中状态图标等。 - 在RadioButton的...

    类似美团支付方式选择自定义RadioButton

    默认的RadioButton样式可能无法满足所有设计需求,因此我们需要自定义其外观和行为。 自定义RadioButton通常包括以下几个步骤: 1. **创建自定义View类**:创建一个新的Java类,继承自RadioButton,然后在此类中...

    好看的自定义radiobutton

    标题“好看的自定义radiobutton”暗示我们将讨论如何美化标准的RadioButton组件,使其更具吸引力。描述中提到的“好看的自定义menu 可以点击不同部分进行切换”则扩展了这个话题,意味着我们要探讨的不仅限于单个...

    仿美团支付自定义radiobutton

    本文将深入探讨如何仿照美团支付的方式,自定义一个RadioButton,使样式可以根据需求进行修改。首先,我们来了解一下RadioButton的基本概念。 RadioButton是Android系统提供的选择按钮,属于RadioGroup的一部分。...

    自定义RadioButton&CheckBox样式的实现

    本篇将详细介绍如何实现自定义RadioButton和CheckBox样式的实践过程。 首先,我们需要了解Android中的样式系统。在Android中,我们可以使用XML资源文件来定义样式,包括颜色、尺寸、字体等属性。对于RadioButton和...

    WPF 实现RadioButton样式两种方式,vs2010

    这种方式适用于需要在运行时动态改变RadioButton样式的情况。在C#代码中,你可以这样做: 1. 首先,确保你的窗口或用户控件已经加载了资源字典,这通常在`Loaded`事件处理程序中完成: ```csharp private void ...

    android 高仿微信底部菜单 用自定义的radiobutton和radiogroup实现,能实现气泡数字的效果

    4. **集成与交互**: 将自定义的RadioButton和RadioGroup添加到主布局中,然后将它们与ViewPager关联。确保在RadioButton的点击事件中更新ViewPager的当前页面,并同步气泡数字的显示。 5. **动态更新气泡数字**: 在...

    android充值demo 自定义editview自定义radiobutton

    综上所述,"android充值demo 自定义editview自定义radiobutton"涵盖了Android支付功能的实现、UI组件的定制以及示例代码的学习。开发者需要理解Android支付API的使用,熟悉XML布局和Java/Kotlin编程,同时具备一定的...

    .net compact framework 自定义Radiobutton

    .net compact framework 自定义Radiobutton

Global site tag (gtag.js) - Google Analytics