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

今天学习给ProgressBar换个样式，先看效果图：


.
n9 u9 |" a2 \/ i# Z

原理：在XML文件中分别定义进度条背景、第一进度颜色、第二进度颜色，然后在ProgressBar的android:progressDrawable属性应用即可。

先在drawable下建立progressbar_style.xml文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>

<layer-list8 n$ d" H/ X1 a& Y

xmlns:android="http://schemas.android.com/apk/res/android">; ~# C1 {. T8 r8 Q6 q; n

<item android:id="@android:id/background">: C- P1 H7 O' C9 Z- t

<shape>5 { N( f% U" `2 y' f1 _7 h7 o) S

<corners android:radius="5.0dip" />

<gradient android:startColor="#656666" android:endColor="#dbdedf" android:angle="270.0" android:centerY="0.75" android:centerColor="#bbbbbc" /># E5 ~ ^% V%
}4 d/ D

</shape>8 w. m$ v8 |! ~' j- S% _, D4 l

</item>

<item android:id="@android:id/secondaryProgress">7 S, C# D, i1 T1 F; ~$ N% K, \6 g

<clip>

<shape>$ x! M$ |+ f1 C L5 C1 r

<corners android:radius="8.0dip" />

<gradient android:startColor="#e71a5e" android:endColor="#6c213a" android:angle="90.0" android:centerY="0.75" android:centerColor="#ac6079" />

</shape>

</clip>, P" p- o- k$ m! w1 l' F! K

</item>+ M$ t% ] y4 f; r k

<item android:id="@android:id/progress">$ w9 f X$ |7 x o

<clip>- h8 H: G1 J; ?6 L3 U$ p

<shape>

<corners android:radius="8.0dip" />

<gradient android:startColor="#464647" android:endColor="#2d9ae7" android:angle="270.0" />. A/ V1 P! y* T

</shape>0 W/ t: P1 I) |5 g2 V

</clip>7 S; D% Y# n! Z0 |, X

</item>

</layer-list>

复制代码
分别定义背景，第一进度颜色，第二进度颜色%
T* t$ e0 b8 P

gradient是渐变，前面已经说过,corners定义的是圆角

布局中：

<ProgressBar android:id="@+id/progressBar1" android:layout_width="fill_parent" android:layout_height="wrap_content"* m7 n& r- K u! c: y# _9 }

style="?android:attr/progressBarStyleHorizontal" android:progressDrawable="@drawable/progressbar_style"

android:progress="50" android:max="100" android:secondaryProgress="70"

></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
[align=left]* /drawable/my_progress.xml 配置文件[/align]

<!--?xml version="1.0" encoding="utf-8"?--> 2 O) i3 ]' y( B0 b" X* d/ T

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@android:id/background">

<nine-patch android:src="@drawable/my_progress_bg"> 8 |% o6 L7 U; M" [3 w2 |7 O* |

</nine-patch> * G7 A1 J. }. V0 `

</item> 5 D# T7 J6 O, h/ j$ e7 z

<item android:id="@android:id/secondaryProgress"> : g% }; F* Z7 M: x. U- t/ Q0 @

<clip> 6 ~& B: B! a# k9 ~; ?/ c! e

<nine-patch android:src="@drawable/my_second_progress"> 9 V+ Z9 O8 }+ }; \1 Q7 d

</nine-patch> . F2 G& b6 P/ u- [7 E6 r j' Q

</clip>

</item>

<item android:id="@android:id/progress">

<clip>

<nine-patch android:src="@drawable/my_first_progress"> 5 u: \5 \2 c2 H( W1 j

</nine-patch>

</clip> : ]' s4 g ?* O/ w

</item>

</layer-list>

复制代码

* /values/styles.xml

<!--?xml version="1.0" encoding="utf-8"?--> 5 s- Q8 o# A4 V$ ~, Q* ]

<resources> . f3 L) X% D( q' A0 D, P+ a

<!-- learn custom progressbar style --> ( i; k! q8 |; C9 j2 q) h

<style name="MyProgressBarStyleHorizontal"> # U" c/ P8 i0 z9 d" M7 I7 F1 M# D

<item name="android:indeterminateOnly">false</item>

<item name="android:progressDrawable">@drawable/my_progress</item>

<item name="android:minHeight">25dip</item> . `/ O/ m6 b% d9 i

<item name="android:maxHeight">25dip</item>

<item name="android:focusable">false</item> ' j$ W7 B. y% N4 d9 u9 b& P

</style>

</resources>

复制代码
. |( C& F0 O$ U

" U& a. s- i( m; r7 C

好了，到此，我们的原料就都备齐了，下面在一个布局文件中测试一下：3
y$ Q- C m, y6 L$ E

<!--?xml version="1.0" encoding="utf-8"?-->

<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

<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">

</progressbar></linearlayout>

复制代码
看起来很丑的原因：

1.没有圆角

2.没有透明度

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