ProgressBar簡介

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

ProgressBar是Android系統(tǒng)提供的進(jìn)度條view控件。

  1. ProgressBar有兩個(gè)進(jìn)度，一個(gè)是Android:progress，另一個(gè)是android:secondaryProgress。后者主要是為緩存需要所涉及的，比如在看網(wǎng)絡(luò)視頻時(shí)候都會有一個(gè)緩存的進(jìn)度條以及還要一個(gè)播放的進(jìn)度，在這里緩存的進(jìn)度就可以是android:secondaryProgress，而播放進(jìn)度就是android:progress，有了secondProgress，可以很方便定制ProgressBar。

  2. ProgressBar分為確定的和不確定的，確定的是我們能明確看到進(jìn)度，相反不確定的就是不清楚、不確定一個(gè)操作需要多長時(shí)間來完成，這個(gè)時(shí)候就需要用的不確定的ProgressBar了。屬性android:indeterminate如果設(shè)置為true的話，那么ProgressBar就可能是圓形的滾動(dòng)條或者水平的滾動(dòng)條（由樣式?jīng)Q定），但是我們一般時(shí)候，是直接使用Style類型來區(qū)分圓形還是水平ProgressBar的。

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

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

    使用的時(shí)候可以這樣：style="@android:style/Widget.ProgressBar.Small"，另外還有一種方式就是使用系統(tǒng)的attr，下面的方式是系統(tǒng)的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" />

  1. 水平ProgressBar系統(tǒng)樣式

    我們?nèi)タ匆幌聅tyle="?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>

可以看出，進(jìn)度條顯示的繪制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>

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

如我們需要定義一個(gè)進(jìn)度條，不需要繪制secondProgress,背景為透明，進(jìn)度為紅色填充，那么我們的定義如下的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配置中進(jìn)行一下配置即可

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

  1. 水平ProgressBar使用圖片作為進(jìn)度條

    <?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則可以為普通圖片，當(dāng)普通圖片出現(xiàn)問題時(shí)，可以嘗試使用.9.png來代替，需要注意的是，progress的資源需要放在clip標(biāo)簽內(nèi)，將其轉(zhuǎn)換為ClipDrawable來使用，才可以正常的顯示進(jìn)度。

  2. 弧形進(jìn)度條樣式
    以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

繼續(xù)看一下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" />

此處我們可以看出， 只是設(shè)置了一張圖片，然后對圖片進(jìn)行了旋轉(zhuǎn)來實(shí)現(xiàn)進(jìn)度樣式,這種加載動(dòng)畫的定義是比較簡單的，如果要自定義，只需要更好圖片即可。

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

    <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>

定義好動(dòng)畫后，將此動(dòng)畫Drawable設(shè)置到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資源設(shè)置到style的indeterminateDrawable即可。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容