Flex4.5RadioButton皮肤的创建

创建flex项目

添加radioButton组件：

找到RadioButton组件之后添加如下代码：

skinClass="assets.skins.RadioButtonSkin"

即：

<s:RadioButton x="27" y="62" label="男" skinClass="assets.skins.RadioButtonSkin"/>

创建RadioButtonSkin.mxml即RadioButton的皮肤，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:d="http://ns.adobe.com/fxg/2008/dt"
width="46" height="18">
<fx:Metadata>[HostComponent("spark.components.RadioButton")]</fx:Metadata>
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
<s:State name="upAndSelected"/>
<s:State name="overAndSelected"/>
<s:State name="downAndSelected"/>
<s:State name="disabledAndSelected"/>
</s:states>
<fx:DesignLayer d:userLabel="RadioButton">
<s:BitmapImage d:userLabel="disbled" x="0" y="0" width="18" height="18" smooth="true"
  source="@Embed('/assets/images/RadioButton_disabledIcon.png')"
  visible.disabledAndSelected="false"
  visible.down="false"
  visible.downAndSelected="false"
  visible.over="false"
  visible.overAndSelected="false"
  visible.up="false"
  visible.upAndSelected="false"/>
<s:BitmapImage d:userLabel="down" x="0" y="0" smooth="true"
  source="@Embed('/assets/images/RadioButton_downIcon.png')"
  visible.disabled="false"
  visible.disabledAndSelected="false"
  visible.downAndSelected="false"
  visible.over="false"
  visible.overAndSelected="false"
  visible.up="false"
  visible.upAndSelected="false"/>
<s:BitmapImage d:userLabel="over" x="0" y="0" smooth="true"
  source="@Embed('/assets/images/RadioButton_overIcon.png')"
  visible.disabled="false"
  visible.disabledAndSelected="false"
  visible.down="false"
  visible.downAndSelected="false"
  visible.overAndSelected="false"
  visible.up="false"
  visible.upAndSelected="false"/>
<s:BitmapImage d:userLabel="selectdisbled" x="0" y="0" width="18" height="18" smooth="true"
  source="@Embed('/assets/images/RadioButton_selectedDisabledIcon.png')"
  visible.disabled="false"
  visible.down="false"
  visible.downAndSelected="false"
  visible.over="false"
  visible.overAndSelected="false"
  visible.up="false"
  visible.upAndSelected="false"/>
<s:BitmapImage d:userLabel="selectdown" x="0" y="0" smooth="true"
  source="@Embed('/assets/images/RadioButton_selectedDownIcon.png')"
  visible.disabled="false"
  visible.disabledAndSelected="false"
  visible.down="false"
  visible.over="false"
  visible.overAndSelected="false"
  visible.up="false"
  visible.upAndSelected="false"/>
<s:BitmapImage d:userLabel="selectover" x="0" y="0" smooth="true"
  source="@Embed('/assets/images/RadioButton_selectedOverIcon.png')"
  visible.disabled="false"
  visible.disabledAndSelected="false"
  visible.down="false"
  visible.downAndSelected="false"
  visible.over="false"
  visible.up="false"
  visible.upAndSelected="false"/>
<s:BitmapImage d:userLabel="selectup" x="0" y="0" smooth="true"
  source="@Embed('/assets/images/RadioButton_selectedUpIcon.png')"
  visible.disabled="false"
  visible.disabledAndSelected="false"
  visible.down="false"
  visible.downAndSelected="false"
  visible.over="false"
  visible.overAndSelected="false"
  visible.up="false"/>
<s:BitmapImage d:userLabel="up" x="0" y="0" smooth="true"
  source="@Embed('/assets/images/RadioButton_upIcon.png')"
  visible.disabled="false"
  visible.disabledAndSelected="false"
  visible.down="false"
  visible.downAndSelected="false"
  visible.over="false"
  visible.overAndSelected="false"
  visible.upAndSelected="false"/>
<s:RichText id="labelDisplay" x="22" y="4" color="#464646" fontFamily="Arial" fontSize="12"
tabStops="S0 S50"/>
</fx:DesignLayer>
</s:Skin>

在assets/imsges文件下有8张图片.