Customized ProgressBar in flex

Customized ProgressBar in flex

trackbar是整个的条

<?xml version=”1.0″ encoding=”utf-8″?>

<s:SparkSkin xmlns:fx=”http://ns.adobe.com/mxml/2009″ xmlns:s=”library://ns.adobe.com/flex/spark”
minHeight=”13″ >

    <fx:Script>
    override protected function initializationComplete():void
    {
        useChromeColor = true;
        super.initializationComplete();
    }
    </fx:Script>

    <!– layer 1: border –>
    <s:Rect left=”0″ right=”0″ top=”0″ bottom=”0″ width=”199″
    topLeftRadiusX=”6″ topLeftRadiusY=”6″ topRightRadiusX=”6″ topRightRadiusY=”6″
    bottomLeftRadiusX=”6″ bottomLeftRadiusY=”6″ bottomRightRadiusX=”6″ bottomRightRadiusY=”6″>
        <s:stroke>
            <s:LinearGradientStroke rotation=”90″>
                <s:GradientEntry color=”0xFFFFFF”
                alpha=”.12″ />
                <s:GradientEntry color=”0xFFFFFF”
                alpha=”0.8″ />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <!– layer 2: inner border –>
    <s:Rect left=”1″ right=”1″ top=”1″ bottom=”1″
    topLeftRadiusX=”6″ topLeftRadiusY=”6″ topRightRadiusX=”6″ topRightRadiusY=”6″
    bottomLeftRadiusX=”6″ bottomLeftRadiusY=”6″ bottomRightRadiusX=”6″ bottomRightRadiusY=”6″>
        <s:stroke>
            <s:SolidColorStroke color=”0×939393″ alpha=”1″ />
        </s:stroke>
    </s:Rect>

    <!– layer 3: fill –>
    <s:Rect left=”2″ right=”2″ top=”2″ bottom=”2″
    topLeftRadiusX=”6″ topLeftRadiusY=”6″ topRightRadiusX=”6″ topRightRadiusY=”6″
    bottomLeftRadiusX=”6″ bottomLeftRadiusY=”6″ bottomRightRadiusX=”6″ bottomRightRadiusY=”6″>
        <s:fill>
            <s:LinearGradient rotation=”90″>
                <s:GradientEntry color=”0xeeeeee”
                alpha=”1″ />
                <s:GradientEntry color=”0xeeeeee”
                alpha=”1″ />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!– layer 4: inner shadow –>
    <s:Rect left=”2″ top=”2″ bottom=”2″ width=”1″ >
        <s:fill>
            <s:SolidColor color=”0×000000″ alpha=”0.12″ />
        </s:fill>
    </s:Rect>
    <s:Rect right=”2″ top=”2″ bottom=”2″ width=”1″ >
        <s:fill>
            <s:SolidColor color=”0×000000″ alpha=”0.12″ />
        </s:fill>
    </s:Rect>
    <s:Rect left=”3″ top=”2″ right=”3″ height=”1″ >
        <s:fill>
            <s:SolidColor color=”0×000000″ alpha=”0.12″ />
        </s:fill>
    </s:Rect>

</s:SparkSkin>

bar是当前进度条

<?xml version=”1.0″ encoding=”utf-8″?>

<s:SparkSkin xmlns:fx=”http://ns.adobe.com/mxml/2009″ xmlns:s=”library://ns.adobe.com/flex/spark” >

    <fx:Script>
    override protected function initializationComplete():void
    {
        useChromeColor = true;
        super.initializationComplete();
    }
    </fx:Script>

    <!– layer 1: fill –>
    <s:Rect left=”2″ right=”2″ top=”2″ bottom=”2″
    topLeftRadiusX=”6″ topLeftRadiusY=”6″ topRightRadiusX=”6″ topRightRadiusY=”6″
    bottomLeftRadiusX=”6″ bottomLeftRadiusY=”6″ bottomRightRadiusX=”6″ bottomRightRadiusY=”6″>
        <s:fill>
            <s:LinearGradient rotation=”90″>
                <s:GradientEntry color=”0x154c87″
                alpha=”1″ />
                <s:GradientEntry color=”0x154c87″
                alpha=”1″ />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!– layer 2: border –>
    <s:Rect left=”2″ right=”2″ top=”2″ bottom=”2″
    topLeftRadiusX=”6″ topLeftRadiusY=”6″ topRightRadiusX=”6″ topRightRadiusY=”6″
    bottomLeftRadiusX=”6″ bottomLeftRadiusY=”6″ bottomRightRadiusX=”6″ bottomRightRadiusY=”6″>
        <s:stroke>
            <s:LinearGradientStroke rotation=”90″>
                <s:GradientEntry color=”0x154c87″
                alpha=”.9″ />
                <s:GradientEntry color=”0x154c87″
                alpha=”0.5″ />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <!– layer 3: right edge –>
    <s:Rect right=”1″ top=”2″ bottom=”2″ width=”1″ >
        <s:fill>
            <s:SolidColor color=”0xffffff” alpha=”0.55″ />
        </s:fill>
    </s:Rect>

</s:SparkSkin>

 

用的时候

pbar = new ProgressBar();

pbar.setStyle(“trackSkin”,CustomProgressBarTrackSkin);
pbar.setStyle(“barSkin”,CustomProgressBarSkin);

当然也可以

<mx:ProgressBar barSkin=”skins.CustomProgressSkin”
trackSkin=”skins.CustomProgressBarTrackSkin”/>