在 Android 應用程式開發中,ProgressBar 是一個常見且實用的 UI 元件,用來顯示操作進度,例如資料載入、檔案下載或長時間運算。它能讓使用者了解目前任務的進行狀況,提升使用體驗,平時我們在使用程式時也經常看到正在跑動的進度條,這邊要介紹的就是透過ProgressBar來顯示基礎的進度條元件。
首先,ProgressBar主要分為兩種,不確定進度和確定進度
不會顯示實際的進度,常以旋轉圓圈或不斷移動的水平條顯示,表示系統正忙碌中,無法明確估算完成百分比
在 XML 中設定 android:indeterminate="true" 即可啟用
用於表示任務的明確進度,通常以百分比顯示,會根據實際進度,以百分比形式不斷跑動增加,需要程式主動設定進度值
ProgressBar是透過indeterminate是否為true來判斷是否顯示進度,設定為 true 則為不確定進度模式,false 為確定進度模式,而顯示出來的圖像則是透過styl來確定,若不額外設定,ProgressBar預設就會顯示成一直轉圈的灰色圓圈,若希望顯示成水平的進度條,則需額外設定style,如下
style="@android:style/Widget.ProgressBar.Horizontal"
如果想設定進度條的初始進度跟最大值,也可以直接在xml裡做設定
//進度條初始值
android:max="100"
//進度條最大值
android:progress="0"
完整程式碼:
<!-- 不確定型圓形 ProgressBar -->
<ProgressBar
android:id="@+id/progressBarIndeterminate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
//設定為 true 則為不確定進度模式,false 為確定進度模式
android:indeterminate="true" />
<!-- 確定型水平 ProgressBar -->
<ProgressBar
android:id="@+id/progressBarDeterminate"
//設定 ProgressBar 的樣式
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
//進度條初始值和最大值
android:max="100"
android:progress="0" />
style補充:
@android:attr/progressBarStyleHorizontal //細水平長條 ProgressBar
@android:attr/progressBarStyleLarge //大圓形 ProgressBar
@android:attr/progressBarStyleSmall //小圓形 ProgressBar
@android:style/Widget.ProgressBar.Horizontal //粗水平長條 ProgressBar
@android:style/Widget.ProgressBar.Large //大跳躍、旋轉畫面的 ProgressBar
@android:style/Widget.ProgressBar.Small //小跳躍、旋轉畫面的 ProgressBar
@android:style/Widget.ProgressBar.Inverse //大跳躍、反白旋轉畫面的 ProgressBar
記得匯入類別!!!
import android.widget.ProgressBar;
接下來就是實作的程式碼了,不確定型ProgressBar會自動顯示動畫,不需程式操作,但確定型的則需要額外設定,透過模擬一個背景工作,來更新確定型 ProgressBar
如下列程式碼,首先開啟一個子執行緒(Thread),如果進度條小於100,也就是進度條尚未達到最大值,則進度+1,然後把進度丟回主執行緒更新進度條此時的進度,且利用Thread.sleep(50)來達成每次進度+1間隔50毫秒,若偵測到錯誤(InterruptedException)執行緒在執行間隔時被打斷,則將錯誤訊息以及發生位置印出
new Thread(new Runnable() {
@Override
public void run() {
while (progressStatus < 100) {
progressStatus += 1;
// 更新進度條(UI操作必須在主執行緒)
handler.post(new Runnable() {
@Override
public void run() {
//設置進度完成的百分比
progressBarDeterminate.setProgress(progressStatus);
}
});
try {
Thread.sleep(50); // 模擬工作等待時間
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();
執行成果展示: