`

Flex4 自定义RadioButton的Skin

阅读更多

Radiobutton自带的皮肤中,圈太小,不方便用户点击,需要自定义皮肤,google了N久,找到前面两篇资料,然后自己重新写了一个Skin,终于搞定了,哈哈哈~

我的SkinRadio.mxml的源码:

<?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">

    <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:states>
    
    <s:Group verticalCenter="0" width="25" height="25">
        <!-- drop shadow -->
        <s:Ellipse left="0" top="0" right="-1" bottom="-1">
            <s:stroke>
                <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0x000000" 
                                   color.downStates="0x00FF00"
                                   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">
            <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">
            <s:fill>
                <s:SolidColor color="0xEEEEEE" 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">
            <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="0xEEEEEE" 
                            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="2" top="2" includeIn="selectedStates" id="dot" itemCreationPolicy="deferred"
                data="M 2 13 C 2 7 7 2 13 2 C 18 2 23 7 23 13 C 23 18 18 23 13 23 C 7 23 2 18 2 13 Z ">
            <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="0x02881e" alpha="0.9" />
                
            </s:fill>
            
        </s:Path>
        
    </s:Group>

    <!-- Label -->
    <!---  @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
    <s:Label id="labelDisplay"
             textAlign="start"
             verticalAlign="middle"
             maxDisplayedLines="1"
             left="40" 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的样式 在Android开发过程中,经常需要对UI进行个性化定制来满足不同应用的需求或提高用户体验。RadioButton是一种常用的控件,用于表示一组互斥的选择项。默认情况下,Android提供的...

    Android自定义RadioButton及RadioGroup

    默认的RadioButton虽然能满足基本需求,但在某些情况下,开发者可能需要对其进行自定义,以满足特定的设计风格或者功能扩展。本篇文章将深入探讨如何在Android中自定义RadioButton及其所在的RadioGroup,并使用...

    自定义RadioButton

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

    自定义RadioButton的实例

    在默认情况下,RadioButton的布局样式和元素间距可能无法满足所有设计需求,因此,开发者有时需要自定义RadioButton以实现特定的视觉效果。本教程将详细介绍如何在Android中自定义RadioButton,特别是如何调整选中框...

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

    4. 处理事件:添加OnCheckedChangeListener监听器,当RadioButton的状态改变时,触发相应的回调函数,更新界面或者执行相应的业务逻辑。 5. 在Activity或Fragment中使用自定义RadioButton:将自定义RadioButton添加...

    android 自定义单选按钮radioButton

    本教程将深入探讨如何在Android中自定义RadioButton,使其满足特定的设计需求。 一、RadioButton基础 RadioButton是Android的 android.widget.RadioGroup 类中的一个子类,它在视觉上表现为一个小圆圈,未被选中时...

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

    4. **布局文件中的使用**:在XML布局文件中,用自定义的RadioButton替换原始的RadioButton,并设置相应的属性,如文字、颜色等。 ```xml android:id="@+id/radioButton_wechat" android:layout_width="wrap_...

    Flex DataGird Add RadioButton

    4. **设置事件监听器**:在RadioButton上设置一个事件监听器,如`change`事件,当用户点击RadioButton时触发,更新数据源以反映用户的选择。 5. **应用自定义渲染器**:将这个自定义渲染器应用到DataGrid的相应列上...

    仿美团支付自定义radiobutton

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

    RadioButton和CheckBox自定义样式

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

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

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

    好看的自定义radiobutton

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

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

    在Android开发中,"android充值demo 自定义editview自定义radiobutton"是一个常见的应用场景,它涉及到用户界面(UI)的设计和交互,特别是针对移动应用中的支付功能。下面将详细讲解这个主题涉及的知识点。 首先,...

    .net compact framework 自定义Radiobutton

    .net compact framework 自定义Radiobutton

    自定义android RadioButton样式

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

    自定义RadioButton&CheckBox样式的实现

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

Global site tag (gtag.js) - Google Analytics