Flex/AIR个性化——ProgressBar

在Spark主题下，ProgressBar 的边框、进度条等都由skin 来控制，主要有4个skin，其默认分别为：

mx.skins.spark.ProgressBarSkin 进度条的样式

mx.skins.spark.ProgressBarTrackSkin 进度条背景的样式

mx.skins.spark.ProgressBarIndeterminateSkin 用于不确定类型的ProgressBar

mx.skins.spark.ProgressBarMaskSkin 暂未研究

可在 FlexSDK 下的 sparkskins.swc 下找到这些类。

 

1. 以这些默认的skin为基础，将其代码copy到新建的skin类，然后修改其中相应的部分即可。

1) ProgressBarSkin 主要有3部分：

a) 片段1 进度条的颜色：

   

<!-- layer 1: fill -->
<s:Rect left="2" right="2" top="2" bottom="2" >
	<s:fill>
		<s:LinearGradient rotation="90">
			<s:GradientEntry color="0xFFFFFF" alpha="1" />
			<s:GradientEntry color="0xD8D8D8" alpha="1" />
		</s:LinearGradient>
	</s:fill>
</s:Rect>

    0xFFFFFF 是进度条颜色。按需修改即可。

 

    除了改颜色，还可以把 <s:LinearGradient rotation="90"> ... </s:LinearGradient> 或 <s:fill> ... </s:fill> 里面改掉使之更个性，如：

<!-- layer 1: fill -->
<s:Rect left="3" right="3" top="3" bottom="3" >
<s:fill>
<s:LinearGradient rotation="90">
<s:entries>
<s:GradientEntry color="0x336699" ratio="0.33" alpha="0.8"/>
<s:GradientEntry color="0x339999" ratio="0.66" alpha="0.8"/>
<s:GradientEntry color="0x323232" ratio="0.99" alpha="0.8"/>
</s:entries>
</s:LinearGradient>
</s:fill>
</s:Rect>

 效果如下：

  

b) 片段2 进度条的边框（是进度条的边框，而不是整个 ProgressBar 的边框）：

 

<!-- layer 2: border -->
<s:Rect left="2" right="2" top="2" bottom="2" >
	<s:stroke>
		<s:LinearGradientStroke rotation="90">
			<s:GradientEntry color="0xFFFFFF" alpha=".9" />
			<s:GradientEntry color="0xFFFFFF" alpha="0.5" />
		</s:LinearGradientStroke>
	</s:stroke>
</s:Rect>

    按需修改即可。

 

c) 片段3（尚不太清楚有什么作用）：

 

<!-- layer 3: right edge -->
<s:Rect right="1" top="2" bottom="2" width="1" >
	<s:fill>
		<s:SolidColor color="0x000000" alpha="0.55" />
	</s:fill>
</s:Rect>

 

2) ProgressBarTrackSkin 主要有4部分：

a) 片段1 ProgressBar边框：

   

<!-- layer 1: border -->
<s:Rect left="0" right="0" top="0" bottom="0" width="199">
	<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>

   

b) 片段2  ProgressBar内边框：

<!-- layer 2: inner border -->
<s:Rect left="1" right="1" top="1" bottom="1" >
	<s:stroke>
		<s:SolidColorStroke color="0x636363" alpha="1" />
	</s:stroke>
</s:Rect>

  

 

c) 片段3 ProgressBar背景：

<!-- layer 3: fill -->
<s:Rect left="2" right="2" top="2" bottom="2" >
	<s:fill>
		<s:LinearGradient rotation="90">
			<s:GradientEntry color="0x9A9A9A" alpha="1" />
			<s:GradientEntry color="0xBDBDBD"  alpha="1" />
		</s:LinearGradient>
	</s:fill>
</s:Rect>

 

  

d) 片段4 内阴影：

<!-- 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>

   

 

3) ProgressIndeterminateSkin 是AS类形式的，其基类是 mx.skins.Border ：

找到 private static var colors:Array = [0xCCCCCC, 0x808080];

这句就是控制斜块颜色的（bar 仍然由 ProgressBarSkin 控制）。

以上只是最简单的修改，要更个性可以修改方法 updateDisplayList 里的内容。

 

 

 

2. 通过 CSS 来控制全局应用或个别应用 ProgressBar 样式（建议：将与样式相关的属性设置都独立到 CSS 文件中）

1) 全局: （建议：将适合应用到全局的（如 fontSize 等 ）放在此处）

mx|Progress {
   font-size: 12;
   font-weight: normal;
   vertical-gap: 0;
}

 

2) 个别（通过id或其他方式）:  

#progressBar{
    bar-skin: ClassReference("skins.ProgressBarSkin");
    track-skin: ClassReference("skins.ProgressBarTrackSkin");
    indeterminate-skin: ClassReference("skins.ProgressIndeterminateSkin");
    indeterminate-move-interval: 20;
}

 

ProgressBar 常用属性：

color: label文字颜色；

fontSize: label文字大小；

fontWeight: label文字是否加粗；

verticalGap: label与进度条的垂直间距（当 labelPlacement="top" "bottom" "center" 时有效）；

trackHeight: 整个ProgressBar高度；

themeColor: Halo主题下默认的ProgressBar颜色是蓝条+白底，如果仅需要简单的改变这一组颜色，可使用该属性（该属性 Halo 主题下有效，Spark 下无效）；

barSkin: 进度条的皮肤；

trackSkin: 进度条轨迹皮肤（行进时的样式）；

indeterminateMoveInterval: 不确定的进度条的斜块间距（从字面看该解释不是特别准确，具体表现为：值越小斜块越密）；

indeterminateSkin: 不确定的进度条的皮肤；

 

 

附：《Flex与ActionScript3程序开发》11.8 ProgressBar组件 学习 Mindmap 

 

评论

1 楼 hailongshih 2012-09-27  

Good..