[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"/>

 

效果如图：