`

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 



 

  • 大小: 4.3 KB
  • 大小: 73.6 KB
分享到:
评论
1 楼 hailongshih 2012-09-27  
Good..

相关推荐

    安卓Android源码——ProgressBar 几乎全部的用法.zip

    这个压缩包“安卓Android源码——ProgressBar 几乎全部的用法.zip”显然是一个包含详细教程或示例代码的资源,旨在帮助开发者全面理解和掌握ProgressBar的各种用法。以下是对ProgressBar在Android开发中的常见知识点...

    安卓Android源码——ProgressBar几乎全部的用法.zip

    这个压缩包“安卓Android源码——ProgressBar几乎全部的用法.zip”显然包含了一系列关于ProgressBar使用方法的详细资料,旨在帮助开发者深入理解和充分利用这一功能。 ProgressBar在Android中的基本用法: 1. **...

    android studio创建android项目(10)——ProgressBar的使用-附件资源

    android studio创建android项目(10)——ProgressBar的使用-附件资源

    可跑一分钟的进度条

    ////if (progressBar1.Minimum + length &gt;progressBar1.Value++) ////{ //// progressBar1.Minimum = 0; ////} ////else ////{ //// progressBar1.Minimum += length; ////} //int length = 10; //if ...

    安卓Android源码——(ProgressBar进度条).zip

    这个压缩包“安卓Android源码——(ProgressBar进度条).zip”很可能包含了关于如何自定义和使用ProgressBar的源代码示例。下面我们将详细探讨ProgressBar的相关知识点。 1. **ProgressBar的基本用法** ProgressBar...

    安卓Android源码——(ProgressBar进度条).rar

    这个压缩包文件"安卓Android源码——(ProgressBar进度条).rar"很可能包含了一些关于如何自定义和使用ProgressBar的示例代码和解释。下面将详细探讨Android中的ProgressBar及其相关知识点。 1. **ProgressBar的基本...

    Android 控件之ProgressBar进度条源码-完美控制

    ProgressBar是Android系统中一个重要的UI控件,用于展示任务的进度状态,比如数据加载、文件下载等。在Android开发中,正确理解和使用...在实际项目中,可以根据需求进行个性化定制,打造出独特的进度条效果。

    android ProgressBar各种用法

    除了使用 Android 提供的默认样式外,还可以通过自定义绘制来创建更个性化的 `ProgressBar`。这通常涉及到使用 `Canvas` 和 `Paint` 类来绘制图形。 **自定义圆形 ProgressBar 示例**: ```java public class ...

    react-circle-progressbar:高度可定制且轻量级的圆形进度条组件,使用SVG构建且可广泛定制。 NPM套餐

    npm i @delowar/react-circle-progressbar 或纱线: yarn add @delowar/react-circle-progressbar 用法与范例 import React from 'react' ; import Progress from '@delowar/react-circle-progressbar' ; // Basic...

    监听加载结果并且带ProgressBar的WebView

    本文将深入探讨如何实现一个“监听加载结果并且带ProgressBar的WebView”,并教你如何利用它来加载网页。 首先,让我们了解WebView的基本用法。WebView是Android SDK中的一个类,位于`android.webkit`包下,它提供...

    IndeterminateProgressBar

    Indeterminate ProgressBar,通常被称为无限进度条,是一种在用户界面中表示任务正在进行但无法确定剩余时间的进度指示器。在Android开发中,`IndeterminateProgressBar`是Android SDK提供的一种控件,用于显示不...

    GUI编程

    1.Fraph user interface,图形用户接口。 2.桌面程序.(桌面) 3.服务器java.string.xxx 4:控件 Button //按钮 ...progressbar//进度条 windows //窗口 JFrame //窗口 Lable //标签 Tab // Panal //面板 D

    C# 小实例 关于进度条的使用

    在C#编程中,进度条(ProgressBar)是一个非常常见的控件,它用于向用户显示某个操作的进度,比如文件上传、下载、计算等长时间运行的任务。...通过不断实践和学习,你可以创建出更加丰富和个性化的进度条效果。

    ScopeControl.zip范围控件——Slider、ProgressBar滑块、进度条案例

    在本文中,我们将深入探讨WPF(Windows Presentation Foundation)中的范围控件,主要涉及Slider和ProgressBar两种组件。这些控件在用户界面设计中扮演着重要角色,为用户提供直观的反馈和交互方式。我们将通过C#...

    android mars视频代码 ProgressBar 进度条

    www.mars-droid.com/Android开发视频教程ProgressBar 进度条 代码 源码 mars老师讲课 android 视频源码 (在此特别感谢mars的无私奉献,此代码为跟随视频边学边做的)

    Progressbar进度条的使用

    在Android开发中,`ProgressBar`是一个非常常见的组件,它用于展示任务执行的进度,比如文件下载、上传或者网络请求等。本教程将深入探讨如何利用`Handler`消息机制来实现`ProgressBar`的动态更新,展示进度条中进度...

    flex进度条

    对于基于Flex框架的应用而言,进度条同样扮演着重要的角色,尤其是在应用初始化或数据加载过程中提供用户反馈,提升用户体验方面。本文将详细探讨Flex进度条的实现方式,并通过一个具体示例来阐述其工作原理。 ####...

    C#下ProgressBar详细使用方法

    ProgressBar是Windows Forms中的一种控件,用于在执行长时间运行的操作时提供进度反馈。在C#编程环境下,ProgressBar的使用能够显著提升用户体验,因为它允许用户知道程序正在进行后台处理,并且可以看到处理的进度...

    AndroidProgressBar_Android ProgressBar进度条的几乎全部的用法源码集.rar

    在Android开发中,ProgressBar是用户界面(UI)设计中不可或缺的一部分,它用于向用户展示某个操作的进度或等待状态。本资源"AndroidProgressBar_Android ProgressBar进度条的几乎全部的用法源码集.rar"提供了关于...

Global site tag (gtag.js) - Google Analytics