ProgressBar簡介

原文出處：http://www.ccbu.cc/android/progressbar-intro

ProgressBar是Android系統提供的進度條view控件。

1. ProgressBar有兩個進度，一個是Android:progress，另一個是android:secondaryProgress。後者主要是爲緩存需要所涉及的，比如在看網絡視頻時候都會有一個緩存的進度條以及還要一個播放的進度，在這裏緩存的進度就可以是android:secondaryProgress，而播放進度就是android:progress，有了secondProgress，可以很方便定製ProgressBar。

2. ProgressBar分爲確定的和不確定的，確定的是我們能明確看到進度，相反不確定的就是不清楚、不確定一個操作需要多長時間來完成，這個時候就需要用的不確定的ProgressBar了。屬性android:indeterminate如果設置爲true的話，那麼ProgressBar就可能是圓形的滾動條或者水平的滾動條（由樣式決定），但是我們一般時候，是直接使用Style類型來區分圓形還是水平ProgressBar的。

3. ProgressBar的樣式設定其實有兩種方式，在API文檔中說明的方式如下：

   • Widget.ProgressBar.Horizontal
   • Widget.ProgressBar.Small
   • Widget.ProgressBar.Large
   • Widget.ProgressBar.Inverse
   • Widget.ProgressBar.Small.Inverse
   • Widget.ProgressBar.Large.Inverse

   使用的時候可以這樣：style="@android:style/Widget.ProgressBar.Small"，另外還有一種方式就是使用系統的attr，下面的方式是系統的style：

   • style="?android:attr/progressBarStyle"
   • style="?android:attr/progressBarStyleHorizontal"
   • style="?android:attr/progressBarStyleInverse"
   • style="?android:attr/progressBarStyleLarge"
   • style="?android:attr/progressBarStyleLargeInverse"
   • style="?android:attr/progressBarStyleSmall"
   • style="?android:attr/progressBarStyleSmallInverse"
   • style="?android:attr/progressBarStyleSmallTitle"

   示例如下：

<ProgressBar  
	 android:id="@+id/progressBar1"  
	 style="?android:attr/progressBarStyleHorizontal" 
	 android:layout_width="match_parent"  
	 android:layout_height="wrap_content" /> 
<ProgressBar  
	 android:id="@+id/progressBar2"  
	 style="@android:style/Widget.ProgressBar.Horizontal"（等同於@android:attr）  
	 android:layout_width="match_parent"  
	 android:layout_height="wrap_content" /> 

4. 水平ProgressBar系統樣式

   我們去看一下style="?android:attr/progressBarStyleHorizontal"(即Widget.ProgressBar.Horizontal)的源碼，如下：

    <style name="Widget.ProgressBar.Horizontal">  
        <item name="android:indeterminateOnly">false</item>  
        <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>  
        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>  
        <item name="android:minHeight">20dip</item>  
        <item name="android:maxHeight">20dip</item>  
        <item name="android:mirrorForRtl">true</item>  
    </style>  

可以看出，進度條顯示的繪製Drawable定義主要是android:progressDrawable，讓我們看一下progress_horizontal的源碼。

<?xml version="1.0" encoding="utf-8"?>  
<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>  

可以看出，此處通過一個layer-list定義了一個LayerDrawable來處理進度的繪製，其中繪製包括3部分，即：background、secondProgress、progress，知道了繪製原理，那我們就可以很輕鬆的進行定義自己的進度條樣式了。

如我們需要定義一個進度條，不需要繪製secondProgress,背景爲透明，進度爲紅色填充，那麼我們的定義如下的Drawable資源progress_bar_style.xml。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:id="@android:id/background">
		<shape>
			<solid android:color="@android:color/transparent" />
		</shape>
	</item>
	<item android:id="@android:id/progress">
		<clip>
			<shape>
				<solid android:color="@color/red" />
			</shape>
		</clip>
	</item>
</layer-list>

再在layout的xml配置中進行一下配置即可

<ProgressBar
	style="?android:attr/progressBarStyleHorizontal"
	android:layout_width="match_parent"
	android:layout_height="8dp"
	android:progressDrawable="@drawable/progress_bar_style" />

5. 水平ProgressBar使用圖片作爲進度條

   <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:id="@android:id/background">
           <nine-patch android:src="@drawable/background" android:dither="true"/>
       </item>
       <item android:id="@android:id/progress">
           <clip android:drawable="@drawable/progress"/>
       </item>
       <item android:id="@android:id/secondaryProgress">
           <clip android:drawable="@drawable/secondaryProgress"/>
       </item>
   </layer-list>
   

   一般的，背景圖片需要是**.9.png格式，progress則可以爲普通圖片，當普通圖片出現問題時，可以嘗試使用.9.png來代替，需要注意的是，progress的資源需要放在clip**標籤內，將其轉換爲ClipDrawable來使用，纔可以正常的顯示進度。

6. 弧形進度條樣式
   以progressBarStyleLarge爲例，其樣式源碼如下：

    <style name="Widget.ProgressBar.Large">
    　　<item name="android:indeterminateDrawable">@android:drawable/progress_large_white</item>
    　　<item name="android:minWidth">76dip</item>
    　　<item name="android:maxWidth">76dip</item>
    　　<item name="android:minHeight">76dip</item>
    　　<item name="android:maxHeight">76dip</item>
    </style

繼續看一下progress_large_white源碼

    <rotate xmlns:android="http://schemas.android.com/apk/res/android"  
        android:drawable="@drawable/spinner_white_76"  
        android:pivotX="50%"  
        android:pivotY="50%"  
        android:fromDegrees="0"  
        android:toDegrees="360" /> 

此處我們可以看出， 只是設置了一張圖片，然後對圖片進行了旋轉來實現進度樣式,這種加載動畫的定義是比較簡單的，如果要自定義，只需要更好圖片即可。

那如何定義又一組圖片組成的動畫的加載進度樣式呢？首先我們定義一組動畫圖片，使用animation-list定義一組逐幀動畫。

    <animation-list android:oneshot="false"    
    　　xmlns:android="http://schemas.android.com/apk/res/android">    
    　　<item android:duration="100" android:drawable="@drawable/loading_1" />    
    　　<item android:duration="100" android:drawable="@drawable/loading_2" />    
    　　<item android:duration="100" android:drawable="@drawable/loading_3" />    
    　　<item android:duration="100" android:drawable="@drawable/loading_4" />    
    　　<item android:duration="100" android:drawable="@drawable/loading_5" />    
    　　<item android:duration="100" android:drawable="@drawable/loading_6" />  
    </animation-list>  

定義好動畫後，將此動畫Drawable設置到style的indeterminateDrawable即可。
另外，我們也可以通過定義一組sharp資源，來繪製一定樣式的圖形來表示加載過程，給出的示例代碼如下：

    <?xml version="1.0" encoding="utf-8"?>    
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"    
    　　android:fromDegrees="0"    
    　　android:pivotX="50%"    
    　　android:pivotY="50%"    
    　　android:toDegrees="360" >    
    　　<shape    
    　　　　android:innerRadiusRatio="3"    
    　　　　android:shape="ring"    
    　　　　android:thicknessRatio="8"    
    　　　　android:useLevel="false" >    
    　　　　<gradient    
    　　　　　　android:centerColor="#FFFFFF"    
    　　　　　　android:centerY="0.50"    
    　　　　　　android:endColor="#1E90FF"    
    　　　　　　android:startColor="#000000"    
    　　　　　　android:type="sweep"    
    　　　　　　android:useLevel="false" />    
    　　</shape>    
    </rotate>

同樣的，將此Drawable資源設置到style的indeterminateDrawable即可。