自定义进度条，progressBar 背景为.9图片

转自：http://www.maxiaoguo.com/shipin/348.html

解决了我的一个大问题，就是progressBar不能用.9的图片。谢谢。

原文：

今天学习给ProgressBar换个样式，先看效果图：( q/ |( h$ h- }' d- Q& c

原理：在XML文件中分别定义进度条背景、第一进度颜色、第二进度颜色，然后在ProgressBar的android:progressDrawable属性应用即可。 $ X2 S8 d1 i" }2 @  C1 {
先在drawable下建立progressbar_style.xml文件，内容如下：

1. <?xml version="1.0" encoding="UTF-8"?>
   
2. <layer-list
   
3.   xmlns:android="http://schemas.android.com/apk/res/android">
   
4.     <item android:id="@android:id/background">
   
5.         <shape>
   
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" />
   
8.         </shape>
   
9.     </item>
   
10.     <item android:id="@android:id/secondaryProgress">
    
11.         <clip>
    
12.             <shape>
    
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>
    
17.     </item>-
    
18.     <item android:id="@android:id/progress">
    
19.         <clip>
    
20.             <shape>
    
21.                 <corners android:radius="8.0dip" />
    
22.                 <gradient android:startColor="#464647" android:endColor="#2d9ae7" android:angle="270.0" />
    
23.             </shape>
    
24.         </clip>
    
25.     </item>
    
26. </layer-list>

复制代码

分别定义背景，第一进度颜色，第二进度颜色
gradient是渐变，前面已经说过,corners定义的是圆角 9 F% ]: m2 k. W2 ]7 T1 N8 g+ u
布局中：

1. <ProgressBar android:id="@+id/progressBar1" android:layout_width="fill_parent" android:layout_height="wrap_content"' 
   
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 (奶白色)
2.一个进度条的一级进度显示 progress (绿色)
3.一个进度条的二级进度显示 second progress (红色) (这种情况较少使用)  l

效果如下图：

本文将以上三种重要的参数都实现自定义UI。
==============================================================
开始罗，像做菜一样，我们的原料有以下：
* 9.png 共3张，分别是: :
进度条背景 my_progress_bg.9.png;
一级进度条 my_first_progress.9.png; -
二级进度条 my_second_progress.9.png

* /drawable/my_progress.xml 配置文件

1. <!--?xml version="1.0" encoding="utf-8"?-->
   
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">  
   
5.         </nine-patch> 
   
6.     </item> 
   
7.     <item android:id="@android:id/secondaryProgress">
   
8.         <clip>  
   
9.             <nine-patch android:src="@drawable/my_second_progress">  
   
10.             </nine-patch>  
    
11.         </clip>  
    
12.     </item>  
    
13.     <item android:id="@android:id/progress">  
    
14.        <clip>  
    
15.            <nine-patch android:src="@drawable/my_first_progress"> 
    
16.            </nine-patch>  
    
17.        </clip> 
    
18.     </item>
    
19. </layer-list>  

复制代码

* /values/styles.xml

1. <!--?xml version="1.0" encoding="utf-8"?-->  
   
2. <resources>  
   
3.     <!-- learn custom progressbar style -->  
   
4. <style name="MyProgressBarStyleHorizontal">  
   
5.         <item name="android:indeterminateOnly">false</item>  
   
6.         <item name="android:progressDrawable">@drawable/my_progress</item>  
   
7.         <item name="android:minHeight">25dip</item>  
   
8.         <item name="android:maxHeight">25dip</item>  
   
9.         <item name="android:focusable">false</item>  
   
10.     </style>  
11. </resources>  

复制代码

B
好了，到此，我们的原料就都备齐了，下面在一个布局文件中测试一下：

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"> 
   
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.没有透明度 (