Android UI设计 -----自定义进度条

一、在开发中我们经常要用到进度条显示下载或者加载的进度。系统自带的黄色进度条在UI效果上经常不能满足策划或者美工的要求。这就要我们屌丝程序员自己自定义进度条。

话不多说，先上图。

        实现步骤一：先定义进度条的风格样式

                              

[html] view plaincopy

1. <!-- 自定义进度条 -->  
2.    <style name="ProgressBar_Mini" parent="@android:style/Widget.ProgressBar.Horizontal">  
3.        <item name="android:maxHeight">50dip</item>  
4.        <item name="android:minHeight">8dip</item>  
5.        <item name="android:indeterminateOnly">false</item>  
6.        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>  
7.        <item name="android:progressDrawable">@drawable/progressbar_mini</item>  
8.    </style>  

       实现步骤二：定义样式style中用到的@drawable/progressbar_mini资源文件。可以再xml中绘制进度条的不同样式（圆角，直角……）和颜色。

            

[html] view plaincopy

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.          <shape >    
5.                 <corners android:radius="5dip" />    
6.                 <gradient    
7.                     android:angle="270"    
8.                     android:centerY="0.75"    
9.                     android:endColor="#F5F5F5"    
10.                     android:startColor="#BEBEBE" />    
11.             </shape>    
12.     </item>    
13.     
14.     <item android:id="@android:id/secondaryProgress">    
15.     
16.         <clip >    
17.             <shape >    
18.                 <corners android:radius="0dip" />    
19.                 <gradient    
20.                     android:angle="270"    
21.                     android:centerY="0.75"    
22.                    android:endColor="#165CBC"    
23.                     android:startColor="#85B0E9" />    
24.             </shape>    
25.         </clip>    
26.     </item>    
27.     
28.     <item android:id="@android:id/progress">    
29.     
30.         <clip >    
31.             <shape >    
32.                 <corners android:radius="5dip" />    
33.                 <gradient    
34.                     android:angle="270"    
35.                     android:centerY="0.75"    
36.                    android:endColor="#165CBC"    
37.                     android:startColor="#85B0E9" />    
38.             </shape>    
39.               
40.         </clip>    
41.     </item>    
42. </layer-list>  

          实现步骤三：写java文件，定义进度条上显示的文字。

[java] view plaincopy

1. public class MyProgressBar extends ProgressBar {  
2.     private String text_progress;  
3.     private Paint mPaint;//画笔  
4.   
5.     public MyProgressBar(Context context) {  
6.         super(context);  
7.         initPaint();  
8.     }  
9.     public MyProgressBar(Context context, AttributeSet attrs) {  
10.         super(context, attrs);  
11.         initPaint();  
12.     }  
13.     public MyProgressBar(Context context, AttributeSet attrs, int defStyle) {  
14.         super(context, attrs, defStyle);  
15.         initPaint();  
16.     }  
17.       
18.     @Override  
19.     public synchronized void setProgress(int progress) {  
20.         super.setProgress(progress);  
21.         setTextProgress(progress);  
22.     }  
23.     @Override  
24.     protected synchronized void onDraw(Canvas canvas) {  
25.         // TODO Auto-generated method stub  
26.         super.onDraw(canvas);  
27.         Rect rect=new Rect();  
28.         this.mPaint.getTextBounds(this.text_progress, 0, this.text_progress.length(), rect);  
29.         int x = (getWidth() / 2) - rect.centerX();  
30.         int y = (getHeight() / 2) - rect.centerY();  
31.         canvas.drawText(this.text_progress, x, y, this.mPaint);  
32.     }  
33.     /** 
34.      *  
35.      *description: 初始化画笔 
36.      *Create by lll on 2013-8-13 下午1:41:49 
37.      */  
38.     private void initPaint(){  
39.         this.mPaint=new Paint();  
40.         this.mPaint.setAntiAlias(true);  
41.         this.mPaint.setColor(Color.WHITE);  
42.     }  
43.     private void setTextProgress(int progress){   
44.         int i = (int) ((progress * 1.0f / this.getMax()) * 100);  
45.         this.text_progress = String.valueOf(i) + "%";  
46.     }  
47.   
48.   
49.   
50. }  

       最后一步：xml文件中引用自定义的进度条：

     

[html] view plaincopy

1. <com.example.widgetshop.MyProgressBar  
2.        android:id="@+id/progressBar1"  
3.        style="@style/ProgressBar_Mini"  
4.        android:layout_width="match_parent"  
5.        android:layout_height="wrap_content"  
6.        android:progress="100"  
7.        android:layout_marginTop="24dp" />  

OK,一个简单的更改背景和样式其带文字显示的进度条就完成。