自定义 ProgressBar 进度条 自定义样式[复制链接]
- 威望
- 33
- 在线时间
- 31 小时
- 金钱
- 443
- 贡献
- 10
- 诚信度
- 0
- 最后登录
- 2013-10-17
- 注册时间
- 2010-12-19
- 主题
- 146
- 帖子
- 181
- 精华
- 14
- 积分
- 271
- 阅读权限
- 90
- UID
- 4
  
- 威望
- 33
- 金钱
- 443
- 诚信度
- 0
- 最后登录
- 2013-10-17
- 注册时间
- 2010-12-19
- 帖子
- 181
- 精华
- 14
- 积分
- 271
- UID
- 4
|
今天学习给ProgressBar换个样式,先看效果图:2 i# R: h/ J- }' g& |/ ^- e $ W2 n: s! C+ k3 j9 f- w原理:在XML文件中分别定义进度条背景、第一进度颜色、第二进度颜色,然后在ProgressBar的android:progressDrawable属性应用即可。 ' U+ U, _( C9 }3 _* I! t8 i先在drawable下建立progressbar_style.xml文件,内容如下:
- <?xml version="1.0" encoding="UTF-8"?>, U4 L2 s; X: Q# D. F- b6 F% s% B
- <layer-list5 b; K5 B' w- Y* M. I: ^
- xmlns:android="http://schemas.android.com/apk/res/android"> ! _- T, L5 _ l9 m6 ?( X2 Q
- <item android:id="@android:id/background"> h9 W3 e. U5 U2 S- j; d
- <shape>" F, t5 m i( c# Q6 [+ P
- <corners android:radius="5.0dip" />. V- @, I1 d& X
- <gradient android:startColor="#656666" android:endColor="#dbdedf" android:angle="270.0" android:centerY="0.75" android:centerColor="#bbbbbc" />% ?* B7 W6 l" L( c& C e* @0 ^
- </shape> 9 j! C& M; a& @' l7 n8 K/ c. {
- </item> 4 c% B9 A: [' O& [5 Z
- <item android:id="@android:id/secondaryProgress"> k1 ^$ i# A- ^
- <clip>. Z: |7 Z! ]- O1 E9 H
- <shape> 0 [0 ?$ q3 p4 X2 O3 F: h c( ?
- <corners android:radius="8.0dip" />2 Y" d; s" z2 C% w; m
- <gradient android:startColor="#e71a5e" android:endColor="#6c213a" android:angle="90.0" android:centerY="0.75" android:centerColor="#ac6079" /> 8 L: G8 ~" Y& b
- </shape>* U, @+ ?$ e; j" z2 b+ g4 p. n
- </clip>/ g/ [( Z* o. T0 N9 T9 i
- </item> ; T5 s3 s% t) y: J. M
- <item android:id="@android:id/progress"> 2 o5 X8 m/ s/ A
- <clip> ' Y% X8 A, d8 A
- <shape> % z( H. b/ V5 w9 @+ @, ~% o
- <corners android:radius="8.0dip" />' g/ S9 \% K0 X2 D3 K- J
- <gradient android:startColor="#464647" android:endColor="#2d9ae7" android:angle="270.0" /> , t. q0 K. `8 r: E% e
- </shape> 2 q& s* ]/ I, a/ f2 i% ~
- </clip> ( `7 S% w( _! Z( D1 F
- </item>% r$ h- P1 z& F, E
- </layer-list>
复制代码
分别定义背景,第一进度颜色,第二进度颜色+ a( \9 e& S6 c gradient是渐变,前面已经说过,corners定义的是圆角 $ m. o2 o8 s4 C8 s% T布局中:
- <ProgressBar android:id="@+id/progressBar1" android:layout_width="fill_parent" android:layout_height="wrap_content" 2 S/ r1 y% B; O& U. `: z. l6 E4 E! G
- style="?android:attr/progressBarStyleHorizontal" android:progressDrawable="@drawable/progressbar_style"6 B8 C; s# _4 t0 z) {& @1 W0 R w
- android:progress="50" android:max="100" android:secondaryProgress="70"+ [" A5 _4 }2 u1 e# O% }# {. c- C6 ~
- ></ProgressBar>
复制代码
|
|
|
|
|
|
|
- 威望
- 33
- 在线时间
- 31 小时
- 金钱
- 443
- 贡献
- 10
- 诚信度
- 0
- 最后登录
- 2013-10-17
- 注册时间
- 2010-12-19
- 主题
- 146
- 帖子
- 181
- 精华
- 14
- 积分
- 271
- 阅读权限
- 90
- UID
- 4
  
- 威望
- 33
- 金钱
- 443
- 诚信度
- 0
- 最后登录
- 2013-10-17
- 注册时间
- 2010-12-19
- 帖子
- 181
- 精华
- 14
- 积分
- 271
- UID
- 4
|
首先,了解 android 进度条的接口:# G8 V" X& T, h( H& A4 n 1.一个进度条背景 background (奶白色)  % t1 u2 ~9 o& G9 D 2.一个进度条的一级进度显示 progress (绿色)  6 n7 Y) G2 {* T' Z 3.一个进度条的二级进度显示 second progress (红色)  (这种情况较少使用) 6 E( P- A/ {: K' V3 t' | , y# B9 x ~1 }# E( F1 Y效果如下图: ; [6 q) d: i, A. m" P6 u) R 
本文将以上三种重要的参数都实现自定义UI。 3 `( {3 N2 C5 m3 \7 o6 Q5 |============================================================== : J& m. M/ _- U% D开始罗,像做菜一样,我们的原料有以下: 7 Z2 [7 p- |( b* T1 X7 B* 9.png 共3张,分别是: {; e! j) X% W; Y+ L Q+ W8 V 进度条背景 my_progress_bg.9.png;8 C/ D! x6 {: h: w2 [1 X% W K8 R$ s; W 一级进度条 my_first_progress.9.png; * _/ k- n* p3 d二级进度条 my_second_progress.9.png
* /drawable/my_progress.xml 配置文件
- <!--?xml version="1.0" encoding="utf-8"?--> 5 `5 E& O$ m8 k) ]4 J, y) N( ^* y
- <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> ; O$ q, S1 E- e3 E) B' N- N
- <item android:id="@android:id/background"> 1 P# O Q) C% E- u/ s' G# {+ M
- <nine-patch android:src="@drawable/my_progress_bg"> . K, w R5 e& B( R
- </nine-patch> 4 g! @. F* \- }$ f8 Q8 @
- </item> - O# U) z/ N i5 j
- <item android:id="@android:id/secondaryProgress"> + m. T9 n5 T3 { P5 j. p9 Y
- <clip> $ R* q1 P7 a& `1 Z1 G
- <nine-patch android:src="@drawable/my_second_progress"> ' Q; C9 t4 a4 E4 A( ~% m# ?1 n
- </nine-patch> 4 L( R. M+ i$ A- P, }* E1 O9 b7 R% e
- </clip> 4 X) K# t8 c' z( p- x2 P. {
- </item> ; A* a% Y/ ?) A+ _- U. b" {1 b8 H
- <item android:id="@android:id/progress"> & c* r; G- B( t: l) F# S+ g
- <clip> : J3 |6 G4 A5 h3 y
- <nine-patch android:src="@drawable/my_first_progress"> ' o. B0 D; [2 d2 {+ P* `' b
- </nine-patch> 2 y0 w6 f: ~: R) I3 j8 l
- </clip> - v6 Y! E- O& g6 ~" |3 U; W
- </item> 3 x s: _3 p3 z
- </layer-list>
复制代码
9 w2 H0 w( s' E& y * /values/styles.xml
- <!--?xml version="1.0" encoding="utf-8"?--> & u6 j! V9 r. ?* D7 ^" Y7 _
- <resources> 4 k& L& ^4 ]. G a
- <!-- learn custom progressbar style --> 7 ]. ~9 Y' I1 Y5 v" f# a
- <style name="MyProgressBarStyleHorizontal"> - m$ s+ Y1 h2 r4 Y
- <item name="android:indeterminateOnly">false</item> 3 M& z4 z! p1 o' ~0 c) b& Y
- <item name="android:progressDrawable">@drawable/my_progress</item> - B, j- s; e( `' @1 ^! i
- <item name="android:minHeight">25dip</item> ( S3 N6 [; W2 Q+ g7 k
- <item name="android:maxHeight">25dip</item> / [ g5 J: a/ K- {- h* z
- <item name="android:focusable">false</item> - s7 R0 ?' H; U
- </style> ! G" V5 a9 B4 P& H0 I2 b0 L$ |/ A
- # L; m. z: H2 @# z" R! ^; _( N
- </resources>
复制代码
: Q( A3 }3 [- J' a 4 A- | E$ g/ ^+ U1 j. l% q 好了,到此,我们的原料就都备齐了,下面在一个布局文件中测试一下:5 V3 @' z3 n) x$ H- v: @; P
- <!--?xml version="1.0" encoding="utf-8"?--> + s, s. M" F& i; j" [
- <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> 5 x" }: { S" F3 R P& J' C7 ~8 s& e
- <progressbar android:max="100" android:id="@+id/MyProgressBar" android:progress="20" style="@style/MyProgressBarStyleHorizontal" android:layout_width="200dip" android:layout_height="23dip" android:secondaryprogress="80" android:layout_gravity="center"> $ T; |' I% h3 x' t# Z
- </progressbar></linearlayout>
复制代码
看起来很丑的原因: 7 B- w9 ]- n+ a1.没有圆角 6 n" J5 e1 U) [5 N2.没有透明度 \ h1 z, o# l5 `8 \& o |
|
- [Android UI] ProgressBar自定义
转载自:http://gundumw100.iteye.com/blog/1289348 1: 在JAVA代码中 在java代码中 ProgressBar 继承自View, 在android ...
- android progressbar 自定义图片匀速旋转
项目中需要使用圆形进度条进行数据加载的显示,所以需要两个步骤 1:自定义progressbar滚动图片 2:匀速旋转图片 步骤一:自定义progressbar图片 <ProgressBar an ...
- Android progressBar 自定义圆形旋转图片
项目需要中需要更换progressbar的旋转背景,在网上找了几种办法,但是都有各自的问题 于是结合网上所讲,研究了一下终于ok了: 一 首相在drawable文件夹中建立如下旋转动画文件 <? ...
- android ProgressBar 进度条的进度两端是圆角的方法
转自 http://www.jianshu.com/p/6e7ea842d5ce 另外工作原理可以参考http://blog.csdn.net/lan603168/article/details/44 ...
- WPF,Silverlight与XAML读书笔记第四十五 - 外观效果之模板
说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 模板允许用任何东西完全替换一个元素的可视树, ...
- android 自定义Style初探---ProgressBar
系统自带的ProgressBar太丑了,所以我决定自定义一个Style. 原来的Style <?xml version="1.0" encoding="utf-8& ...
- Android ProgressBar分析及自定义ProgressBar
ProgressBar是在执行耗时操作时的一种人性化设计.分为两种形式:转圈的,能显示进度的. 而能取决于是什么样式的PregressBar,当然就是PregressBar的样式啦~ Widget.P ...
- Android简单自定义圆形和水平ProgressBar
ProgressBar简介 继承于View类,直接子类有AbsSeekBar和ContentLoadingProgressBar,其中AbsSeekBar的子类有SeekBar和RatingBar,可 ...
- ProgressBar 示例及自定义样式
在layout中使用ProgerssBar,其中使用了自定义的样式 <ProgressBar android:id="@+id/footer_refresh_prgs" st ...
随机推荐
- django中外键关联表的查询随笔
django中,如果一个数据库中的表之间有外键的话可以方便的通过一个表查询到其相关表的数据.如有下面三个model:class Blog(models.Model): name = models ...
- CV牛人牛事简介之一
CV牛人牛事简介之一 [论坛按] 发帖人转载自:http://doctorimage.cn/2013/01/01/cv-intro-niubility/#6481970-qzone-1-83120-8 ...
- 关于对js的this的几点理解
四种不同模式小调用的指向 1.函数调用模式的时候,this指向window 2.方法调用模式的时候,this指向方法所在的对象 3.构造函数模式的时候,this指向新生成的实例 4.apply/cal ...
- Javascript事件绑定的几种方式
Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...
- windows 安装mysql的时候最后执行一直停留在Write configuration file
出现原因:MySQL安装路径出现中文,特殊字符.或是重新安装MySQL后经常遇到.前者是路径不允许出现中文名称,后者是由于卸载不干净. 我就是因为重新安装了MySQL,卸载不干净,才会导致之后这个错误 ...
- loadrunner 怎么能得到返回的http状态?
loadrunner如何保存从服务器传回来的http头的信息? Action() { int HttpRetCode; web_url("www.hao123.com", &quo ...
- Ubuntu14.04下如何开启Mysql远程访问
近来开发项目的需要,需要开启服务器下的Mysql远程访问权限(方法有很多),学习了一下,这里只演示个人觉得比较简单的一种方法. 对用户授权方法: 1. 在目录/etc/mysql下找到my.cnf,用 ...
- 很受欢迎的Linux笔记(短小精悍)
http://blog.csdn.net/xsl1990/article/details/8274028 如何知道所使用的LINUX是哪个发行版? lsb_release -a 查找某个文件的另类方法 ...
- Android自定义属性时format选项可以取用的值
1. reference:参考某一资源ID. (1)属性定义: <declare-styleable name="名称"> <attr format=" ...
- Android 三档自定义滑动开关,禁止点击功能的实现,用默认的seekbar组件实现
android三档自定义滑动开关,禁止点击功能的实现,普通开关网上有很多例子,三档滑动开关的则找了整天都没有相关例子,开始用普通开关的源码修改了自己实现了一个类,但效果不如人意,各种边界情况的算法很难 ...