android 垂直的进度条实现

效果图：

利用TimerTask动态改变滚动条前景色

主要代码如下：

activity_main.xml

[html] view plaincopyprint?

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.     android:gravity="center"  
6.     >  
7.   
8.     <LinearLayout  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:background="@drawable/main_battery_bg"  
12.         android:orientation="horizontal" >  
13.   
14.         <ProgressBar  
15.             android:id="@+id/pb_battery"  
16.             android:layout_width="fill_parent"  
17.             android:layout_height="fill_parent"  
18.             android:indeterminate="false"  
19.             android:indeterminateOnly="false"  
20.             android:progress="0"  
21.             android:progressDrawable="@drawable/main_progress_vertical" />  
22.     </LinearLayout>  
23.   
24. </RelativeLayout>  

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="fill_parent"    android:layout_height="fill_parent"     android:gravity="center"    >    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/main_battery_bg"        android:orientation="horizontal" >        <ProgressBar            android:id="@+id/pb_battery"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:indeterminate="false"            android:indeterminateOnly="false"            android:progress="0"            android:progressDrawable="@drawable/main_progress_vertical" />    </LinearLayout></RelativeLayout>

main_progress_vertical.xml

[html] view plaincopyprint?

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

3. <item android:id="@android:id/background"> （这里设置的是进度条的外观颜色还有呈现的方向等）
           <shape>
               <corners android:radius="5dip" />

               <gradient
                   android:angle="180"
                   android:centerColor="#F6F6F6"
                   android:endColor="#C0C0C0"
                   android:startColor="#C0C0C0"
                   android:type="linear" />
           </shape>
       </item>

4.     <item android:id="@android:id/progress">  （这里设置的是进度的呈现格式，有颜色的过度等，已经进度前进的方向）

1.         <clip  
2.             android:clipOrientation="vertical"  
3.             android:gravity="bottom" >  
4.             <shape>  
5.                 <corners android:radius="5dip" />  
6.   
7.                 <gradient  
8.                     android:angle="180"  
9.                     android:centerColor="#ffffcb00"  
10.                     android:centerY="0.75"  
11.                     android:endColor="#ffffcb00"  
12.                     android:startColor="#ffffcb00" />  
13.             </shape>  
14.         </clip>  
15.     </item>  
16.   
17. </layer-list>  

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:id="@android:id/progress">        <clip            android:clipOrientation="vertical"            android:gravity="bottom" >            <shape>                <corners android:radius="5dip" />                <gradient                    android:angle="180"                    android:centerColor="#ffffcb00"                    android:centerY="0.75"                    android:endColor="#ffffcb00"                    android:startColor="#ffffcb00" />            </shape>        </clip>    </item></layer-list>

main_progress_vertical_warn.xml

[html] view plaincopyprint?

1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
2.   
3.     <item android:id="@android:id/progress">  
4.         <clip  
5.             android:clipOrientation="vertical"  
6.             android:gravity="bottom" >  
7.             <shape>  
8.                 <corners android:radius="5dip" />  
9.   
10.                 <gradient  
11.                     android:angle="180"  
12.                     android:centerColor="#ff0000"  
13.                     android:centerY="0.75"  
14.                     android:endColor="#ff0000"  
15.                     android:startColor="#ff0000" />  
16.             </shape>  
17.         </clip>  
18.     </item>  
19.   
20. </layer-list>  

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:id="@android:id/progress">        <clip            android:clipOrientation="vertical"            android:gravity="bottom" >            <shape>                <corners android:radius="5dip" />                <gradient                    android:angle="180"                    android:centerColor="#ff0000"                    android:centerY="0.75"                    android:endColor="#ff0000"                    android:startColor="#ff0000" />            </shape>        </clip>    </item></layer-list>

MainActivity

[java] view plaincopyprint?

1. import java.util.Timer;  
2. import java.util.TimerTask;  
3.   
4. import android.os.Bundle;  
5. import android.app.Activity;  
6. import android.graphics.drawable.Drawable;  
7. import android.widget.ProgressBar;  
8.   
9. public class MainActivity extends Activity {  
10.   
11.     /** 
12.      * 达到警告线 
13.      */  
14.     public static final int BATTERYWARN = 20;  
15.     private ProgressBar pBar;  
16.     /** 
17.      * 需要改变多少 
18.      */  
19.     private int progressAdd = 0;  
20.     /** 
21.      * 改变是上升还是下降 
22.      */  
23.     private int actionType = 1;  
24.     /** 
25.      * 原来的progress值 
26.      */  
27.     private int progressOld = 0;  
28.     private Timer timer = new Timer();  
29.   
30.     /** 
31.      * 动态改变滚动条的ProgressDrawable 
32.      *  
33.      * @param resId 
34.      *            Drawable资源ID 
35.      */  
36.     private void setProgressDrawable(int resId) {  
37.         Drawable drawable = MainActivity.this.getResources().getDrawable(resId);  
38.         drawable.setBounds(pBar.getProgressDrawable().getBounds());  
39.         /* 设置drawable之后貌似getProgress是从当前的为progress值为起始， 
40.          * 所以注意先取得progress，然后重置progres=0，然后设置drawable， 
41.          * 最后再把原来的progress还原，要不然设置了drawable之后ProgressBar的前景色会消失 
42.          * 这里不会出现这种问题，因为progress始终是变化的，前景色的变化设置drawable也只执行一次 
43.         */  
44.         pBar.setProgressDrawable(drawable);  
45.     }  
46.   
47.     /** 
48.      * 电池滚动条特效 
49.      */  
50.     private TimerTask task = new TimerTask() {  
51.         int add = 0;  
52.   
53.         public void run() {  
54.             try {  
55.                 while (add++ < progressAdd) {  
56.                     int progress = pBar.getProgress() + actionType;  
57.                     progressOld = progress - actionType;  
58.                     if (progress <= BATTERYWARN) {  
59.                         // 初始时 或者 原先的值大于下限(只执行一次动态改变ProgressDrawable)  
60.                         if (progressOld == 0 || progressOld > BATTERYWARN) {  
61.                             setProgressDrawable(R.drawable.main_progress_vertical_warn);  
62.                         }  
63.   
64.                     } else {  
65.                         // 原先的本身比下限小并且有值则还原进度条默认颜色(只执行一次动态改变ProgressDrawable，原来没值时按默认)  
66.                         if (progressOld > 0 && progressOld <= BATTERYWARN) {  
67.                             setProgressDrawable(R.drawable.main_progress_vertical);  
68.                         }  
69.                     }  
70.   
71.                     pBar.setProgress(progress);  
72.                     // 最后一次不用休眠   
73.                     if (add < progressAdd) {  
74.                         Thread.sleep(30);  
75.                     }  
76.                 }  
77.             } catch (InterruptedException e) {  
78.                 e.printStackTrace();  
79.             }  
80.         }  
81.     };  
82.   
83.     protected void onCreate(Bundle savedInstanceState) {  
84.         super.onCreate(savedInstanceState);  
85.         setContentView(R.layout.activity_main);  
86.   
87.         initView();  
88.         bindData(true);  
89.     }  
90.   
91.     /** 
92.      * 初始化view 
93.      */  
94.     private void initView() {  
95.         pBar = (ProgressBar) findViewById(R.id.pb_battery);  
96.         pBar.setMax(100);  
97.     }  
98.   
99.     /** 
100.      * 绑定数据 
101.      *  
102.      * @param isStart 
103.      *            初始绑定还是有广播数据变更需要刷新数据，tru初始绑定数据，false有广播数据变更需要刷新数据 
104.      */  
105.     private void bindData(boolean isStart) {  
106.         // 测试数据，收入   
107.         int moneyIn = 30;  
108.         // 测试数据，预算   
109.         int moneyYs = 300;  
110.         // 测试数据，支出   
111.         double moneyOut = 110;  
112.           
113.         // 目前滚动条状态%值   
114.         int progress = 100 - (int) ((moneyOut / (moneyIn + moneyYs)) * 100);  
115.   
116.         /*测试下降 
117.         //测试数据，原滚动条状态值 
118.         pBar.setProgress(progress); 
119.         //测试数据，别处操作了收入、支出、预算的数据使其发生了变化 
120.         isStart = false; 
121.         */  
122.           
123.           
124.         // 初始加载   
125.         if (isStart) {  
126.             progressAdd = progress;  
127.         } else {  
128.             // 测试数据，测试下降需要把上面的  /*测试下降  注释去掉  
129.             progress = 5;  
130.             progressOld = pBar.getProgress();  
131.   
132.             // 上升还是下降   
133.             progressAdd = progress - progressOld;  
134.             if (progressAdd < 0) {  
135.                 actionType = -1;  
136.                 progressAdd *= -1;  
137.             }  
138.         }  
139.   
140.         // 过500毫秒执行task   
141.         timer.schedule(task, 500);  
142.     }  
143.   
144. }