- 浏览: 499484 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
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 15431. 使用AIR开发BlackBerry应用前,有几项前提工作 ... -
Adobe Flex/AIR release记要
2011-11-07 14:46 13341. Flex 1) SDK发布 : Flex ... -
Adobe AIR for iOS开发记录
2011-09-28 10:08 0相关资料: Packager for iPhone (官 ... -
自定义AIR mobile应用的样式或皮肤
2011-11-11 14:44 2462环境: Adobe Flash Builder ... -
iOS开发应用记录
2011-09-28 11:09 2201一、iOS应用设计 1. 参 ... -
Flex进阶持续学习——性能优化
2011-09-03 18:03 3124一. 参考资料 Performance-tuning ... -
开发AIR mobile应用时多设备上的显示处理
2011-08-18 18:48 3924移动设备关于显示效果的问题尤其突出,分辨率、屏幕尺寸各异,处理 ... -
Flex进阶持续学习
2011-07-22 16:49 11971. 生命周期 探究 Flex ... -
Adobe AIR for Android开发记录
2011-06-19 22:17 40071. 通过USB直接连接HTC Desire HD调试AIR ... -
Flex基础——事件
2011-03-31 23:08 716事件驱动是Flex的一大特点,初学者一定要先知道这个。 看了 ... -
Flex/AIR个性化——ToolTip
2011-03-31 11:34 1639编写自己的应用时,自定义ToolTip应该是满常用到的。 定 ... -
《Flex_4:开发RIA_应用程序》学习笔记脑图
2011-02-27 23:11 1208准备今年上半年考个Adobe RIA开发工程师认证,有幸觅得考 ... -
Flex/AIR开发记要——代码篇
2011-01-23 16:45 1698一、样式、皮肤相关 1. 自定义ToolTip,详见 ... -
Flex/AIR加载图片的几种方式
2011-01-23 16:43 2327网觅得,略作修改。 代码如下: (以下环境运 ... -
Flex/AIR开发遇到问题记录
2011-01-10 10:15 17601. 2010-11-? Number 对象 toFixed ... -
Flex/AIR开发记要——规范篇
2010-10-22 18:19 1331一、规范、规则 1、命名: 1)文件名(as类名除 ... -
CheckBoxFileSystemTree的实现笔记
2010-09-26 10:05 0关于Tree的相关参考与copy: Flex中Tree组件的 ... -
用Maven构建AIR2项目实践记录
2010-08-28 22:42 2505------------------------------- ... -
用Maven构建Flex4项目实践记录
2010-08-27 14:07 8462------------------------------- ... -
Flex/AIR开发环境之Intellij IDEA篇
2010-08-14 12:39 10886搭建过程如下: 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
Android下ProgressBar和旗下两个子控件的使用,具体可参见博客http://www.cnblogs.com/plokmju/p/android_ProgressBar.html
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
www.mars-droid.com/Android开发视频教程ProgressBar 进度条 代码 源码 mars老师讲课 android 视频源码 (在此特别感谢mars的无私奉献,此代码为跟随视频边学边做的)
Android 进度条ProgressBar。能通过属性控制进度条颜色,文字颜色。下载demo预览:http://fir.im/ProgressBar
bootstrap 加载工具条 Progressbar,这是我个人做的一个demo加说明,原官方插件地址:http://www.minddust.com/project/bootstrap-progressbar/
高度自定义的、支持多种模式的ProgressBar。项目地址:https://github.com/FireZenk/FireZenk-s-ProgressBar 效果图:如何使用:在xml布局文件中创建<com.firezenk.progressbar.FZProgressBar android:id="@ id...
提供 : Flex4 的 进度条ProgressBar 组件实例 ComboBox 实例 NumbericStepper 实例 源码
public static ProgressBar pb_thread; // 显示进度的操作 private TextView tv_pb; // 线程的数量 public static int threadNum = 3; // 每个线程负责下载的大小 public int blockSize; public static ...
Dijit ProgressBar Tests. Test 1. Progress Value Max Progress Value. Test 2. Write here: Small, without text and background image: Show decimal place: Test 3 ...
4.17 后台程序运行进度提示——ProgressBar与Handler的整合应用 4.18 动态文字排版——GridView与ArrayAdapter设计 4.19 在Activity里显示列表列表——ListView的布局 4.20 以动态列表配置选项——ListActivity与...
4.17 后台程序运行进度提示——ProgressBar与Handler的整合应用 4.18 动态文字排版——GridView与ArrayAdapter设计 4.19 在Activity里显示列表列表——ListView的布局 4.20 以动态列表配置选项——ListActivity与...
4.17 后台程序运行进度提示——ProgressBar与Handler的整合应用 4.18 动态文字排版——GridView与ArrayAdapter设计 4.19 在Activity里显示列表列表——ListView的布局 4.20 以动态列表配置选项——ListActivity与...