20120808184124222012080818413610  

這個圖片類型的進度條是怎麼做的呢。

首先，這肯定是繼承一個進度條ProgressBar,那我們分析一下ProgressBar的構成，主題分格是圓形的還是條狀的，背景background，進度前景progressDrawable。

好我們看一下進度條的xml布局。

<ProgressBar android:id="@+id/pb"
        style="?android:attr/progressBarStyleHorizontal"
        android:background="@drawable/progress_bg"
        android:progressDrawable="@drawable/progress_vertical"
        android:layout_width="100dp"
        android:layout_height="80dp"/>

style定義了條狀進度條，background設置進度條背景（這裏我們可以把灰色的背景圖放進去），progressDrawable設置進度前景（前景圖可以放一張藍色圖）。

但是如果這样設置的話，會產生什麼情況呢，進度條是從左邊往右邊進展的，問題就來了，我怎麼把進度條的增長方向改为垂直向上呢？

我們看下ProgressBar布局源碼,progress是一個layer-list文件。

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

 

可以看到android:id/progress這項包含了一個clip標簽，在這裏就可以控制自增方向，clip發現有3個屬性，clipOrientation， gravity， drawable。在clipOrientation設置为縱向，drawable設置为藍色圖就大功告成啦！

 

看下實際效果：

20120808190019532012080819002881  

不錯吧！

 

 

相關源碼：

main.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     android:orientation="vertical" >
 6 
 7     <TextView
 8         android:layout_width="fill_parent"
 9         android:layout_height="wrap_content"
10         android:text="@string/hello" />
11 
12     <Button android:id="@+id/bt"
13         android:text="開始"
14          android:layout_width="fill_parent"
15         android:layout_height="wrap_content"/>
16     
17     <ProgressBar android:id="@+id/pb"
18         style="?android:attr/progressBarStyleHorizontal"
19         android:background="@drawable/progress_bg"
20         android:progressDrawable="@drawable/progress_vertical"
21         android:layout_width="100dp"
22         android:layout_height="80dp"/>
23     
24 </LinearLayout>
progress_vertical.xml


 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="#fff" 
 9                     android:endColor="#f00" 
10                     android:angle="270" 
11             /> 
12         </shape> 
13     </item> -->
14    
15      
16     <item android:id="@android:id/progress"  > 
17         <clip android:clipOrientation="vertical" 
18             android:gravity = "bottom"
19             android:drawable="@drawable/progress"
20             > 
21             <!-- 
22            
23            
24             <shape > 
25                 <corners android:radius="5dip" /> 
26                 <gradient 
27                          android:startColor="#ffffd300" 
28                         android:centerColor="#ffffb600" 
29                         android:centerX="0.75" 
30                         android:endColor="#ffffcb00" 
31                         android:angle="90"
32                 /> 
33             </shape>  -->
34         </clip> 
35     </item> 
36      
37 </layer-list>

 

MainActivity.java


 1 package com.bvin.study.progress;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.os.Handler;
 6 import android.os.Message;
 7 import android.view.View;
 8 import android.widget.Button;
 9 import android.widget.ProgressBar;
10 
11 public class MainActivity extends Activity {
12     /** Called when the activity is first created. */
13     ProgressBar pb ;
14     Handler handler = new Handler(){
15 
16         @Override
17         public void handleMessage(Message msg) {
18             // TODO Auto-generated method stub
19             super.handleMessage(msg);
20             pb.setProgress(msg.what);
21         }
22     
23         
24         
25     };
26     @Override
27     public void onCreate(Bundle savedInstanceState) {
28         super.onCreate(savedInstanceState);
29         setContentView(R.layout.main);
30         init();
31     }
32     
33     void init(){
34         pb = (ProgressBar)findViewById(R.id.pb);
35         Button bt = (Button)findViewById(R.id.bt);
36         bt.setOnClickListener(new View.OnClickListener() {
37             
38             @Override
39             public void onClick(View v) {
40                 // TODO Auto-generated method stub
41                 
42                 pb.incrementProgressBy(10);
43                 
44                 
45             }
46         });
47     }
48 }

 

 
 


From:CNBLOGS    
arrow
arrow
    全站熱搜

    戮克 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄