[2011-04] Flex里自定义进度条ProgressBar式样皮肤

[2011-04] Flex里自定义进度条ProgressBar样式皮肤

2011-01-29 11:08trackbar是整个的条<?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="0x939393" 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="0x000000" alpha="0.12" />        </s:fill>    </s:Rect>    <s:Rect right="2" top="2" bottom="2" width="1" >        <s:fill>            <s:SolidColor color="0x000000" alpha="0.12" />        </s:fill>    </s:Rect>    <s:Rect left="3" top="2" right="3" height="1" >        <s:fill>            <s:SolidColor color="0x000000" 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"/>