《Android》『ProgressBar』- 進度指示元件的基本用法與如何透過 Shape、layer-list 自訂外觀

2016.04.15 / Android 工作筆記, 常用介面元件

《Android Developers 參考文獻》

➥ProgressBar

《繼承架構》

extends AbsSeekBar

java.lang.Object

↳android.view.View

↳android.widget.ProgressBar

《簡單介紹》

ProgressBar 是一種顯示目前進度的元件，主要是在系統執行一些耗時的工作時，以一個動畫告知使用者系統目前處於正在處理的狀態，android 內建的 ProgressBar 有兩種基本顯示方式，分別是水平條狀以及環狀，其中長條狀的進度條可以告知使用者現在的進度，環狀的動畫則只能表示目前的系統處於正在處理的狀態，無法顯示進度。當然，跟 SeekBar 一樣，不管是水平條狀或者是環狀的 ProgressBar，我們都可以透過 Shape 與 layer-list 資源檔，進一步的自訂我們想要的外觀。

➥基本用法

➥如何自訂水平條狀進度條的外觀

➥如何自訂環狀進度條的外觀

基本用法

package ...
import ...

public class MainActivity extends Activity 
{
    private Handler mHandler = new Handler();

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

        ProgressBar progBar = (ProgressBar) findViewById(R.id.progressBar);
        progBar.setMax(200); //設定最大值 (僅適用水平狀進度條)
        progBar.setProgress(120); //設定主要進度值 (僅適用水平狀進度條)
        progBar.setSecondaryProgress(180); //設定次要進度值 (僅適用水平狀進度條)
        
    }
}

package ...

import ...

public class MainActivity extends Activity

{

private Handler mHandler = new Handler();

@Override

protected void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ProgressBar progBar = (ProgressBar) findViewById(R.id.progressBar);

progBar.setMax(200); //設定最大值 (僅適用水平狀進度條)

progBar.setProgress(120); //設定主要進度值 (僅適用水平狀進度條)

progBar.setSecondaryProgress(180); //設定次要進度值 (僅適用水平狀進度條)

}

MainActivity.java

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100" />

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<ProgressBar

android:id="@+id/progressBar"

style="?android:attr/progressBarStyleHorizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:max="100" />

</LinearLayout>

activity_main.xml (水平條狀)

這邊我們只探討 ProgressBar 的基本宣告使用方式，常常與其一起使用的多工更新介面部分可以參考 Handler 這篇文章，以下列出常用到的參數設定與方法 –

style=”?android:attr/progressBarStyleHorizontal”

↳水平狀進度條。

style=”?android:style/widget.ProgressBar”

↳環形進度條。

style=”?android:attr/progressBarStyleSmall”

↳小環形進度條。

style=”?android:attr/progressBarStyle”

↳中環形進度條。

style=”?android:attr/progressBarStyleLarge”

↳大環形進度條。

style=”?android:attr/progressBarStyleSmallInverse”

↳小環形反白進度條。

style=”?android:attr/progressBarStyleInverse”

↳中環形反白進度條。

style=”?android:attr/progressBarStyleLargeInverse”

↳大環形反白進度條。

setMax()、getMax()

↳設定、取得最大值。(僅適用水平狀進度條)

setProgress()、getProgress()

↳設定、取得主要進度值。(僅適用水平狀進度條)

setSecondaryProgress()、getSecondaryProgress()

↳設定、取得次要進度值。(僅適用水平狀進度條)

如何自訂水平條狀進度條外觀

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
	android:max="100"
	android:progressDrawable="@drawable/progress_layer" /> //進度條外觀

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<ProgressBar

android:id="@+id/progressBar"

style="?android:attr/progressBarStyleHorizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:max="100"

android:progressDrawable="@drawable/progress_layer" /> //進度條外觀

</LinearLayout>

activity_main.xml

我們可以直接透過設定 android:progressDrawable 屬性的方式，將 ProgressBar 做一些基本的外觀變化，在設定 android:progressDrawable 屬性的時候，我們必須使用 layer-list 資源檔，來定義多層重疊的狀態條屬性。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:id="@android:id/background" <span class="crayon-c">//進度條的背景圖片</span>
        android:drawable="@drawable/background_shape" />
    
    <item android:id="@android:id/progress" > //<span class="crayon-c">進度條的主要進度值圖片</span>      
        <clip android:drawable="@drawable/progress_shape" />     
    </item>
    
    <item android:id="@android:id/secondaryProgress" > <span class="crayon-c">//進度條的次要進度值圖片</span>
        <clip android:drawable="@drawable/secondaryProgress_shape" />
    </item>
    
</layer-list>

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:id="@android:id/background" //進度條的背景圖片

android:drawable="@drawable/background_shape" />

<item android:id="@android:id/progress" > //進度條的主要進度值圖片

</item>

<item android:id="@android:id/secondaryProgress" > //進度條的次要進度值圖片

</item>

</layer-list>

progress_layer.xml

接著我們自訂了一個名為 progress_layer.xml 的 layer-list 資源檔，其中我們必須定義三個帶有特定 id 名稱的 <item> 標籤，條列如下 –

@android:id/background

此 id 的 <item> 標籤代表著 ProgressBar 中進度條的底圖圖片，不得任意修改 id 名稱。

@android:id/progress

此 id 的 <item> 標籤代表著 ProgressBar 中進度條的主要進度值圖片，不得任意修改 id 名稱。

@android:id/secondaryProgress

此 id 的 <item> 標籤代表著 ProgressBar 中進度條的次要進度值圖片，不得任意修改 id 名稱。

接著，我們在每個 <item> 標籤中分別給訂了一個 Shape 資源檔，以自訂每個部分的外觀，程式碼片段如下 –

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners android:radius="8dp" />
    <gradient
        android:startColor="#ffaaaaaa"
        android:centerColor="#ffffffff"
        android:endColor="#ffcccccc"
        android:type="linear"
        android:angle="90" />
</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle" >

<gradient

android:startColor="#ffaaaaaa"

android:centerColor="#ffffffff"

android:endColor="#ffcccccc"

android:type="linear"

android:angle="90" />

</shape>

background_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners android:radius="8dp" />
    <gradient
        android:startColor="#ff333333"
        android:centerColor="#ffeeeeee"
        android:endColor="#ff888888"
        android:type="linear"
        android:angle="90" />
</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle" >

<gradient

android:startColor="#ff333333"

android:centerColor="#ffeeeeee"

android:endColor="#ff888888"

android:type="linear"

android:angle="90" />

</shape>

progress_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners android:radius="8dp" />
    <gradient
        android:startColor="#ff666666"
        android:centerColor="#ffeeeeee"
        android:endColor="#ffaaaaaa"
        android:type="linear"
        android:angle="90" />
</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle" >

<gradient

android:startColor="#ff666666"

android:centerColor="#ffeeeeee"

android:endColor="#ffaaaaaa"

android:type="linear"

android:angle="90" />

</shape>

secondaryProgress_shape.xml

透過三個定義不同顏色與樣式的 Shape 資源檔，我們可以很自由的自訂水平條狀進度條的外觀。

如何自訂環狀進度條外觀

與水平狀進度條一樣，在我們需要改變環狀進度條外觀的時候，亦會利用資源檔來做設定，自訂的方式可以根據需求有多種不同的變化，以下列出三種方式 –

➥直接使用 shape 資源檔自訂外觀

➥透過 Rotate 動畫資源檔搭配 shape 資源檔自訂外觀

➥透過 animation-list 動畫資源檔自訂外觀

直接使用 shape 資源檔自訂外觀

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ring_shape" />

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<ProgressBar

android:id="@+id/progressBar"

style="?android:attr/progressBarStyleLarge"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/ring_shape" />

</LinearLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="3"
    android:thicknessRatio="20"
    android:useLevel="false" >

    <solid android:color="#ffff0000" />

</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="ring"

android:innerRadiusRatio="3"

android:thicknessRatio="20"

android:useLevel="false" >

</shape>

ring_shape.xml

我們自訂了一個名為 ring_shape.xml 的 Shape 資源檔，並將 ProgressBar 的 android:background 設定為 ring_shape.xml，基本的自訂外觀就完成了，設定完後我們會發現，原本預設的環狀進度條是逆時針轉圈，現在變成了順時針與逆時針的進度列不斷交錯轉圈，可以理解成我們在原本預設的逆時針轉圈外，再加入了順時針轉圈的效果。

透過 Rotate 動畫資源檔搭配 shape 資源檔自訂外觀

在上一個方法中，新出現的順時針轉動進度條其實是 indeterminate 進度列，我們可以透過自訂 indeterminate 的相關屬性，來取消原本預設的逆時針轉動進度條，並進一步控制順時針轉動進度條的顏色變化或者是轉動速度。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminateDrawable="@drawable/ring_rotate" //設定轉動動畫
        android:indeterminateDuration="1500" //設定轉動間隔時間(毫秒)
        android:indeterminateBehavior="repeat" //設定進度條為重複播放
        android:indeterminateOnly="true" /> //強制 indeterminate 模式

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<ProgressBar

android:id="@+id/progressBar"

style="?android:attr/progressBarStyleLarge"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:indeterminateDrawable="@drawable/ring_rotate" //設定轉動動畫

android:indeterminateDuration="1500" //設定轉動間隔時間(毫秒)

android:indeterminateBehavior="repeat" //設定進度條為重複播放

android:indeterminateOnly="true" /> //強制 indeterminate 模式

</LinearLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%" //動畫開始時的影像 X 座標，0表示最左邊，1表示最右邊
    android:pivotY="50%" //動畫開始時的影像 Y 座標，0表示最左邊，1表示最右邊
    android:fromDegrees="0" //動畫開始時影像的角度
    android:toDegrees="360" //動畫結束時影像的角度
    android:drawable="@drawable/ring_shape" /> //設定動畫的圖案

<?xml version="1.0" encoding="utf-8"?>

<rotate xmlns:android="http://schemas.android.com/apk/res/android"

android:pivotX="50%" //動畫開始時的影像 X 座標，0表示最左邊，1表示最右邊

android:pivotY="50%" //動畫開始時的影像 Y 座標，0表示最左邊，1表示最右邊

android:fromDegrees="0" //動畫開始時影像的角度

android:toDegrees="360" //動畫結束時影像的角度

android:drawable="@drawable/ring_shape" /> //設定動畫的圖案

ring_rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="3"
    android:thicknessRatio="10"
    android:useLevel="false" >

    <gradient //設置形狀的漸變顏色
        android:startColor="#ffff0000" //漸變起始顏色
        android:endColor="#ffffaaaa" //漸變結束顏色
        android:type="sweep" //掃描性漸變
        android:useLevel="false" />

</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="ring"

android:innerRadiusRatio="3"

android:thicknessRatio="10"

android:useLevel="false" >

<gradient //設置形狀的漸變顏色

android:startColor="#ffff0000" //漸變起始顏色

android:endColor="#ffffaaaa" //漸變結束顏色

android:type="sweep" //掃描性漸變

android:useLevel="false" />

</shape>

ring_shape.xml

這裡我們宣告了一個名為 ring_rotate.xml 的動畫資源檔，並設定 ring_shape.xml 為其動畫所使用的圖案，最後在 ring_shape.xml 中設定我們想要的進度條漸變效果與顏色(當然簡單一點我們亦可以直接傳入一張圖片，讓它不斷的轉動)。

透過 animation-list 動畫資源檔自訂外觀

除了透過設定 rotate 資源檔的自訂動畫外觀，我們亦可以透過 animation-list 資源檔，使用多張自己所定義的圖片過場動畫當作 ProgerssBar 轉動的動畫，實作方式如下 –

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminateDrawable="@drawable/circles_anim" //設定轉動動畫
        android:indeterminateDuration="1500" //設定轉動間隔時間(毫秒)
        android:indeterminateBehavior="repeat" //設定進度條為重複播放
        android:indeterminateOnly="true" /> //強制 indeterminate 模式

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<ProgressBar

android:id="@+id/progressBar"

style="?android:attr/progressBarStyleLarge"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:indeterminateDrawable="@drawable/circles_anim" //設定轉動動畫

android:indeterminateDuration="1500" //設定轉動間隔時間(毫秒)

android:indeterminateBehavior="repeat" //設定進度條為重複播放

android:indeterminateOnly="true" /> //強制 indeterminate 模式

</LinearLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" > //設置動畫是否只播放一次，false 為連續播放

    <item android:drawable="@drawable/progress_bar_circles_01" 
          android:duration="300" /> //停留時間
    <item android:drawable="@drawable/progress_bar_circles_02" 
          android:duration="300" /> //停留時間
    <item android:drawable="@drawable/progress_bar_circles_03" 
          android:duration="300" /> //停留時間
    <item android:drawable="@drawable/progress_bar_circles_04" 
          android:duration="300" /> //停留時間
    <item android:drawable="@drawable/progress_bar_circles_05" 
          android:duration="300" /> //停留時間
    <item android:drawable="@drawable/progress_bar_circles_06" 
          android:duration="300" /> //停留時間
    <item android:drawable="@drawable/progress_bar_circles_07" 
          android:duration="300" /> //停留時間
    <item android:drawable="@drawable/progress_bar_circles_08" 
          android:duration="300" /> //停留時間
</animation-list>

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"

android:oneshot="false" > //設置動畫是否只播放一次，false 為連續播放

<item android:drawable="@drawable/progress_bar_circles_01"