Flex里自定义进度条ProgressBar样式皮肤

原文地址:http://hi.baidu.com/sheng00/item/ec3498c7fdc83263f7c95d80

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

效果如图:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值