[转]mx:RadioButton定制皮肤，去掉默认Icon

原作者：慧 

http://blog.dreamhui.net/archives/38

 

 

近日要写一个用于皮肤选择的TitleWindow，因为是单选，所以用到单选框mx:RadioButton，但是想用自定义皮肤来定制mx:RadioButton的默认外观，并想去掉前面作为Icon的小圈圈，找了资料，终于解决了。

mx:RadioButton的样式里面有关于Icon的声明。

因为icon属性只接受Class类型参数，所以如果在CSS样式表中做修改的，不太方便。所以我选择在MXML文件中将其赋予空的Class对象引用，这将覆盖掉默认的前面的小圈圈做icon。然后再在CSS中定义其皮肤。源文件如下：

mxml文件：

^?View Code MXML

 

<?xml version="1.0" encoding="utf-8"?>

<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 

    xmlns:s="library://ns.adobe.com/flex/spark" 

    xmlns:mx="library://ns.adobe.com/flex/mx"

    title="选择您喜欢的留言皮肤"

    close="skinPanelClose()"

    styleName="skinSelPanel"

    initialize="init()">

 

    <!--~~~~~~~~~~~~~~~~~~~~~~~Script~~~~~~~~~~~~~~~~~~~~~~~-->

    <fx:Script>

        <![CDATA[

            import events.SkinSelEvent;

 

            import mx.controls.Alert;

            import mx.core.FlexGlobals;

            import mx.events.FlexEvent;

            import mx.events.ItemClickEvent;

            import mx.managers.PopUpManager;

 

            [Bindable]

            private var iconRB:Class = null as Class;

            //去掉RadioButton前面的icon小圈圈

 

            private var selArray:Array = new Array();

            //放置前一项的选择对象(RadioButton)引用

 

            private var defaultSkin:String = "6";

            //用户未做选择时候的默认皮肤

 

            /**

             * 窗口初始化，将默认皮肤选项的RadioButton添加滤镜

             * */

            protected function init():void

            {

                selArray.push(radioBtn6);

                radioBtn6.filters = [glow];

            }

 

            public static function show():skinSelPanel

            {

                var skinPanel:skinSelPanel = skinSelPanel(PopUpManager.createPopUp(DisplayObject(FlexGlobals.topLevelApplication),skinSelPanel,true));

                PopUpManager.centerPopUp(skinPanel);

                return skinPanel;

            }

 

            /**

             * 窗口关闭时候，将选择结果以事件形式返给主应用程序

             * */

            protected function skinPanelClose():void

            {

                PopUpManager.removePopUp(this);

                var skinSelEvent:SkinSelEvent = new SkinSelEvent(SkinSelEvent.SKIN_SHOT);

                if(skinShotGroup.selection)

                {

                    defaultSkin = skinShotGroup.selectedValue.toString();

                }

                skinSelEvent.skinShot = defaultSkin;

 

                dispatchEvent(skinSelEvent);

            }

 

            /**

             * 用户做选择的时候，将数组selArray中的前一项代表的对象引用的滤镜去掉

             * 并给当前所选项添加滤镜，以便标识

             * */

            protected function skinShotClick(event:ItemClickEvent):void

            {

                //selArray = new Array();

                //如果在此初始化，每次都清空该数组，不能保留上一次点击的结果

                selArray.push(skinShotGroup.selection);

                if(selArray.length > 1)

                {

                    var rbtn:RadioButton = selArray[selArray.length-2];

                    //Alert.show(rbtn.name);

                    rbtn.filters = null;

                }

                skinShotGroup.selection.filters = [glow];

                //将用户当前所选项添加滤镜，以便标识

            }

 

        ]]>

    </fx:Script>

 

    <!--~~~~~~~~~~~~~~~~~~~~~~~Declarations~~~~~~~~~~~~~~~~~~~~~~~-->

    <fx:Declarations>

        <!--声明RadioButtonGroup-->

        <mx:RadioButtonGroup id="skinShotGroup" itemClick="skinShotClick(event)"/>

 

        <!--声明滤镜glow-->

        <s:GlowFilter id="glow" blurX="40" blurY="40" color="0xffffff" />

    </fx:Declarations>

 

    <!--~~~~~~~~~~~~~~~~~~~~~~~UI Components~~~~~~~~~~~~~~~~~~~~~~~-->

    <s:HGroup width="100%" height="100%" id="rbtnHG">

        <s:VGroup width="30%" height="90%">

            <mx:RadioButton value="1" styleName="radioBtn1" group="{skinShotGroup}" buttonMode="true" icon="{iconRB}" />

            <mx:RadioButton value="2" styleName="radioBtn2" group="{skinShotGroup}" buttonMode="true" icon="{iconRB}" />

            <mx:RadioButton value="3" styleName="radioBtn3" group="{skinShotGroup}" buttonMode="true" icon="{iconRB}" />

            <mx:Button id="submit" label="确定" styleName="skinSubmit" click="skinPanelClose()" />

        </s:VGroup>

        <s:VGroup width="30%" height="90%">

            <mx:RadioButton value="4" styleName="radioBtn4" group="{skinShotGroup}" buttonMode="true" icon="{iconRB}" />

            <mx:RadioButton value="6" id="radioBtn6" styleName="radioBtn6" group="{skinShotGroup}" buttonMode="true" icon="{iconRB}" />

            <mx:RadioButton value="5" styleName="radioBtn5" group="{skinShotGroup}" buttonMode="true" icon="{iconRB}" />

        </s:VGroup>

        <s:VGroup width="30%" height="90%">

            <mx:RadioButton value="7" styleName="radioBtn7" group="{skinShotGroup}" buttonMode="true" icon="{iconRB}" />

            <mx:RadioButton value="8" styleName="radioBtn8" group="{skinShotGroup}" buttonMode="true" icon="{iconRB}" />

            <mx:RadioButton value="9" styleName="radioBtn0" group="{skinShotGroup}" buttonMode="true" icon="{iconRB}" />

        </s:VGroup>

    </s:HGroup>

 

</s:TitleWindow>

SS文件部分：

^?View Code CSS

.skinSelPanel
{
    backgroundAlpha:0.7;
    backgroundColor:#000000;
    borderVisible:false;
    corner-radius:5;
    chrome-color:#F579FB;
    content-background-alpha:0;
    color:#ffffff;
    text-align:left;
    font-size:16;
    font-weight:bold;
 
}
.radioBtn0
{
    up-skin:ClassReference("skins.messSkinblackBlue");
    over-skin:ClassReference("skins.messSkinblackBlue");
    down-skin:ClassReference("skins.messSkinblackBlue");
    selected-disabled-skin:ClassReference("skins.messSkinblackBlue");
    selected-down-skin:ClassReference("skins.messSkinblackBlue");
    selected-up-skin:ClassReference("skins.messSkinblackBlue");
    selected-over-skin:ClassReference("skins.messSkinblackBlue");
}
.radioBtn1
{
    up-skin:ClassReference("skins.messSkinBlue");
    over-skin:ClassReference("skins.messSkinBlue");
    down-skin:ClassReference("skins.messSkinBlue");
    selected-disabled-skin:ClassReference("skins.messSkinBlue");
    selected-down-skin:ClassReference("skins.messSkinBlue");
    selected-up-skin:ClassReference("skins.messSkinBlue");
    selected-over-skin:ClassReference("skins.messSkinBlue");
}
.radioBtn2
{
    up-skin:ClassReference("skins.messSkincircleGreen");
    over-skin:ClassReference("skins.messSkincircleGreen");
    down-skin:ClassReference("skins.messSkincircleGreen");
    selected-disabled-skin:ClassReference("skins.messSkincircleGreen");
    selected-down-skin:ClassReference("skins.messSkincircleGreen");
    selected-up-skin:ClassReference("skins.messSkincircleGreen");
    selected-over-skin:ClassReference("skins.messSkincircleGreen");
}
.radioBtn3
{
    up-skin:ClassReference("skins.messSkinleftBlue");
    over-skin:ClassReference("skins.messSkinleftBlue");
    down-skin:ClassReference("skins.messSkinleftBlue");
    selected-disabled-skin:ClassReference("skins.messSkinleftBlue");
    selected-down-skin:ClassReference("skins.messSkinleftBlue");
    selected-up-skin:ClassReference("skins.messSkinleftBlue");
    selected-over-skin:ClassReference("skins.messSkinleftBlue");
}
.radioBtn4
{
    up-skin:ClassReference("skins.messSkinrectGreen");
    over-skin:ClassReference("skins.messSkinrectGreen");
    down-skin:ClassReference("skins.messSkinrectGreen");
    selected-disabled-skin:ClassReference("skins.messSkinrectGreen");
    selected-down-skin:ClassReference("skins.messSkinrectGreen");
    selected-up-skin:ClassReference("skins.messSkinrectGreen");
    selected-over-skin:ClassReference("skins.messSkinrectGreen");
}
.radioBtn5
{
    up-skin:ClassReference("skins.messSkinRed");
    over-skin:ClassReference("skins.messSkinRed");
    down-skin:ClassReference("skins.messSkinRed");
    selected-disabled-skin:ClassReference("skins.messSkinRed");
    selected-down-skin:ClassReference("skins.messSkinRed");
    selected-up-skin:ClassReference("skins.messSkinRed");
    selected-over-skin:ClassReference("skins.messSkinRed");
}
.radioBtn6
{
    up-skin:ClassReference("skins.messSkinrightBlue");
    over-skin:ClassReference("skins.messSkinrightBlue");
    down-skin:ClassReference("skins.messSkinrightBlue");
    selected-disabled-skin:ClassReference("skins.messSkinrightBlue");
    selected-down-skin:ClassReference("skins.messSkinrightBlue");
    selected-up-skin:ClassReference("skins.messSkinrightBlue");
    selected-over-skin:ClassReference("skins.messSkinrightBlue");
}
.radioBtn7
{
    up-skin:ClassReference("skins.messSkinrightGreen");
    over-skin:ClassReference("skins.messSkinrightGreen");
    down-skin:ClassReference("skins.messSkinrightGreen");
    selected-disabled-skin:ClassReference("skins.messSkinrightGreen");
    selected-down-skin:ClassReference("skins.messSkinrightGreen");
    selected-up-skin:ClassReference("skins.messSkinrightGreen");
    selected-over-skin:ClassReference("skins.messSkinrightGreen");
}
.radioBtn8
{
    up-skin:ClassReference("skins.messSkinzise");
    over-skin:ClassReference("skins.messSkinzise");
    down-skin:ClassReference("skins.messSkinzise");
    selected-disabled-skin:ClassReference("skins.messSkinzise");
    selected-down-skin:ClassReference("skins.messSkinzise");
    selected-up-skin:ClassReference("skins.messSkinzise");
    selected-over-skin:ClassReference("skins.messSkinzise");
}

 

运行的最终结果：

其中带有白色发光滤镜的，为当前所选择。