五分了解Android?Progress?Bar進度條加載

更新時間：2023年02月07日 10:16:50 作者：ZYCAlbert

這篇文章主要為大家介紹了Android?Progress?Bar進度條加載的實現(xiàn)及屬性示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

1、前言

最近在開發(fā)中，同事對于android.widget下的控件一知半解，又恰好那天用到了Seekbar，想了想，那就從Seekbar's father ProgressBar 來說說android.widget下的常用控件和常用用法吧。后面也會根據(jù)這些控件來進行仿寫、擴展，做一些高度自定義的View啦。如果寫的不好，或者有錯誤之處，懇請在評論、私信、郵箱指出，萬分感謝??

2、ProgressBar

A user interface element that indicates the progress of an operation.

使用很簡單,看看一些基本的屬性

android:max：進度條的最大值
android:progress：進度條已完成進度值
android:progressDrawable：設(shè)置軌道對應(yīng)的Drawable對象
android:indeterminate：如果設(shè)置成true，則進度條不精確顯示進度（會一直進行動畫）
android:indeterminateDrawable：設(shè)置不顯示進度的進度條的Drawable對象
android:indeterminateDuration：設(shè)置不精確顯示進度的持續(xù)時間
android:secondaryProgress：二級進度條（使用場景不多）

直接在布局中使用即可

        <ProgressBar
            style="@android:style/Widget.ProgressBar.Small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp" />
        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp" />
        <ProgressBar
            style="@android:style/Widget.ProgressBar.Large"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp" />
        <ProgressBar
            android:id="@+id/sb_no_beautiful"
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:max="100"
            android:progress="50"
            android:secondaryProgress="70" />
        <ProgressBar
            android:id="@+id/sb_no_beautiful2"
            style="@android:style/Widget.Holo.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:indeterminate="true"
            android:max="100"
            android:progress="50"
            android:secondaryProgress="70" />

分別就對應(yīng)以下圖片咯

但是這種樣式，不得不懷疑Google之前的審美，肯定是不滿意的，怎么換樣式呢。

看看XML文件，很容易發(fā)現(xiàn)，這幾個ProgressBar的差異是因為style引起的，隨手點開一個@android:style/Widget.ProgressBar.Horizontal 看看。

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

很好，估摸著樣式就出在progressDrawable/indeterminateDrawable上面，看看 @drawable/progress_horizontal 里面

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

一個樣式文件，分別操控了background/secondaryProgress/progress，這樣我們很容易推測出

再看看 @drawable/progress_indeterminate_horizontal

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
    <item android:drawable="@drawable/progressbar_indeterminate1" android:duration="200" />
    <item android:drawable="@drawable/progressbar_indeterminate2" android:duration="200" />
    <item android:drawable="@drawable/progressbar_indeterminate3" android:duration="200" />
</animation-list>

顯而易見，這是indeterminate模式下的樣式啊，那我們仿寫一個不同樣式，就很簡單了，動手。

styles.xml

<style name="ProgressBar_Beautiful" >
    <item name="android:indeterminateOnly">false</item>
    <item name="android:progressDrawable">@drawable/progress_horizontal_1</item>
    <item name="android:indeterminateDrawable">@drawable/progress_indeterminate_beautiful</item>
    <item name="android:mirrorForRtl">true</item>
</style>

progress_horizontal_1.xml

<?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="25dp" />
            <solid android:color="#FFF0F0F0"/>
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="25dp" />
                <solid android:color="#FFC0EC87"/>
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="25dp" />
                <solid android:color="#FFA5E05B"/>
            </shape>
        </clip>
    </item>
</layer-list>

progress_indeterminate_beautiful.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/bg_progress_001" android:duration="200" />
    <item android:drawable="@drawable/bg_progress_002" android:duration="200" />
    <item android:drawable="@drawable/bg_progress_003" android:duration="200" />
    <item android:drawable="@drawable/bg_progress_004" android:duration="200" />
</animation-list>

吭呲吭呲就寫出來了，看看效果

換了個顏色，加了個圓角/ 換了個圖片，還行。

我沒有去再寫環(huán)形的ProgressBar了，因為它就是個一個圖，瘋狂的在旋轉(zhuǎn)。

<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/spinner_white_76"
    android:pivotX="50%"
    android:pivotY="50%"
    android:framesCount="12"
    android:frameDuration="100" />

還有一些屬性我就不贅述了。你可以根據(jù)官方的樣式，修一修、改一改，就可以滿足一些基本的需求了。

用起來就這么簡單，就是因為太簡單，更復(fù)雜的功能就不是ProgressBar能直接實現(xiàn)的了。比如帶個滑塊？

3、SeekBar

好吧，ProgressBar的一個子類，也在android.widget下，因為是直接繼承，而且就加了個滑塊相關(guān)的代碼，實際上它也非常簡單，然我們來看看

<SeekBar
    android:id="@+id/sb_01"
    style="@style/ProgressBar_Beautiful"
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:layout_marginVertical="10dp"
    android:thumbOffset="1dp"
    android:max="100"
    android:progress="50"
    android:secondaryProgress="70"
    android:splitTrack="false"
    android:thumb="@drawable/icon_seekbar_thum" />
<SeekBar
    android:id="@+id/sb_02"
    style="@style/ProgressBar_Beautiful"
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:layout_marginVertical="10dp"
    android:max="100"
    android:progress="50"
    android:secondaryProgress="70"
    android:thumb="@drawable/icon_seekbar_thum" />
<SeekBar
    android:id="@+id/sb_03"
    style="@style/ProgressBar_Beautiful"
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:layout_marginVertical="10dp"
    android:max="100"
    android:progress="100"
    android:secondaryProgress="70"
    android:splitTrack="false"
    android:thumb="@drawable/icon_seekbar_thum" />
<SeekBar
    android:id="@+id/sb_04"
    style="@style/ProgressBar_Beautiful"
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:layout_marginVertical="10dp"
    android:thumbOffset="1dp"
    android:max="100"
    android:progress="100"
    android:secondaryProgress="70"
    android:splitTrack="false"
    android:thumb="@drawable/icon_seekbar_thum" />
<SeekBar
    android:id="@+id/sb_05"
    style="@style/ProgressBar_Beautiful"
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:layout_marginVertical="10dp"
    android:max="100"
    android:paddingHorizontal="0dp"
    android:progress="50"
    android:secondaryProgress="70"
    android:thumb="@drawable/icon_seekbar_thum" />
<SeekBar
    android:id="@+id/sb_06"
    style="@style/ProgressBar_Beautiful"
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:layout_marginVertical="10dp"
    android:max="100"
    android:progress="50"
    android:secondaryProgress="70"
    android:thumb="@null" />

樣式就在下面了

因為Seekbar相較而言就多了個thumb（就是那個滑塊），所以就著重說一下滑塊，其他的就一筆帶過咯。

主要了解的是如何設(shè)置自己的thumb和thumb的各種問題

android:thumb="@drawable/icon_seekbar_thum"

設(shè)置就這么thumb簡單，一個drawable文件解決，我這里對應(yīng)的是單一圖片，不過Google的是帶有多種狀態(tài)的thumb，我們來看看官方是如何實現(xiàn)的

<selector xmlns:android="http://schemas.android.com/apk/res/android"
          android:constantSize="true">
    <item android:state_enabled="false" android:state_pressed="true">
        <bitmap android:src="@drawable/abc_scrubber_control_off_mtrl_alpha"android:gravity="center"/>
    </item>
    <item android:state_enabled="false">
        <bitmap android:src="@drawable/abc_scrubber_control_off_mtrl_alpha"android:gravity="center"/>
    </item>
    <item android:state_pressed="true">
        <bitmap android:src="@drawable/abc_scrubber_control_to_pressed_mtrl_005" android:gravity="center"/>
    </item>
    <item>
        <bitmap android:src="@drawable/abc_scrubber_control_to_pressed_mtrl_000"android:gravity="center"/>
    </item>
</selector>

引用一個drawable，也是一個熟知的selector組，通過對應(yīng)的item，我們就可以實現(xiàn)在不同的狀態(tài)下顯示不同的thumb了，具體的樣式我就不寫了，再說ProgressBar的樣式的時候也是有類似的操作的

不過你可能發(fā)現(xiàn)了，其實這幾個樣式看起來都差不多，是因為都是我使用Seekbar遇到的問題以及解決方法，我們細說

(1) 自定義的thumb的背景會裁剪出一個正方形，這對于不規(guī)則圖形來講是非常難看的

很簡單一行

android:splitTrack="false"

修復(fù)0。0

(2)thumb的中心點對齊bar的邊界，所以thumb是允許超出進度條一點的。有時候我們不需要

很簡單一行

android:thumbOffset="1dp"

修復(fù)0，0

(3) 你可能發(fā)現(xiàn)就算沒有寫margin和padding，seekbar也不會占滿父布局的，是因為它自帶padding，所以如果需要去掉

很簡單一行

android:paddingHorizontal="0dp"

修復(fù)0>0

(4)最后一個，SeekBar但是不想要滑塊！為什么不用ProgressBar呢？沒別的就是頭鐵！

很簡單一行

android:thumb="@null"

修復(fù)0」0

但是要注意的是，此時Seekbar還是能點擊的！所以需要把點擊事件攔截掉

sb02.setOnTouchListener { _, _ -> true }

真的修復(fù)0[]0

好了好了，thumb的監(jiān)聽事件還沒說呢

            sb01.setOnSeekBarChangeListener(object : OnSeekBarChangeListener {
                override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) {
                    //進度發(fā)生改變時會觸發(fā)
                }
                override fun onStartTrackingTouch(p0: SeekBar?) {
                    //按住SeekBar時會觸發(fā)
                }
                override fun onStopTrackingTouch(p0: SeekBar?) {
                    //放開SeekBar時觸發(fā)
                }
            })

沒啦，Seekbar就這么多。

還有一個，放在下次講吧

對了，如果你感覺你的ProgressBar不夠流暢，可以用以下這個