iT邦幫忙

2025 iThome 鐵人賽

DAY 8
0

在 Android 應用程式開發中,ProgressBar 是一個常見且實用的 UI 元件,用來顯示操作進度,例如資料載入、檔案下載或長時間運算。它能讓使用者了解目前任務的進行狀況,提升使用體驗,平時我們在使用程式時也經常看到正在跑動的進度條,這邊要介紹的就是透過ProgressBar來顯示基礎的進度條元件。

首先,ProgressBar主要分為兩種,不確定進度和確定進度

1.不確定進度

不會顯示實際的進度,常以旋轉圓圈或不斷移動的水平條顯示,表示系統正忙碌中,無法明確估算完成百分比
在 XML 中設定 android:indeterminate="true" 即可啟用

2.確定進度

用於表示任務的明確進度,通常以百分比顯示,會根據實際進度,以百分比形式不斷跑動增加,需要程式主動設定進度值


activity_main

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

MainActivity

記得匯入類別!!!

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

執行成果展示:
image alt


上一篇
Day 07.SeekBar
下一篇
Day 09.Toast
系列文
Android 新手的 30 天進化論:從初學者到小專案開發者12
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言