Android ProgressBar 样式实现原理

做过Android开发的同学应该都不会对这个控件陌生。主要是用来实现处理或加载进度的显示或者提示用户正在处理或加载数据。

基本来说就两种情况，一种是转圈的小菊花，一种是水平的进度条。

默认情况下ProgressBar是圆形的那种，如果你要设置成水平状的，需要加入style

Java代码  

1. style="?android:attr/progressBarStyleHorizontal"  

这两种形式的默认效果都不是很理想，个人认为Google的UI真的是丑到家了，不知道3.0之前是不是没有请UI呢？开个玩笑...

 

下面我们来看看ProgressBar中的style。通过style来简单分析下ProgressBar

首先在你的工程的res/values/styles.xml文件中加入下面的代码：

Java代码  

1. <style   
2.         name="test" parent="@android:style/Widget.ProgressBar">  
3. </style>  

 这只是为了方便你查看源码而已（我使用的是Eclipse，鼠标移到Widget.ProgressBar上，按下ctrl键即可），如果你的IDE看不到源码，也没有关系，你可以直接到源码的目录下找到这个style(比如我的sdk目录)：

 

E:\androidSDK\sdk\platforms\android-7\data\res\values\styles.xml

 

然后找到“Widget.ProgressBar”即可：

Java代码  

1. <style name="Widget.ProgressBar">  
2.         <item name="android:indeterminateOnly">true</item>  
3.         <item name="android:indeterminateDrawable">@android:drawable/progress_medium_white</item>  
4.         <item name="android:indeterminateBehavior">repeat</item>  
5.         <item name="android:indeterminateDuration">3500</item>  
6.         <item name="android:minWidth">48dip</item>  
7.         <item name="android:maxWidth">48dip</item>  
8.         <item name="android:minHeight">48dip</item>  
9.         <item name="android:maxHeight">48dip</item>  
10.     </style>  
11.   
12. <style name="Widget.ProgressBar.Horizontal">  
13.         <item name="android:indeterminateOnly">false</item>  
14.         <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>  
15.         <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>  
16.         <item name="android:minHeight">20dip</item>  
17.         <item name="android:maxHeight">20dip</item>  
18.     </style>  

 我把其中的Widget.ProgressBar和Widget.ProgressBar.Horizontal拿出来给大家看看。

indeterminate意思是“模糊的，不明确的”，而 android:indeterminateOnly这个属性如果设置为true，表示的是这个ProgressBar是模糊的，不明确的，也就是说，当前它并没有体现出具体的进度，只是一个小菊花在转（Widget.ProgressBar默认这个属性设置为true），对于水平ProgressBar的话，如果设置为true，则出现一个默认的加载的动画，即android:indeterminateDrawable中设置的

progress_indeterminate_horizonta.xml：

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <animation-list  
3.         xmlns:android="http://schemas.android.com/apk/res/android"  
4.         android:oneshot="false">  
5.     <item android:drawable="@drawable/progressbar_indeterminate1" android:duration="200" />  
6.     <item android:drawable="@drawable/progressbar_indeterminate2" android:duration="200" />  
7.     <item android:drawable="@drawable/progressbar_indeterminate3" android:duration="200" />  
8. </animation-list>  

这里面就是 3张这样的图片，在循环播放：

 

在布局文件中设置：

Java代码  

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     tools:context=".MainActivity"  
6.     android:background="#ffffff" >  
7.       
8.     <!-- 圆形的progressBar -->  
9.     <ProgressBar  
10.         android:id="@+id/pb_circle"  
11.         android:layout_width="wrap_content"  
12.         android:layout_height="wrap_content"  
13.         android:layout_marginTop="30dip"  
14.         android:layout_centerHorizontal="true"  
15.         />  
16.   
17.     <!-- 水平的progressBar  android:indeterminateOnly="true"-->  
18.     <ProgressBar  
19.         android:id="@+id/pb_horizontal"  
20.         android:layout_width="wrap_content"  
21.         android:layout_height="wrap_content"  
22.         android:layout_centerHorizontal="true"  
23.         android:layout_below="@+id/pb_circle"  
24.         android:layout_marginTop="30dip"  
25.         style="?android:attr/progressBarStyleHorizontal"  
26.         android:progress="50"  
27.         android:secondaryProgress="60"  
28.         android:minWidth="200dip"  
29.         android:indeterminateOnly="true"  
30.         />  
31.       
32. </RelativeLayout>  

  效果如下：

 

 上面的水平ProgressBar中还设置了android:progress="50"和android:secondaryProgress="60"这两个属性，但是不起作用。这是因为我们设置了android:indeterminateOnly="true"

这个时候我们通常会想到在java代码中去将这个值设置为false，然后再设置进度progress，可是我并没有发现有这样的方法，查阅了sdk文档也没有发现，后来发现了有人利用了反射可已将源码中的mOnlyIndeterminate字段设置为false，这就达到了我们的目的了：

 

BeanUtils.java:

Java代码  

1. public class BeanUtils {     
2.     private BeanUtils() {     
3.     
4.     }     
5.     
6.     /**   
7.      * 直接设置对象属性值,无视private/protected修饰符,不经过setter函数.   
8.      */    
9.     public static void setFieldValue(final Object object, final String fieldName, final Object value) {     
10.         Field field = getDeclaredField(object, fieldName);     
11.         if (field == null)     
12.             throw new IllegalArgumentException("Could not find field [" + fieldName + "] on target [" + object + "]");     
13.         makeAccessible(field);     
14.         try {     
15.             field.set(object, value);     
16.         } catch (IllegalAccessException e) {     
17.         Log.e("got exception:", "", e);     
18.         }     
19.     }     
20.     
21.     /**   
22.      * 循环向上转型,获取对象的DeclaredField.   
23.      */    
24.     protected static Field getDeclaredField(final Object object, final String fieldName) {     
25.         return getDeclaredField(object.getClass(), fieldName);     
26.     }     
27.     
28.     /**   
29.      * 循环向上转型,获取类的DeclaredField.   
30.      */    
31.     @SuppressWarnings("unchecked")     
32.     protected static Field getDeclaredField(final Class clazz, final String fieldName) {     
33.         for (Class superClass = clazz; superClass != Object.class; superClass = superClass.getSuperclass()) {     
34.             try {     
35.                 return superClass.getDeclaredField(fieldName);     
36.             } catch (NoSuchFieldException e) {     
37.                 // Field不在当前类定义,继续向上转型     
38.             }     
39.         }     
40.         return null;     
41.     }     
42.     
43.     /**   
44.      * 强制转换fileld可访问.   
45.      */    
46.     protected static void makeAccessible(Field field) {     
47.         if (!Modifier.isPublic(field.getModifiers()) || !Modifier.isPublic(field.getDeclaringClass().getModifiers())) {     
48.             field.setAccessible(true);     
49.         }     
50.     }  
51.   
52. }    

 

 MainActivity.java:

Java代码  

1. Timer timer = new Timer();  
2.         timer.schedule(new TimerTask()  
3.         {  
4.   
5.             @Override  
6.             public void run()   
7.             {  
8.                 //执行的内容  
9.                   
10.                 BeanUtils.setFieldValue((Object)pbHorizontal, "mOnlyIndeterminate", (Object)Boolean.valueOf(false));  
11.                 pbHorizontal.setIndeterminate(false);    
12.                 pbHorizontal.setProgress(50);  
13.                 pbHorizontal.setSecondaryProgress(60);  
14.             }  
15.               
16.         }, 3000);//表示3秒后执行  

 效果如下：

 

 

这样我们就可以实现：在正在加载数据之前显示默认的动画，而在加载数据的时候显示具体的进度。

 

 

 还是存在这样一个大问题，那就是默认的ProgressBar的样式实在不敢恭维，当然通过上面的分析，我们可以很容易地对默认的style进行覆盖。

1.自定义小菊花进度条：

 

通过Widget.ProgressBar中的style的<item name="android:indeterminateDrawable">@android:drawable/progress_medium_white</item>我们去源码中查找：

 progress_medium_white.xml:

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:drawable="@drawable/spinner_white_48"  
4.     android:pivotX="50%"  
5.     android:pivotY="50%"  
6.     android:framesCount="12"  
7.     android:frameDuration="100" />  

 发现spinner_white_48是一张图片：

 

这就很简单了，我们可以替换掉style中默认的android:indeterminateDrawable为自己的drawable就可以了：

1.在res/drawable/indicate.xml:

 

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:drawable="@drawable/indeterminate_progress_1"  
4.     android:pivotX="50%"  
5.     android:pivotY="50%"  
6.      />  

 indeterminate_progress_1就是我们自定义的小菊花图片了

 

 2.然后在布局文件中：

 

Java代码  

1. <!-- 圆形的progressBar -->  
2.     <ProgressBar  
3.         android:id="@+id/pb_circle"  
4.         android:layout_width="wrap_content"  
5.         android:layout_height="wrap_content"  
6.         android:layout_marginTop="30dip"  
7.         android:layout_centerHorizontal="true"  
8.         android:indeterminateDrawable="@drawable/indicate"  
9.         />  

 就这么简单，看了很多人的博客，有的人采用的是10几张图片通过Progressbar进行播放，有的采用一个ImageView对10几张图片进行重复播放或者对一张图片进行旋转，我认为我的这种方式比较好，比较方便，而且只要一张图就够了。

 

 

 

2.自定义水平的ProgressBar：

我们要改变的是Widget.ProgressBar.Horizontal中的drawable/progress_horizontal和drawable/progress_indeterminate_horizontal

drawable/progress_horizontal.xml：

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
3.       
4.     <item android:id="@android:id/background">  
5.         <shape>  
6.             <corners android:radius="5dip" />  
7.             <gradient  
8.                     android:startColor="#ff9d9e9d"  
9.                     android:centerColor="#ff5a5d5a"  
10.                     android:centerY="0.75"  
11.                     android:endColor="#ff747674"  
12.                     android:angle="270"  
13.             />  
14.         </shape>  
15.     </item>  
16.       
17.     <item android:id="@android:id/secondaryProgress">  
18.         <clip>  
19.             <shape>  
20.                 <corners android:radius="5dip" />  
21.                 <gradient  
22.                         android:startColor="#80ffd300"  
23.                         android:centerColor="#80ffb600"  
24.                         android:centerY="0.75"  
25.                         android:endColor="#a0ffcb00"  
26.                         android:angle="270"  
27.                 />  
28.             </shape>  
29.         </clip>  
30.     </item>  
31.       
32.     <item android:id="@android:id/progress">  
33.         <clip>  
34.             <shape>  
35.                 <corners android:radius="5dip" />  
36.                 <gradient  
37.                         android:startColor="#ffffd300"  
38.                         android:centerColor="#ffffb600"  
39.                         android:centerY="0.75"  
40.                         android:endColor="#ffffcb00"  
41.                         android:angle="270"  
42.                 />  
43.             </shape>  
44.         </clip>  
45.     </item>  
46.       
47. </layer-list>  

 这实际上是通过xml来绘制图片，当然你可以以类似的方式来实现自己的效果。

 

progress_indeterminate_horizontal.xml:(这个在前面已经介绍过了)

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <animation-list  
3.         xmlns:android="http://schemas.android.com/apk/res/android"  
4.         android:oneshot="false">  
5.     <item android:drawable="@drawable/progressbar_indeterminate1" android:duration="200" />  
6.     <item android:drawable="@drawable/progressbar_indeterminate2" android:duration="200" />  
7.     <item android:drawable="@drawable/progressbar_indeterminate3" android:duration="200" />  
8. </animation-list>  

 

 

为了图方便，我直接到4.0的源码中，找到这个文件直接拿出来用，这样你就可以在4.0及以下的系统中看到4.0ProgressBar的效果了：

1.布局文件中：

Java代码  

1. <ProgressBar  
2.         android:id="@+id/pb_horizontal"  
3.         android:layout_width="fill_parent"  
4.         android:layout_height="wrap_content"  
5.         android:layout_marginLeft="50dip"  
6.         android:layout_marginRight="50dip"  
7.         android:layout_centerHorizontal="true"  
8.         android:layout_below="@+id/pb_circle"  
9.         android:layout_marginTop="30dip"  
10.         style="?android:attr/progressBarStyleHorizontal"  
11.         android:progressDrawable="@drawable/pb_layer_list"  
12.         android:indeterminateDrawable="@drawable/bg_progressbar"  
13.         android:indeterminateOnly="true"  
14.         />  

 

2.res/drawable/pb_layout_list.xml:

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4.     <item android:id="@android:id/background"  
5.           android:drawable="@drawable/progress_bg_holo_dark" />  
6.   
7.     <item android:id="@android:id/secondaryProgress">  
8.         <scale android:scaleWidth="100%"  
9.                android:drawable="@drawable/progress_secondary_holo_dark" />  
10.     </item>  
11.   
12.     <item android:id="@android:id/progress">  
13.         <scale android:scaleWidth="100%"  
14.                android:drawable="@drawable/progress_primary_holo_dark" />  
15.     </item>  
16.   
17. </layer-list>  

 

 

3.res/drawable/bg_progressbar.xml:

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <animation-list  
3.         xmlns:android="http://schemas.android.com/apk/res/android"  
4.         android:oneshot="false">  
5.     <item android:drawable="@drawable/progressbar_indeterminate_holo1" android:duration="200" />  
6.     <item android:drawable="@drawable/progressbar_indeterminate_holo2" android:duration="200" />  
7.     <item android:drawable="@drawable/progressbar_indeterminate_holo3" android:duration="200" />  
8.     <item android:drawable="@drawable/progressbar_indeterminate_holo4" android:duration="200" />  
9.     <item android:drawable="@drawable/progressbar_indeterminate_holo5" android:duration="200" />  
10.     <item android:drawable="@drawable/progressbar_indeterminate_holo6" android:duration="200" />  
11.     <item android:drawable="@drawable/progressbar_indeterminate_holo7" android:duration="200" />  
12.     <item android:drawable="@drawable/progressbar_indeterminate_holo8" android:duration="200" />  
13. </animation-list>  

 

相应的图片文件你都可以在源码中找到。下面我们看看自定义后的运行效果：

 

 

 信息量有点大，希望大家能够看的懂，如果自己能够去尝试一下，应该能够更好地了解。

主要的实现步骤在上面都以红颜色表示出来了。