一起學Android之ProgressBar

本文簡述在Android開發中進度條(ProgressBar)的常見應用，僅供學習分享使用。

概述

在Android開發中，進度條的使用場景有很多，如播放電影時可拖動的觀看進度條，評分時使用的評分條，上傳下載時的進度條，網路載入時的圓形進度條等。本文主要講解三種進度條的常見用法：ProgressBar，SeekBar，RatingBar。

ProgressBar常見用法

ProgressBar涉及知識點

1. android:max 設置進度條的最大進度
2. android:progress 設置進度條的當前進度（如播放視頻的播放進度）
3. android:secondaryProgress 設置進度條的第二進度（如播放視頻時的緩衝進度）
4. style="?android:attr/progressBarStyleHorizontal" 設置進度條的樣式（水平樣式）
5. style="?android:attr/progressBarStyleLarge" 設置進度條的樣式（垂直樣式），圓形進度條
6. isIndeterminate() 判斷進度條的形狀，true:水平 false:圓形
7. incrementProgressBy(10) 增加當前的進度 incrementSecondaryProgressBy(10) 增加當前的第二進度。

ProgressBar效果圖如下圖所示：

ProgressBar示例代碼：

 1 <LinearLayout
 2         android:id="@+id/ll_progress"
 3         android:layout_width="match_parent"
 4         android:layout_height="wrap_content"
 5         android:layout_below="@id/ll_seeking"
 6         android:layout_marginTop="8dp"
 7         android:layout_marginRight="15dp"
 8         android:orientation="horizontal">
 9     <TextView
10         android:id="@+id/tv_progress"
11         android:layout_width="wrap_content"
12         android:layout_height="wrap_content"
13         android:text="@string/progress1"
14         android:textSize="20dp"/>
15     <ProgressBar
16         android:id="@+id/pb_01"
17         android:max="100"
18         android:progress="30"
19         android:layout_marginLeft="10dp"
20         android:secondaryProgress="40"
21         style="?android:attr/progressBarStyleHorizontal"
22         android:layout_weight="1"
23         android:layout_width="0dp"
24         android:layout_height="40dp"/>
25     </LinearLayout>
26     <TextView
27         android:id="@+id/tv_progress2"
28         android:layout_width="wrap_content"
29         android:layout_height="wrap_content"
30         android:layout_below="@id/ll_progress"
31         android:layout_marginTop="8dp"
32         android:text="@string/progress2"
33         android:textSize="20dp"/>
34     <ProgressBar
35         android:id="@+id/pb_02"
36         android:layout_alignLeft="@id/rbar"
37         android:layout_below="@id/ll_progress"
38         style="?android:attr/progressBarStyleLarge"
39         android:layout_width="wrap_content"
40         android:layout_height="wrap_content"/>

SeekBar常見用法

SeekBar涉及知識點

1. android:max ，android:progress ，android:secondaryProgress此三個屬性和ProgressBar相同，參考上面。
2. setOnSeekBarChangeListener 用於設置SeekBar的監聽事件，監聽用戶拖動的狀態。
3. OnSeekBarChangeListener表示一個介面，有三個函數需要實現：
• onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) //進度改變
• onStartTrackingTouch(SeekBar seekBar) //開始觸摸
• onStopTrackingTouch(SeekBar seekBar) //停止觸摸

SeekBar效果圖如下圖所示：

SeekBar示例代碼

 1  //監控SeekBar事件
 2         mSeekBar=(SeekBar)this.findViewById(R.id.sbar);
 3         mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
 4             @Override
 5             public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
 6                 Log.i("DemoBar", "SeekBar-->setOnSeekBarChangeListener: "+String.valueOf(progress)+"-->fromUser:"+String.valueOf(fromUser));
 7                 mSeekText.setText(String.valueOf(progress));
 8             }
 9 
10             @Override
11             public void onStartTrackingTouch(SeekBar seekBar) {
12 
13             }
14 
15             @Override
16             public void onStopTrackingTouch(SeekBar seekBar) {
17 
18             }
19         });

RatingBar常見用法

RatingBar涉及知識點

1. android:numStars 表示星星的個數，預設為5個
2. android:rating 表示當前的分值
3. android:stepSize 表示步長，及前進一次多長的跨度，如，0.5表示半顆星星 1表示一顆心
4. setOnRatingBarChangeListener 設置監聽事件，
5. OnRatingBarChangeListener 表示一個介面，只有一個函數需要實現：
   • onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser)

RatingBar效果圖如下圖所示：

RatingBar示例代碼

1  mRatingBar =(RatingBar) this.findViewById(R.id.rbar);
2         mRatingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
3             @Override
4             public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
5                 Log.i("DemoBar", "RatingBar-->onRatingChanged: "+String.valueOf(rating)+"-->fromUser:"+String.valueOf(fromUser));
6                 mRatingText.setText(String.valueOf(rating));
7             }
8         });

備註

一起學習，一起總結，一起進步。附上整體演示圖片