自定义 ProgressBar 进度条 自定义样式

今天学习给ProgressBar换个样式，先看效果图：
. n9 u9 |" a2 \/ i# Z
原理：在XML文件中分别定义进度条背景、第一进度颜色、第二进度颜色，然后在ProgressBar的android:progressDrawable属性应用即可。
先在drawable下建立progressbar_style.xml文件，内容如下：

1. <?xml version="1.0" encoding="UTF-8"?>
   
2. <layer-list8 n$ d" H/ X1 a& Y
   
3.   xmlns:android="http://schemas.android.com/apk/res/android">; ~# C1 {. T8 r8 Q6 q; n
   
4.     <item android:id="@android:id/background">: C- P1 H7 O' C9 Z- t
   
5.         <shape>5 {  N( f% U" `2 y' f1 _7 h7 o) S
   
6.             <corners android:radius="5.0dip" />
   
7.             <gradient android:startColor="#656666" android:endColor="#dbdedf" android:angle="270.0" android:centerY="0.75" android:centerColor="#bbbbbc" /># E5 ~  ^% V% }4 d/ D
   
8.         </shape>8 w. m$ v8 |! ~' j- S% _, D4 l
   
9.     </item>
   
10.     <item android:id="@android:id/secondaryProgress">7 S, C# D, i1 T1 F; ~$ N% K, \6 g
    
11.         <clip>
    
12.             <shape>$ x! M$ |+ f1 C  L5 C1 r
    
13.                 <corners android:radius="8.0dip" />
    
14.                 <gradient android:startColor="#e71a5e" android:endColor="#6c213a" android:angle="90.0" android:centerY="0.75" android:centerColor="#ac6079" />
    
15.             </shape>
    
16.         </clip>, P" p- o- k$ m! w1 l' F! K
    
17.     </item>+ M$ t% ]  y4 f; r  k
    
18.     <item android:id="@android:id/progress">$ w9 f  X$ |7 x  o
    
19.         <clip>- h8 H: G1 J; ?6 L3 U$ p
    
20.             <shape>
    
21.                 <corners android:radius="8.0dip" />
    
22.                 <gradient android:startColor="#464647" android:endColor="#2d9ae7" android:angle="270.0" />. A/ V1 P! y* T
    
23.             </shape>0 W/ t: P1 I) |5 g2 V
    
24.         </clip>7 S; D% Y# n! Z0 |, X
    
25.     </item>
    
26. </layer-list>

复制代码

分别定义背景，第一进度颜色，第二进度颜色 % T* t$ e0 b8 P
gradient是渐变，前面已经说过,corners定义的是圆角

布局中：

1. <ProgressBar android:id="@+id/progressBar1" android:layout_width="fill_parent" android:layout_height="wrap_content"* m7 n& r- K  u! c: y# _9 }
   
2. style="?android:attr/progressBarStyleHorizontal" android:progressDrawable="@drawable/progressbar_style"
   
3. android:progress="50" android:max="100" android:secondaryProgress="70"
   
4. ></ProgressBar>

首先，了解 android 进度条的接口:
1.一个进度条背景 background (奶白色) 9 L; {# Y6 u2 R) p# T: R$ B$ F
2.一个进度条的一级进度显示 progress (绿色)
3.一个进度条的二级进度显示 second progress (红色)  (这种情况较少使用)
% x/ w. ?, O: ~; O0 `8 ]
效果如下图：

本文将以上三种重要的参数都实现自定义UI。
============================================================== 0 _! J. J$ W  w3 \
开始罗，像做菜一样，我们的原料有以下： 8 y0 I* j% i% K3 g8 Q* M
* 9.png 共3张，分别是: 4 P$ O4 q- ~5 e( z* j
进度条背景 my_progress_bg.9.png; 4 K2 [* Q: o# t- F1 v) I* p
一级进度条 my_first_progress.9.png; 7 O+ I- K2 O7 n/ m0 J+ M
二级进度条 my_second_progress.9.png

* /drawable/my_progress.xml 配置文件

1. <!--?xml version="1.0" encoding="utf-8"?-->  2 O) i3 ]' y( B0 b" X* d/ T
   
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
   
3.     <item android:id="@android:id/background">  
   
4.         <nine-patch android:src="@drawable/my_progress_bg">  8 |% o6 L7 U; M" [3 w2 |7 O* |
   
5.         </nine-patch>  * G7 A1 J. }. V0 `
   
6.     </item>  5 D# T7 J6 O, h/ j$ e7 z
   
7.     <item android:id="@android:id/secondaryProgress">  : g% }; F* Z7 M: x. U- t/ Q0 @
   
8.         <clip>  6 ~& B: B! a# k9 ~; ?/ c! e
   
9.             <nine-patch android:src="@drawable/my_second_progress">  9 V+ Z9 O8 }+ }; \1 Q7 d
   
10.             </nine-patch>  . F2 G& b6 P/ u- [7 E6 r  j' Q
    
11.         </clip>  
    
12.     </item>  
    
13.     <item android:id="@android:id/progress">  
    
14.        <clip>  
    
15.            <nine-patch android:src="@drawable/my_first_progress">  5 u: \5 \2 c2 H( W1 j
    
16.            </nine-patch>  
    
17.        </clip>  : ]' s4 g  ?* O/ w
    
18.     </item>  
    
19. </layer-list>  

复制代码

* /values/styles.xml

1. <!--?xml version="1.0" encoding="utf-8"?-->  5 s- Q8 o# A4 V$ ~, Q* ]
   
2. <resources>  . f3 L) X% D( q' A0 D, P+ a
   
3.     <!-- learn custom progressbar style -->  ( i; k! q8 |; C9 j2 q) h
   
4. <style name="MyProgressBarStyleHorizontal">  # U" c/ P8 i0 z9 d" M7 I7 F1 M# D
   
5.         <item name="android:indeterminateOnly">false</item>  
   
6.         <item name="android:progressDrawable">@drawable/my_progress</item>  
   
7.         <item name="android:minHeight">25dip</item>  . `/ O/ m6 b% d9 i
   
8.         <item name="android:maxHeight">25dip</item>  
   
9.         <item name="android:focusable">false</item>  ' j$ W7 B. y% N4 d9 u9 b& P
   
10.     </style>  
    
11.   
    
12. </resources>  

复制代码

. |( C& F0 O$ U
" U& a. s- i( m; r7 C
好了，到此，我们的原料就都备齐了，下面在一个布局文件中测试一下： 3 y$ Q- C  m, y6 L$ E

1. <!--?xml version="1.0" encoding="utf-8"?-->  
   
2. <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">  * B, G3 D8 Y+ g1 Y3 r: I
   
3.     <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">  
   
4. </progressbar></linearlayout>  

复制代码

看起来很丑的原因：
1.没有圆角
2.没有透明度

转自：http://www.lephone.net/thread-4186-1-1.html