自定義ProgressBar(一)

ProgressBar是一個非常重要組件。通常用于向用戶顯示耗時操作完成的百分比。主要包括水平和圓形兩種類型。講解之前首先來講一下樣式屬性設置,這個在自定義里面是核心部分。
  本文主要介紹ProgressBar的屬性里面的 progressDrawable 和 indeterminateDrawable

一、常用屬性

(一)關于style屬性設置:安卓支持幾種風格的進度條,通過style屬性可以為ProgressBar設置指定風格,該屬性可支持如下幾個屬性值:
  1. 安卓styles.xml里面的 8個,這8個兼容不同系統版本,一般都用這些style樣式用的多
屬性值 屬性的含義
style="@android:style/Widget.ProgressBar"
style="@android:style/Widget.ProgressBar.Large" 大環形進度條
style="@android:style/Widget.ProgressBar.Small" 小環形進度條
style="@android:style/Widget.ProgressBar.Inverse" 普通大小的環形進度條
style="@android:style/Widget.ProgressBar.Large.Inverse" 大環形進度條
style="@android:style/Widget.ProgressBar.Small.Inverse" 小環形進度條
style="@android:style/Widget.ProgressBar.Small.Title" 標題欄環形進度條
style="@android:style/Widget.ProgressBar.Horizontal" 水平進度條
<style name="Widget.ProgressBar">
    <item name="indeterminateOnly">true</item>
    <item name="indeterminateDrawable">@drawable/progress_medium_white</item>
    <item name="indeterminateBehavior">repeat</item>
    <item name="indeterminateDuration">3500</item>
    <item name="minWidth">48dip</item>
    <item name="maxWidth">48dip</item>
    <item name="minHeight">48dip</item>
    <item name="maxHeight">48dip</item>
    <item name="mirrorForRtl">false</item>
</style>

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

<style name="Widget.ProgressBar.Small">
    <item name="indeterminateDrawable">@drawable/progress_small_white</item>
    <item name="minWidth">16dip</item>
    <item name="maxWidth">16dip</item>
    <item name="minHeight">16dip</item>
    <item name="maxHeight">16dip</item>
</style>

<style name="Widget.ProgressBar.Inverse">
    <item name="indeterminateDrawable">@drawable/progress_medium</item>
</style>

<style name="Widget.ProgressBar.Large.Inverse">
    <item name="indeterminateDrawable">@drawable/progress_large</item>
</style>

<style name="Widget.ProgressBar.Small.Inverse">
    <item name="indeterminateDrawable">@drawable/progress_small</item>
</style>

<style name="Widget.ProgressBar.Small.Title">
    <item name="indeterminateDrawable">@drawable/progress_small_titlebar</item>
</style>

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

2.styles_holo.xml里面的 16個,其中Widget.Holo.開頭的有8個,Widget.Holo.Light.開頭的有8個

----------------------------------------------- Widget.Holo.開頭的 ------------------------------------------------------

<style name="Widget.Holo.ProgressBar" parent="Widget.ProgressBar">
    <item name="indeterminateDrawable">@drawable/progress_medium_holo</item>
</style>

<style name="Widget.Holo.ProgressBar.Horizontal" parent="Widget.ProgressBar.Horizontal">
    <item name="progressDrawable">@drawable/progress_horizontal_holo_dark</item>
    <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal_holo</item>
    <item name="minHeight">16dip</item>
    <item name="maxHeight">16dip</item>
</style>

<style name="Widget.Holo.ProgressBar.Small" parent="Widget.ProgressBar.Small">
    <item name="indeterminateDrawable">@drawable/progress_small_holo</item>
</style>

<style name="Widget.Holo.ProgressBar.Small.Title" />

<style name="Widget.Holo.ProgressBar.Large" parent="Widget.ProgressBar.Large">
    <item name="indeterminateDrawable">@drawable/progress_large_holo</item>
</style>

<style name="Widget.Holo.ProgressBar.Inverse" />

<style name="Widget.Holo.ProgressBar.Small.Inverse" />

<style name="Widget.Holo.ProgressBar.Large.Inverse" />

--------------------------------------------- Widget.Holo.Light.開頭的 ----------------------------------------------------

<style name="Widget.Holo.Light.ProgressBar" parent="Widget.Holo.ProgressBar" />

<style name="Widget.Holo.Light.ProgressBar.Horizontal" parent="Widget.Holo.ProgressBar.Horizontal">
    <item name="progressDrawable">@drawable/progress_horizontal_holo_light</item>
</style>

<style name="Widget.Holo.Light.ProgressBar.Small" parent="Widget.Holo.ProgressBar.Small" />

<style name="Widget.Holo.Light.ProgressBar.Small.Title" parent="Widget.Holo.ProgressBar.Small.Title" />

<style name="Widget.Holo.Light.ProgressBar.Large" parent="Widget.Holo.ProgressBar.Large" />

<style name="Widget.Holo.Light.ProgressBar.Inverse" parent="Widget.Holo.ProgressBar.Inverse" />

<style name="Widget.Holo.Light.ProgressBar.Small.Inverse" parent="Widget.Holo.ProgressBar.Small.Inverse" />

<style name="Widget.Holo.Light.ProgressBar.Large.Inverse" parent="Widget.Holo.ProgressBar.Large.Inverse" />

3.styles_material.xml里面的 16個,其中Widget.Material.開頭的有8個,Widget.Material.Light.開頭的有8個

----------------------------------------------- Widget.Material.開頭的 ------------------------------------------------------

<style name="Widget.Material.ProgressBar" parent="Widget.ProgressBar">
    <item name="indeterminateDrawable">@drawable/progress_medium_material</item>
</style>

<style name="Widget.Material.ProgressBar.Inverse"/>

<style name="Widget.Material.ProgressBar.Horizontal" parent="Widget.ProgressBar.Horizontal">
    <item name="progressDrawable">@drawable/progress_horizontal_material</item>
    <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal_material</item>
    <item name="minHeight">16dip</item>
    <item name="maxHeight">16dip</item>
</style>

<style name="Widget.Material.ProgressBar.Small" parent="Widget.ProgressBar.Small">
    <item name="indeterminateDrawable">@drawable/progress_small_material</item>
</style>

<style name="Widget.Material.ProgressBar.Small.Inverse"/>
<style name="Widget.Material.ProgressBar.Small.Title"/>

<style name="Widget.Material.ProgressBar.Large" parent="Widget.ProgressBar.Large">
    <item name="indeterminateDrawable">@drawable/progress_large_material</item>
</style>

<style name="Widget.Material.ProgressBar.Large.Inverse"/>

-------------------------------------------- Widget.Material.Light.開頭的 ---------------------------------------------------

<style name="Widget.Material.Light.ProgressBar" parent="Widget.Material.ProgressBar"/>
<style name="Widget.Material.Light.ProgressBar.Horizontal" parent="Widget.Material.ProgressBar.Horizontal"/>
<style name="Widget.Material.Light.ProgressBar.Small" parent="Widget.Material.ProgressBar.Small"/>
<style name="Widget.Material.Light.ProgressBar.Small.Title" parent="Widget.Material.ProgressBar.Small.Title"/>
<style name="Widget.Material.Light.ProgressBar.Large" parent="Widget.Material.ProgressBar.Large"/>
<style name="Widget.Material.Light.ProgressBar.Inverse" parent="Widget.Material.ProgressBar.Inverse"/>
<style name="Widget.Material.Light.ProgressBar.Small.Inverse" parent="Widget.Material.ProgressBar.Small.Inverse"/>
<style name="Widget.Material.Light.ProgressBar.Large.Inverse" parent="Widget.Material.ProgressBar.Large.Inverse"/>

4.styles_device_default.xml里面的13個,其中Widget.DeviceDefault.開頭的有5個,
Widget.DeviceDefault.Light.開頭的有8個。

------------------------------------------- Widget.DeviceDefault..開頭的 --------------------------------------------------

<style name="Widget.DeviceDefault.ProgressBar" parent="Widget.Material.ProgressBar"/>

<style name="Widget.DeviceDefault.ProgressBar.Horizontal" parent="Widget.Material.ProgressBar.Horizontal"/>

<style name="Widget.DeviceDefault.ProgressBar.Small" parent="Widget.Material.ProgressBar.Small"/>

<style name="Widget.DeviceDefault.ProgressBar.Small.Title" parent="Widget.Material.ProgressBar.Small.Title"/>

<style name="Widget.DeviceDefault.ProgressBar.Large" parent="Widget.Material.ProgressBar.Large"/>

---------------------------------------- Widget.DeviceDefault.Light.開頭的 -----------------------------------------------

<style name="Widget.DeviceDefault.Light.ProgressBar"
    parent="Widget.Material.Light.ProgressBar"/>

<style name="Widget.DeviceDefault.Light.ProgressBar.Horizontal" 
    parent="Widget.Material.Light.ProgressBar.Horizontal"/>

<style name="Widget.DeviceDefault.Light.ProgressBar.Small" 
    parent="Widget.Material.Light.ProgressBar.Small"/>

<style name="Widget.DeviceDefault.Light.ProgressBar.Small.Title" 
    parent="Widget.Material.Light.ProgressBar.Small.Title"/>

<style name="Widget.DeviceDefault.Light.ProgressBar.Large" 
    parent="Widget.Material.Light.ProgressBar.Large"/>

<style name="Widget.DeviceDefault.Light.ProgressBar.Inverse" 
    parent="Widget.Material.Light.ProgressBar.Inverse"/>

<style name="Widget.DeviceDefault.Light.ProgressBar.Small.Inverse" 
    parent="Widget.Material.Light.ProgressBar.Small.Inverse"/>

<style name="Widget.DeviceDefault.Light.ProgressBar.Large.Inverse" 
    parent="Widget.Material.Light.ProgressBar.Large.Inverse"/>
(二)其他屬性
屬性值 描述
android:max="" 進度條最大值
android:progress="" 進度條已完成值
android:secondaryProgress="" 二級進度值,值介于0到max。該進度在主進度和背景之間。比如用于網絡播放視頻時,二級進度用于表示緩沖進度,主進度用于表示播放進度。
android:animationResolution 超時的動畫幀之間的毫秒 ;必須是一個整數值,如“100”。(已經被舍棄了,現在都不用了。)
android:progressDrawable="" 設置進度條軌道對應的drawable對象
android:indeterminate="" 是否允許使用不確定模式,該屬性設置為true,表示設置進度條不精確顯示進度,在不確定模式下,進度條動畫無限循環
android:indeterminateDrawable="" 定義不確定模式是否可拉
android:indeterminateDuration="" 時間不定的動畫
android:indeterminateBehavior="" 定義當進度達到最大時,不確定模式的表現;該值必須為repeat或者cycle,repeat表示進度從0重新開始;cycle表示進度保持當前值,并且回到0
android:indeterminateOnly="" 限制為不定模式
android:indeterminateTint=""
android:indeterminateTintMode=""

二、水平的ProgressBar

1.首先是布局代碼:

  <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#3C7793"
    android:orientation="vertical">

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_margin="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:progress="0"
        android:secondaryProgress="100"
        android:progressDrawable="@drawable/progressbar_line" />
</LinearLayout>

2.再看drawable目錄下的progressbar_line.xml是怎么定義的:(第一個item是背景,第二個item是二級進度值,一般用于視頻的緩沖,最后一個是顯示的進度)

  <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="0"
                />
        </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="0"
                    />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners
                    android:radius="5dip" />
                <gradient
                    android:startColor="#80ff0000"
                    android:endColor="#8000ff00"
                    android:angle="0" />
            </shape>
        </clip>
    </item>
  </layer-list>

3.代碼里面控制進度的顯示,新建一個線程,重寫runnable,在run方法里面去模擬執行耗時操作,通過handler發消息給主線程,主線程拿到消息之后更新UI.

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {
   
    private ProgressBar progressBar1;

    //在這里處理更新進度條
    private Handler mHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case 0x0001:
                    progressBar1.setProgress(msg.arg1);
                    //如果進度小于100,則延遲100毫秒之后重復執行runnable
                    if(msg.arg1<100){
                        mHandler.postDelayed(r, 100);
                    }else{
                        //否則,都置零,線程重新執行
                        progressBar1.setProgress(0);
                        mHandler.post(r);
                    }
                    break;
            }
        }
    };

    Runnable r = new Runnable() {
        int currentProgress = 0;
        @Override
        public void run() {
            Message msg = new Message();
            msg.what = 0x0001;
            currentProgress = progressBar1.getProgress()+1;
            progressBar1.setProgress(currentProgress);
            msg.arg1 = currentProgress;
            mHandler.sendMessage(msg);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        progressBar1 = (ProgressBar) findViewById(R.id.progressBar1);
        progressBar1.setProgressDrawable(getResources().getDrawable(R.drawable.progressbar_line));

        if(progressBar1.getProgress() < progressBar1.getMax()){
            // 把r加入到線程隊列,然后線程隊列里就開始執行runnable對象中的run()
            mHandler.post(r);
        }else{//不用的時候,就把r從線程隊列移除,這是一個小的性能優化
            mHandler.removeCallbacks(r);
        }
    }
}

三、圓形的ProgressBar

1.先來看看布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#3C7793"
android:orientation="vertical">

    <ProgressBar
        android:id="@+id/loadProgressBar"
        style="@android:style/Widget.ProgressBar"
        android:layout_margin="10dp"
        android:indeterminateDrawable="@drawable/progressbar_round"
        android:layout_width="100dp"
        android:layout_height="100dp" />
</LinearLayout>

2.再看看drawable目錄下的progressbar_round.xml

<?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="10"
        android:useLevel="false">

        <gradient
            android:centerColor="#FFFFFF"
            android:centerY="0.50"
            android:endColor="#FFFF00"
            android:startColor="#00FFFF"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

效果圖如下:

ProgressBar演示.gif

下一篇我們重點講解如何寫一個View繼承ProgressBar,實現各種吊炸天的效果。


相關文章閱讀:

全面總結側滑菜單的4種實現方式

萬能的dialog庫(包括類似popwindow效果) 
 
  自定義ViewPager實現3D畫廊效果

簡單幾行代碼讓ViewPager實現垂直滑動效果

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容