自定义皮肤

        下面以自定义缩放条 ZoomSlider 的皮肤为例，为您展示如何自定义皮肤类

  1. 由图1可知，ZoomSlider 由三个部分功能控件组成：放大按钮、缩小按钮、划动条：

    图1 缩放条结构

    因此我们需要首先定义一个皮肤类，命名为 ZoomSliderCustomSkin.mxml，其中应包括这三个控件，分别代表放大按钮、缩小按钮、划动条。代码如下表所示：

    ZoomSliderCustomSkin.mxml 拷贝代码 
    <?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
        <!--自定义缩放条皮肤-->
        <fx:Metadata>
        [HostComponent("com.supermap.web.components.ZoomSlider")]
        </fx:Metadata>
        <!--状态-->
        <s:states>
                <s:State name="normal"/>
                <s:State name="disabled"/>
                <s:State name="normalWithSlider"/>
        <s:State name="disabledWithSlider"/>
        </s:states>
        <!--导航条按钮-->
        <s:VGroup gap="2" horizontalAlign="center">
                <!--放大按钮-->
                <s:Button id="zoomInButton"
            enabled.disabled="false"
            enabled.disabledWithSlider="false"
            skinClass="{ZoomSliderZoomInButtonSkin}"
            toolTip="{resourceManager.getString('SuperMapMessages', 'zoomInTooltip')}" 
            width="24" height="24"/>
                <!--划动条-->
        <mx:VSlider id="slider"
            enabled.disabled="false"
            enabled.disabledWithSlider="false"
            enabled.normalWithSlider="true"
            thumbSkin="{ZoomSliderThumbSkin}"
            includeIn="normalWithSlider,disabledWithSlider"
            value="{this.hostComponent.map.level}"
            height="{(this.hostComponent.map.scales.length) * this.hostComponent.sliderHeightParam}"
            maximum="{this.hostComponent.map.resolutions.length - 1}"
            showDataTip="true"
            snapInterval="1"
            tickColor="#000000"
            tickInterval="1"
            tickOffset="9"
            tickLength="10"
            tickThickness="1"/>
                <!--缩小按钮-->
        <s:Button id="zoomOutButton"
            enabled.disabled="false"
            enabled.disabledWithSlider="false"
            skinClass="{ZoomSliderZoomOutButtonSkin}"
            toolTip="{resourceManager.getString('SuperMapMessages', 'zoomOutTooltip')}"
            width="24" height="24"/>
        </s:VGroup>
</s:Skin>

  2. 在第一步的代码中我们又分别为放大、缩小按钮，以及划块按钮定义了皮肤，分别命名为：ZoomSliderZoomInButtonSkin、ZoomSliderZoomOutButtonSkin、ZoomSliderThumbSkin。放大、缩小、划块按钮皮肤类的代码如下，本示例使用图片（图片路径仅做参考）定义各个按钮的皮肤，您也可以自己通过代码在皮肤类中进行绘制：

    ZoomSliderZoomInButtonSkin.mxml 拷贝代码 
    <?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        minHeight="10"
        minWidth="10">
        <!--定义缩放条的地图放大按钮-->
        <fx:Metadata>
        [HostComponent("spark.components.Button")]
        </fx:Metadata>
        <!--状态-->
        <s:states>
                <s:State name="down"/>
                <s:State name="disabled"/>
                <s:State name="over"/>
        <s:State name="up"/>
        </s:states>
        <!--使用图片定义按钮-->
        <s:BitmapImage bottom="0"
        left="0"right="0"
        source="@Embed(source='/../assets/zoomin.png')"
        top="0"/>
</s:Skin>
    ZoomSliderZoomOutButtonSkin.mxml 拷贝代码 
    <?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        minHeight="10"
        minWidth="10">
        <!--定义缩放条的地图缩小按钮-->
        <fx:Metadata>
        [HostComponent("spark.components.Button")]
        </fx:Metadata>
        <!--状态-->
        <s:states>
                <s:State name="down"/>
                <s:State name="disabled"/>
                <s:State name="over"/>
        <s:State name="up"/>
        </s:states>
        <!--使用图片定义按钮-->
        <s:BitmapImage bottom="0"
        left="0"right="0"
        source="@Embed(source='/../assets/zoomout.png')"
        top="0"/>
</s:Skin>
    ZoomSliderThumbSkin.mxml 拷贝代码 
    <?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        minHeight="10"
        minWidth="10">
        <!--定义缩放条的划块按钮-->
        <fx:Metadata>
        [HostComponent("spark.components.Button")]
        </fx:Metadata>
        <!--状态-->
        <s:states>
                <s:State name="down"/>
                <s:State name="disabled"/>
                <s:State name="over"/>
        <s:State name="up"/>
        </s:states>
        <!--使用图片定义划块-->
        <s:BitmapImage bottom="0"
        left="0"right="0"
        source="@Embed(source='/../assets/thumb.png')"
        top="0"/>
</s:Skin>

  3. 完成1、2 两步后，恭喜您对 ZoomSlider 控件皮肤的自定义已顺利完成。下面新建一个应用程序，命名为： CustomZoomSlider.mxml，在其中定义 ZoomSlider 控件并设置皮肤属性 skinClass，关于如何设置皮肤请参见请参见《使用皮肤》。

  4. 运行 CustomZoomSlider.mxml，即可看到使用自定义皮肤的 ZoomSlider。本示例的结果如下：

    图2 自定义缩放条皮肤

版权所有© 2000－2015 北京超图软件股份有限公司 保留所有权利。