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

《Android Developers 參考文獻》

➥ProgressBar

 

《繼承架構》

extends AbsSeekBar


java.lang.Object

android.view.View

 ↳android.widget.ProgressBar

 

《簡單介紹》

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

➥基本用法

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

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

基本用法

MainActivity.java

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

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

 

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

activity_main.xml

我們可以直接透過設定 android:progressDrawable 屬性的方式,將 ProgressBar 做一些基本的外觀變化,在設定 android:progressDrawable 屬性的時候,我們必須使用 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 資源檔,以自訂每個部分的外觀,程式碼片段如下 –

background_shape.xml

progress_shape.xml

secondaryProgress_shape.xml

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

 

如何自訂環狀進度條外觀

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

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

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

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


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

activity_main.xml

ring_shape.xml

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

 

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

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

activity_main.xml

ring_rotate.xml

ring_shape.xml

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

 

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

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

activity_main.xml

circles_anim.xml

我們自訂了一個名為 circles_anim.xml 的 animation-list 動畫資源檔,並在其中設定好每張圖片的停留時間與播放順序,接著在 ProgerssBar 中將 android:indeterminateDrawable 屬性設定成此動畫資源檔即可。

賽肥膩膩

我們是低調到不行的肥膩夫妻檔,一路上一邊吵鬧一邊記錄著生活大小事,偶爾一起暴飲暴食再偶爾一起節食減肥,最沒恆心與毅力但一路走來也持續減肥了好幾次,我們重量不重質,所以完全沒有效果也是理所當然的事。

上 / 下一篇文章

臉書留言

一般留言

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *