- 浏览: 502562 次
- 性别:
- 来自: 杭州
-
文章分类
最新评论
-
devon.k:
推荐的一种解决方案:https://developer.jbo ...
JBoss应用遇到问题记录 -
liuzl121:
楼主你好,我遇到了你说的第一个问题,能不能详细一些?
JBoss应用遇到问题记录 -
showzh:
...
MySQL5.1列类型 -
zijie110:
...
使用SpringSide的PropertyFilter无法实现 where 属性名1 like '%值1%' or 属性名1 like '%值2%' 的效果 -
JAVA-JVM:
您好,我看了您的一篇文章“用Maven构建Flex4项目实践记 ...
用Maven构建Flex4项目实践记录
在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
发表评论
-
Adobe AIR for BlackBerry要点记录
2012-01-20 12:58 15551. 使用AIR开发BlackBerry应用前,有几项前提工作 ... -
Adobe Flex/AIR release记要
2011-11-07 14:46 13431. Flex 1) SDK发布 : Flex ... -
Adobe AIR for iOS开发记录
2011-09-28 10:08 0相关资料: Packager for iPhone (官 ... -
自定义AIR mobile应用的样式或皮肤
2011-11-11 14:44 2474环境: Adobe Flash Builder ... -
iOS开发应用记录
2011-09-28 11:09 2218一、iOS应用设计 1. 参 ... -
Flex进阶持续学习——性能优化
2011-09-03 18:03 3139一. 参考资料 Performance-tuning ... -
开发AIR mobile应用时多设备上的显示处理
2011-08-18 18:48 3935移动设备关于显示效果的问题尤其突出,分辨率、屏幕尺寸各异,处理 ... -
Flex进阶持续学习
2011-07-22 16:49 12101. 生命周期 探究 Flex ... -
Adobe AIR for Android开发记录
2011-06-19 22:17 40181. 通过USB直接连接HTC Desire HD调试AIR ... -
Flex基础——事件
2011-03-31 23:08 725事件驱动是Flex的一大特点,初学者一定要先知道这个。 看了 ... -
Flex/AIR个性化——ToolTip
2011-03-31 11:34 1652编写自己的应用时,自定义ToolTip应该是满常用到的。 定 ... -
《Flex_4:开发RIA_应用程序》学习笔记脑图
2011-02-27 23:11 1217准备今年上半年考个Adobe RIA开发工程师认证,有幸觅得考 ... -
Flex/AIR开发记要——代码篇
2011-01-23 16:45 1707一、样式、皮肤相关 1. 自定义ToolTip,详见 ... -
Flex/AIR加载图片的几种方式
2011-01-23 16:43 2343网觅得,略作修改。 代码如下: (以下环境运 ... -
Flex/AIR开发遇到问题记录
2011-01-10 10:15 17721. 2010-11-? Number 对象 toFixed ... -
Flex/AIR开发记要——规范篇
2010-10-22 18:19 1341一、规范、规则 1、命名: 1)文件名(as类名除 ... -
CheckBoxFileSystemTree的实现笔记
2010-09-26 10:05 0关于Tree的相关参考与copy: Flex中Tree组件的 ... -
用Maven构建AIR2项目实践记录
2010-08-28 22:42 2515------------------------------- ... -
用Maven构建Flex4项目实践记录
2010-08-27 14:07 8483------------------------------- ... -
Flex/AIR开发环境之Intellij IDEA篇
2010-08-14 12:39 10907搭建过程如下: 1. 安装 Intellij IDEA ...
相关推荐
安卓Android源码——ProgressBar几乎全部的用法.zip
安卓Android源码——ProgressBar 几乎全部的用法.zip
安卓Android源码——(ProgressBar进度条).zip
android studio创建android项目(10)——ProgressBar的使用-附件资源
////if (progressBar1.Minimum + length >progressBar1.Value++) ////{ //// progressBar1.Minimum = 0; ////} ////else ////{ //// progressBar1.Minimum += length; ////} //int length = 10; //if ...
安卓Android源码——(ProgressBar进度条).rar
ProgressBar是Android系统中一个重要的UI控件,用于展示任务的进度状态,比如数据加载、文件下载等。在Android开发中,正确理解和使用...在实际项目中,可以根据需求进行个性化定制,打造出独特的进度条效果。
npm i @delowar/react-circle-progressbar 或纱线: yarn add @delowar/react-circle-progressbar 用法与范例 import React from 'react' ; import Progress from '@delowar/react-circle-progressbar' ; // Basic...
自定义progressdialog——带倒计时的progressbar效果,详见博客:http://blog.csdn.net/pds574834424/article/details/46438671
本文将深入探讨如何实现一个“监听加载结果并且带ProgressBar的WebView”,并教你如何利用它来加载网页。 首先,让我们了解WebView的基本用法。WebView是Android SDK中的一个类,位于`android.webkit`包下,它提供...
Indeterminate ProgressBar,通常被称为无限进度条,是一种在用户界面中表示任务正在进行但无法确定剩余时间的进度指示器。在Android开发中,`IndeterminateProgressBar`是Android SDK提供的一种控件,用于显示不...
在C#编程中,进度条(ProgressBar)是一个非常常见的控件,它用于向用户显示某个操作的进度,比如文件上传、下载、计算等长时间运行的任务。...通过不断实践和学习,你可以创建出更加丰富和个性化的进度条效果。
www.mars-droid.com/Android开发视频教程ProgressBar 进度条 代码 源码 mars老师讲课 android 视频源码 (在此特别感谢mars的无私奉献,此代码为跟随视频边学边做的)
在Android开发中,`ProgressBar`是一个非常常见的组件,它用于展示任务执行的进度,比如文件下载、上传或者网络请求等。本教程将深入探讨如何利用`Handler`消息机制来实现`ProgressBar`的动态更新,展示进度条中进度...
在Android开发中,ProgressBar是用户界面(UI)设计中不可或缺的一部分,它用于向用户展示某个操作的进度或等待状态。本资源"AndroidProgressBar_Android ProgressBar进度条的几乎全部的用法源码集.rar"提供了关于...
在Flex4中,ProgressBar组件通过图形化的方式展示数据加载、任务执行等操作的进度。它支持两种模式:确定性(determinate)和不确定性(indeterminate)。确定性进度条显示实际的进度百分比,而不确定性进度条通常...
bootstrap 加载工具条 Progressbar,这是我个人做的一个demo加说明,原官方插件地址:http://www.minddust.com/project/bootstrap-progressbar/
ProgressBar是Windows Forms中的一种控件,用于在执行长时间运行的操作时提供进度反馈。在C#编程环境下,ProgressBar的使用能够显著提升用户体验,因为它允许用户知道程序正在进行后台处理,并且可以看到处理的进度...
ProgressBar是Android系统中的一种UI控件,用于展示进程或任务的执行状态,它通常被用来显示数据加载、文件上传下载、网络请求等操作的进度。"羽哥ProgressBarDemo"应该是一个示例项目,用于演示如何在Android应用中...