Android-做个性化的进度条

1.案例效果图

2.准备素材

                              

progress1.png(78*78)              progress2.png(78*78)

3.原理

采用一张图片作为ProgressBar的背景图片(一般采用颜色比较浅的)。另一张是进度条的图片(一般采用颜色比较深的图片)。进度在滚动时：进度图片逐步显示，背景图片逐步隐藏，达到上面的效果。

4.灵感来自Android控件提供的源码

4.1 默认带进度的进度条，如下图

1. <ProgressBar
2. android:id="@+id/progressBar2"
3. style="@android:style/Widget.ProgressBar.Horizontal"
4. android:layout_width="268dp"
5. android:layout_height="wrap_content"
6. android:progress="45" />

 <ProgressBar
    android:id="@+id/progressBar2"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="268dp"
     android:layout_height="wrap_content"
    android:progress="45" /> 

注意：关键是style属性在起作用

4.2 找到样式定义的位置

鼠标放在style属性值上，按下Ctrl键，出现超链接，点击超链接跳转到样式的定义位置

样式定义的内容如下

重点研究：

android:progressDrawable：进度条的样式

@android:drawable/progress_horizontal：样式定义的文件

在android-sdk-windows\platforms\android-14\data\res目下搜索progress_horizontal.xml文件，搜索结果如下：

打开progress_horizontal.xml文件，内容如下

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

<layer-listxmlns:android="http://schemas.android.com/apk/res/android">
     <itemandroid:id="@android:id/background">
        <shape>
             <cornersandroid:radius="5dip"/>
             <gradient
                     android:startColor="#ff9d9e9d"
                     android:centerColor="#ff5a5d5a"
                     android:centerY="0.75"
                    android:endColor="#ff747674"
                     android:angle="270"
            />
         </shape>
    </item>
     <itemandroid:id="@android:id/secondaryProgress">
         <clip>
             <shape>
                 <cornersandroid:radius="5dip"/>
                 <gradient
                         android:startColor="#80ffd300"
                        android:centerColor="#80ffb600"
                         android:centerY="0.75"
                        android:endColor="#a0ffcb00"
                         android:angle="270"
                 />
            </shape>
        </clip>
    </item>
    <itemandroid:id="@android:id/progress">
         <clip>
             <shape>
                 <cornersandroid:radius="5dip"/>
                 <gradient
                         android:startColor="#ffffd300"
                         android:centerColor="#ffffb600"
                         android:centerY="0.75"
                        android:endColor="#ffffcb00"
                         android:angle="270"
                 />
             </shape>
         </clip>
     </item>
 </layer-list>

释义：

<item android:id="@android:id/background">：定义进度条的背景样式

<item android:id="@android:id/secondaryProgress">：辅助进度条的样式

<item android:id="@android:id/progress">：进度条的样式

思考：如果我想做垂直进度条，怎么办了？

关键在clip元素的属性上做修改

<clip
    android:clipOrientation="vertical"    定义滚动的方向 vertical为垂直方向
    android:drawable="@drawable/progress1"  定义进度的图片
    android:gravity="bottom" >  定义进度的开始位置
</clip>

5.定义样式文件progress_vertical.xml

progress_vertical.xml文件代码如下

1. <?xmlversionxmlversion="1.0"encoding="utf-8"?>
2. <layer-listxmlns:androidlayer-listxmlns:android="http://schemas.android.com/apk/res/android">
3. <itemandroid:iditemandroid:id="@android:id/progress">
4. <clip
5. android:clipOrientation="vertical"
6. android:drawable="@drawable/progress1"
7. android:gravity="bottom">
8. </clip>
9. </item>
10. </layer-list>

<?xmlversion="1.0"encoding="utf-8"?>
<layer-listxmlns:android="http://schemas.android.com/apk/res/android">
     <itemandroid:id="@android:id/progress">
        <clip
            android:clipOrientation="vertical"
        android:drawable="@drawable/progress1"
         android:gravity="bottom">
      </clip>
 </item>
</layer-list>

6.应用自定义的样式

1. <Button
2. android:id="@+id/btStart"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:layout_marginTop="150dp"
6. android:text="开始"/>
7. <ProgressBar
8. android:id="@+id/pbPic"
9. style="@android:style/Widget.ProgressBar.Horizontal"
10. android:layout_width="50dp"
11. android:layout_height="68dp"
12. android:background="@drawable/progress2"
13. android:max="100"
14. android:progress="0"
15. android:progressDrawable="@drawable/progress_vertical" />    <!-- 在此属性上应用 -->
16. <TextView
17. android:id="@+id/txtProgress"
18. android:layout_width="wrap_content"
19. android:layout_height="wrap_content"/>

<Button
        android:id="@+id/btStart"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="150dp"
        android:text="开始"/>

    <ProgressBar
        android:id="@+id/pbPic"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="50dp"
        android:layout_height="68dp"
        android:background="@drawable/progress2"
        android:max="100"
        android:progress="0"
        android:progressDrawable="@drawable/progress_vertical" />    <!-- 在此属性上应用 -->

    <TextView
        android:id="@+id/txtProgress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

7.点击按钮模拟进度滚动的效果

1. <span style="color:#333333;">public class  ProgressActivity extends Activity {
2. ProgressBar pb = null;
3. TextView txtProgress;
4. Handler handler = new Handler();
5. @Override
6. publicvoid onCreate(Bundle savedInstanceState) {
7. super.onCreate(savedInstanceState);
8. setContentView(R.layout.main);
9. System.out.println("主题=" + getTheme() + "");
10. pb = (ProgressBar) findViewById(R.id.pbPic);
11. Button btnStart = (Button) findViewById(R.id.btStart);//按钮
12. txtProgress = (TextView) findViewById(R.id.txtProgress);//显示进度
13. btnStart.setOnClickListener(new OnClickListener() {//按钮点击事件
14. publicvoid onClick(View v) {
15. new Thread(new Runnable() {//创建并启动线程，使用线程执行模拟的任务
16. publicvoid run() {
17. for (inti = 0; i < 100; i++) { //循环100遍
18. try {
19. handler.post(new Runnable() { //更新界面的数据
20. publicvoid run() {
21. pb.incrementProgressBy(1);//增加进度
22. txtProgress.setText(pb.getProgress() + "%");//显示完成的进度
23. }
24. });
25. Thread.sleep(100);
26. } catch (InterruptedException e) {
27. }
28. }
29. }
30. }).start();
31. }
32. });
33. }</span>
34. }

<span style="color:#333333;">public class  ProgressActivity extends Activity {
      ProgressBar pb = null;
      TextView txtProgress;
      Handler handler = new Handler();
      @Override
      publicvoid onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.main);
           System.out.println("主题=" + getTheme() + "");
           pb = (ProgressBar) findViewById(R.id.pbPic);
           Button btnStart = (Button) findViewById(R.id.btStart);//按钮
           txtProgress = (TextView) findViewById(R.id.txtProgress);//显示进度
           btnStart.setOnClickListener(new OnClickListener() {//按钮点击事件
                 publicvoid onClick(View v) {
                      new Thread(new Runnable() {//创建并启动线程，使用线程执行模拟的任务
                                       publicvoid run() {
                                             for (inti = 0; i < 100; i++) { //循环100遍
                                                  try {
                                                        handler.post(new Runnable() { //更新界面的数据
                                                              publicvoid run() {
                                                                   pb.incrementProgressBy(1);//增加进度
                                                                   txtProgress.setText(pb.getProgress() + "%");//显示完成的进度
                                                              }
                                                        });
                                                        Thread.sleep(100);
                                                  } catch (InterruptedException e) {

                                                  }
                                             }
                                       }
                                  }).start();
                 }
           });
      }</span>
}