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

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

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

1、前言

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

2、ProgressBar

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

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

android:max：進度條的最大值
android:progress：進度條已完成進度值
android:progressDrawable：設置軌道對應的Drawable對象
android:indeterminate：如果設置成true，則進度條不精確顯示進度（會一直進行動畫）
android:indeterminateDrawable：設置不顯示進度的進度條的Drawable對象
android:indeterminateDuration：設置不精確顯示進度的持續(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" />

分別就對應以下圖片咯

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

看看XML文件，很容易發(fā)現，這幾個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了，因為它就是個一個圖，瘋狂的在旋轉。

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

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

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

3、SeekBar

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

<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（就是那個滑塊），所以就著重說一下滑塊，其他的就一筆帶過咯。

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

android:thumb="@drawable/icon_seekbar_thum"

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

<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組，通過對應的item，我們就可以實現在不同的狀態(tài)下顯示不同的thumb了，具體的樣式我就不寫了，再說ProgressBar的樣式的時候也是有類似的操作的

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

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

很簡單一行

android:splitTrack="false"

修復0。0

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

很簡單一行

android:thumbOffset="1dp"

修復0，0

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

很簡單一行

android:paddingHorizontal="0dp"

修復0>0

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

很簡單一行

android:thumb="@null"

修復0」0

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

sb02.setOnTouchListener { _, _ -> true }

真的修復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不夠流暢，可以用以下這個

bar.setProgress(progress, true)

4、結尾

更多復雜的進度條需求，靠widget的控件，肯定是難以實現的，我們接下來會講述RatingBar，以及繼承ProgressBar，做更多好看的進度條！

以上就是五分了解Android Progress Bar進度條加載的詳細內容，更多關于Android Progress Bar的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

Android RecyclerView緩存復用原理解析
RecyclerView是Android一個更強大的控件,其不僅可以實現和ListView同樣的效果,還有優(yōu)化了ListView中的各種不足。其可以實現數據縱向滾動,也可以實現橫向滾動(ListView做不到橫向滾動)。接下來講解RecyclerView的用法
2022-11-11
Kotlin掛起函數的詳細介紹
掛起函數用狀態(tài)機以掛起點將協(xié)程的運算邏輯拆分成不同的片段，每次執(zhí)行協(xié)程運行不同的邏輯片段，由此可以知道協(xié)程是運行在線程中的，線程的并發(fā)處理方式也可以用在協(xié)程上
2022-09-09
Android四大組件之廣播BroadcastReceiver詳解
Android開發(fā)的四大組件分別是：活動（activity），用于表現功能；服務（service），后臺運行服務，不提供界面呈現；廣播接受者（Broadcast Receive），勇于接收廣播；內容提供者（Content Provider），支持多個應用中存儲和讀取數據，相當于數據庫，本篇著重介紹廣播組件
2021-11-11
Android添加ButterKnife時報錯Error:(2, 0) Cannot add extension wit
今天小編就為大家分享一篇關于Android添加ButterKnife時報錯Error:(2, 0) Cannot add extension with name 'android'的解決辦法，小編覺得內容挺不錯的，現在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2018-12-12
Android中Fragment多層嵌套時onActivityResult無法正確回調問題的解決方法
這篇文章主要介紹了Android中Fragment多層嵌套時onActivityResult無法正確回調問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
Android Scroller及下拉刷新組件原理解析
這篇文章主要為大家詳細解析了Android Scroller及下拉刷新組件原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
Android4.X中SIM卡信息初始化過程詳解
這篇文章主要介紹了Android4.X中SIM卡信息初始化過程,較為詳細的分析總結了Android4.X中SIM卡信息初始化的步驟及相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
史上最全的Android build.gradle配置教程
這篇文章主要給大家介紹了關于Android build.gradle配置的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-08-08
Android 實現沉浸式狀態(tài)欄的方法
沉浸式狀態(tài)欄的來源就是很多手機用的是實體按鍵，沒有虛擬鍵，于是開了沉浸模式就只有狀態(tài)欄消失了。下面腳本之家小編給大家介紹Android 實現沉浸式狀態(tài)欄，需要的朋友可以參考下
2015-09-09
Android 自定義view模板并實現點擊事件的回調
這篇文章主要介紹了Android 自定義view模板并實現點擊事件的回調的相關資料,需要的朋友可以參考下
2017-01-01