Android--UI之ProgressBar

本文轉載自查看原文 2013-07-24 08:17 56333 SeekBar/ android/ ProgressBar/ RatingBar/ Android

前言

　　開門見山，開篇明意。這篇博客主要講解一下Android中ProgressBar控件以及間接繼承它的兩個子控件SeekBar、RatingBar的基本用法，因為其有繼承關系，存在一些共有特性，所以在一篇博客中講解。下面先簡單描述一下這三個控件：

ProgressBar是一個進度條控件，一般在需要做某個比較耗時的操作的時候，向用戶展示執行進度，以免用戶以為已經失去響應。
SeekBar是一個拖動條控件，拖動條通過滑塊表示數值，而用戶可以在一定范圍內拖動這個滑塊而改變其數值。
RatingBar是一個星級評分控件，向用戶展示一個評分樣式的控件，用戶可以選擇星級來為其評分。

ProgressBar

　　ProgressBar，進度條，是AndroidUI界面中一個非常實用的組件，通常用於向用戶顯示某個耗時操作完成的百分比。因此它需要動態的顯示進度，從而避免長時間的執行某個耗時的操作，而讓用戶感覺程序失去了相應，從而提高界面的友好性。

　　從官方文檔上看，為了適應不同的應用環境，Android內置了幾種風格的進度條，可以通過Style屬性設置ProgressBar的風格。支持如下屬性，后面在示例中會一一展示：

@android:style/Widget.ProgressBar.Horizontal：水平進度條（可以顯示刻度，常用）。
@android:style/Widget.ProgressBar.Small：小進度條。
@android:style/Widget.ProgressBar.Large：大進度條。
@android:style/Widget.ProgressBar.Inverse：不斷跳躍、旋轉畫面的進度條。
@android:style/Widget.ProgressBar.Large.Inverse:不斷跳躍、旋轉動畫的大進度條。
@android:style/Widget.ProgressBar.Small.Inverse：不斷跳躍、旋轉動畫的小進度條。

　　只有Widget.ProgressBar.Horizontal風格的進度條，才可以設置進度的遞增，其他的風格展示為一個循環的動畫，而設置Widget.ProgressBar.Horizontal風格的進度條，需要用到一些屬性設置遞增的進度，這些屬性都有對應的setter、getter方法，這些屬性如下：

android:max：設置進度的最大值。
android:progress:設置當前第一進度值。
android:secondaryProgress：設置當前第二進度值。
android:visibility：設置是否顯示，默認顯示。

　　對於Widget.ProgressBar.Horizontal風格的進度條而言，在代碼中動態設置移動量，除了可以使用setProgress(int)方法外，Android還為我們提供了另外一個incrementProgressBy(int)方法，它與setProgress(int)的根本區別在於，setProgress(int)是直接設置當前進度值，而incrementProgressBy(int)是設置當前進度值的增量（正數為增，負數為減）。與setProgress(int)和incrementProgressBy(int)對應的還有setSecondaryProgress(int)和incrementSecondaryProgressBy(int)方法，用於設置第二進度值。

　　下面通過一個示例，來講解一下上面的style設置樣式的展示想過，以及動態控制進度條增減的實現。

　　布局代碼：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <TextView
 8         android:layout_width="wrap_content"
 9         android:layout_height="wrap_content"
10         android:text="android:style/Widget.ProgressBar.Small" />
11 
12     <ProgressBar
13         style="@android:style/Widget.ProgressBar.Small"
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content" />
16 
17     <TextView
18         android:layout_width="wrap_content"
19         android:layout_height="wrap_content"
20         android:text="android:style/Widget.ProgressBar.Large" />
21 
22     <ProgressBar
23         android:id="@+id/pbLarge"
24         style="@android:style/Widget.ProgressBar.Large"
25         android:layout_width="wrap_content"
26         android:layout_height="wrap_content" />
27 
28     <TextView
29         android:layout_width="wrap_content"
30         android:layout_height="wrap_content"
31         android:text="android:style/Widget.ProgressBar.Inverse" />
32 
33     <ProgressBar
34         style="@android:style/Widget.ProgressBar.Inverse"
35         android:layout_width="wrap_content"
36         android:layout_height="wrap_content" />
37 
38     <TextView
39         android:layout_width="wrap_content"
40         android:layout_height="wrap_content"
41         android:text="android:style/Widget.ProgressBar.Small.Inverse" />
42 
43     <ProgressBar
44         style="@android:style/Widget.ProgressBar.Small.Inverse"
45         android:layout_width="wrap_content"
46         android:layout_height="wrap_content" />
47 
48     <TextView
49         android:layout_width="wrap_content"
50         android:layout_height="wrap_content"
51         android:text="android:style/Widget.ProgressBar.Large.Inverse" />
52 
53     <ProgressBar
54         style="@android:style/Widget.ProgressBar.Large.Inverse"
55         android:layout_width="wrap_content"
56         android:layout_height="wrap_content" />
57 
58     <TextView
59         android:layout_width="wrap_content"
60         android:layout_height="wrap_content"
61         android:text="android:style/Widget.ProgressBar.Horizontal" />
62 
63     <ProgressBar
64         android:id="@+id/pbHor"
65         style="@android:style/Widget.ProgressBar.Horizontal"
66         android:layout_width="match_parent"
67         android:layout_height="wrap_content"
68         android:max="100"
69         android:progress="20"
70         android:secondaryProgress="60" />
71 
72     <LinearLayout
73         android:layout_width="match_parent"
74         android:layout_height="match_parent"
75         android:orientation="horizontal" >
76         <!-- 設置一個按鈕控制水平進度的遞增 -->
77         <Button
78             android:id="@+id/btnAdd"
79             android:layout_width="wrap_content"
80             android:layout_height="wrap_content"
81             android:text="  +  " />
82         <!-- 設置一個按鈕控制水平進度的遞減 -->
83         <Button
84             android:id="@+id/btnReduce"
85             android:layout_width="wrap_content"
86             android:layout_height="wrap_content"
87             android:layout_marginLeft="30dp"
88             android:text="  -  " />
89         <!-- 設置一個按鈕控制Style為large的進度顯示與隱藏 -->
90         <Button
91             android:id="@+id/btnVisible"
92             android:layout_width="wrap_content"
93             android:layout_height="wrap_content"
94             android:layout_marginLeft="30dp"
95             android:text="VisibleLarge" />
96     </LinearLayout>
97 
98 </LinearLayout>

　　實現代碼：

 1 package com.bgxt.progressbarseriesdemo;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.View;
 6 import android.view.View.OnClickListener;
 7 import android.widget.Button;
 8 import android.widget.ProgressBar;
 9 
10 public class ProgressBarActivity extends Activity {
11 
12     private Button btnAdd, btnReduce, btnVisible;
13     private ProgressBar pbHor, pbLarge;
14 
15     @Override
16     protected void onCreate(Bundle savedInstanceState) {
17         super.onCreate(savedInstanceState);
18         setContentView(R.layout.activity_progressbar);
19 
20         btnAdd = (Button) findViewById(R.id.btnAdd);
21         btnReduce = (Button) findViewById(R.id.btnReduce);
22         btnVisible = (Button) findViewById(R.id.btnVisible);
23         pbHor = (ProgressBar) findViewById(R.id.pbHor);
24         pbLarge = (ProgressBar) findViewById(R.id.pbLarge);
25 
26         btnAdd.setOnClickListener(mathClick);
27         btnReduce.setOnClickListener(mathClick);
28         btnVisible.setOnClickListener(new View.OnClickListener() {
29 
30             @Override
31             public void onClick(View v) {
32                 // 判斷Large進度條是否顯示，顯示則隱藏，隱藏則顯示
33                 if (pbLarge.getVisibility() == View.VISIBLE) {
34                     pbLarge.setVisibility(View.GONE);
35                 } else {
36                     pbLarge.setVisibility(View.VISIBLE);
37                 }
38 
39             }
40         });
41     }
42 
43     private View.OnClickListener mathClick = new OnClickListener() {
44 
45         @Override
46         public void onClick(View v) {
47             switch (v.getId()) {
48             case R.id.btnAdd:
49                 // 如果是增加按鈕，因為進度條的最大值限制在100，第一刻度限制在90.
50                 // 在此限度內，以1.2倍遞增
51                 // 使用setProgress()
52                 if (pbHor.getProgress() < 90) {
53                     pbHor.setProgress((int) (pbHor.getProgress() * 1.2));
54                 }
55                 if (pbHor.getSecondaryProgress() < 100) {
56                     pbHor.setSecondaryProgress((int) (pbHor
57                             .getSecondaryProgress() * 1.2));
58                 }
59                 break;
60             case R.id.btnReduce:
61                 // 如果是增加按鈕，因為進度條的最大值限制在100，第一刻度限制在10.第二刻度限制在20
62                 // 在此限度內，以10點為基數進行遞減。
63                 // 使用incrementXxxProgressBy(int)
64                 if (pbHor.getProgress() > 10) {
65                     pbHor.incrementProgressBy(-10);
66                 }
67                 if (pbHor.getSecondaryProgress() > 20) {
68                     pbHor.incrementSecondaryProgressBy(-10);
69                 }
70                 break;
71             }
72         }
73     };
74 
75 }

　　展示效果：初始--遞增--隱藏

SeekBar

　　SeekBar，拖動條控件，間接繼承自ProgressBar，所以與進度條類似，但是進度條采用顏色填充來表名進度完成的程度，而拖動條則通過滑動的位置來標識數值。

　　SeekBar繼承自ProgressBar，所以也繼承了它的屬性設置，上面介紹的一些屬性在SeekBar中都可以用到。因為SeekBar涉及到一個滑塊的概念，所以新增了屬性android:thumb來通過設置一個Drawable對象，指定自定義滑塊的外觀，當然如果不設定也可以默認使用Android自帶的風格。

　　當用戶按住滑塊進行滑動的時候，會觸發一個SeekBar.OnSeekBarChangeListener事件，這是一個接口，需要開發人員實現三個方法：

onProgressChanged(SeekBar seekBar,int progress,boolean fromUser):滑塊在移動的時候響應。seekBar為觸發事件的SeekBar控件，progress為當前SeekBar的滑塊數值，fromUser為是否用戶拖動產生的響應。
onStartTrackingTouch(SeekBar seekBar):滑塊開始移動的時候響應。
onStopTrackingTouch(SeekBar seekBar):滑塊結束移動的時候相應。

　　下面通過一個示例來講解一下SeekBar的基本用法。

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6         <TextView
 7             
 8         android:id="@+id/textview1"
 9         android:layout_width="match_parent" 
10         android:layout_height="30dp" />
11 
12     <TextView
13         android:id="@+id/textview2"
14         android:layout_width="match_parent"
15         android:layout_height="30dp" />
16 
17     <SeekBar       
18         android:layout_marginTop="30dp"
19         android:id="@+id/seekbar1"
20         android:layout_width="match_parent"
21         android:layout_height="wrap_content"
22         android:max="100"
23         android:progress="30" />
24     <!--設置一個拖動條，滑塊為定義的bar圖片-->
25     <SeekBar
26         android:layout_marginTop="30dp"
27         android:id="@+id/seekbar2"
28         android:layout_width="match_parent"
29         android:layout_height="wrap_content"
30         android:max="100"
31         android:progress="20"
32         android:thumb="@drawable/bar"
33         android:secondaryProgress="80" />
34 
35 </LinearLayout>

　　實現代碼：

 1 package com.bgxt.progressbarseriesdemo;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.widget.SeekBar;
 6 import android.widget.TextView;
 7 import android.widget.SeekBar.OnSeekBarChangeListener;
 8 
 9 public class SeekBarActivity extends Activity {
10     private TextView textview1, textview2;
11     private SeekBar seekbar1, seekbar2;
12     @Override
13     protected void onCreate(Bundle savedInstanceState) {
14         // TODO Auto-generated method stub
15         super.onCreate(savedInstanceState);
16         setContentView(R.layout.activity_seekbar);
17         
18         textview1 = (TextView) findViewById(R.id.textview1);
19         textview2 = (TextView) findViewById(R.id.textview2);
20         seekbar1 = (SeekBar) findViewById(R.id.seekbar1);
21         seekbar2 = (SeekBar) findViewById(R.id.seekbar2);
22 
23         seekbar1.setOnSeekBarChangeListener(seekBarChange);
24         seekbar2.setOnSeekBarChangeListener(seekBarChange);
25     }
26     private OnSeekBarChangeListener seekBarChange = new OnSeekBarChangeListener() {
27 
28         @Override
29         public void onStopTrackingTouch(SeekBar seekBar) {
30             if (seekBar.getId() == R.id.seekbar1) {
31                 textview1.setText("seekbar1停止拖動");
32             } else {
33                 textview1.setText("seekbar2停止拖動");
34             }
35         }
36 
37         @Override
38         public void onStartTrackingTouch(SeekBar seekBar) {
39             if (seekBar.getId() == R.id.seekbar1) {
40                 textview1.setText("seekbar1開始拖動");
41             } else {
42                 textview1.setText("seekbar2開始拖動");
43             }
44         }
45 
46         @Override
47         public void onProgressChanged(SeekBar seekBar, int progress,
48                 boolean fromUser) {
49             if (seekBar.getId() == R.id.seekbar1) {
50                 textview2.setText("seekbar1的當前位置是：" + progress);
51             } else {
52                 textview2.setText("seekbar2的當前位置是：" + progress);
53             }
54 
55         }
56     };
57 }

　　效果展示：

RatingBar

　　RatingBar，星級評分控件，RatingBar與SeekBar的用法非常相似，並且具有相同的父類AbsSeekBar，AbsSeekbar又繼承自ProgressBar。而RatingBar與SeekBar最大的區別在於：RatingBar通過星形圖標來表示進度。

　　RatingBar擴展了AbsSeekbar，所以新增了一些固有的屬性，也屏蔽了一些無用的屬性，如在RatingBar中就不存在第二進度的概念，新增的屬性有如下幾個：

android:isIndicator:設置是否允許用戶修改，true為不允許，默認為false，允許。
android:numStars:設置評分控件一共展示多少個星星，默認5個。
android:rating:設置初始默認星級數。
android:stepSize:設置每次需要修改多少個星級。

　　對於RatingBar而言，當改變其星級選項的時候，會觸發一個RatingBar.OnRatingBarChangeListener事件，這是一個接口，需要實現其中的onRatingChanged(RatingBar ratingBar,float rating,boolean fromUser)方法，其中ratingBar表示觸發事件的控件，rating表示當前的星級，fromUser表示是否用戶觸發的修改事件。

　　在這里需要注意的一點就是，因為繼承關系，RatingBar也有Progress屬性，但是還有另外一個屬性rating表示星級。這兩個屬性代表的意義是有區別的，區別在於Progress屬性針對的是Max屬性設置的值而言的，而rating是單純的表示第幾顆星。

　　下面通過一個示例來展示一下評分控件的基本使用。

　　布局代碼：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <TextView
 8         android:layout_width="match_parent"
 9         android:layout_height="wrap_content"
10         android:text="評分控件的使用"
11         android:textSize="20dp" />
12 
13     <RatingBar
14         android:id="@+id/rbRating"
15         android:layout_width="wrap_content"
16         android:layout_height="wrap_content" />
17 
18     <RatingBar
19         android:id="@+id/rbRating1"
20         android:layout_width="wrap_content"
21         android:layout_height="wrap_content"
22         android:isIndicator="false"
23         android:max="100"
24         android:numStars="4"
25         android:rating="2.5"
26         android:stepSize="0.5" />
27 
28 </LinearLayout>

　　實現代碼：

 1 package com.bgxt.progressbarseriesdemo;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.widget.RatingBar;
 6 import android.widget.RatingBar.OnRatingBarChangeListener;
 7 import android.widget.Toast;
 8 
 9 public class RatingBarActivity extends Activity implements OnRatingBarChangeListener {
10 
11     private RatingBar rbRating,rbRating1;
12     @Override
13     protected void onCreate(Bundle savedInstanceState) {
14         super.onCreate(savedInstanceState);
15         setContentView(R.layout.activity_ratingbar);
16         rbRating=(RatingBar)findViewById(R.id.rbRating);
17         rbRating1=(RatingBar)findViewById(R.id.rbRating1);
18         //手動設置第一個RatingBar的屬性值
19         rbRating.setMax(100);
20         rbRating.setProgress(20);
21         rbRating.setOnRatingBarChangeListener(this);
22         rbRating1.setOnRatingBarChangeListener(this);
23     }
24     @Override
25     public void onRatingChanged(RatingBar ratingBar, float rating,
26             boolean fromUser) {
27         //分別顯示Progress屬性和rating屬性的不同
28         int progress=ratingBar.getProgress();
29         Toast.makeText(RatingBarActivity.this, "progress:"+progress+" rating :"+rating,Toast.LENGTH_SHORT).show();
30     }
31     
32 }

　　展示效果：

　　示例代碼下載

總結

　　以上就詳細說明了ProgressBar控件以及其兩個子控件的用法，此處不包括控件樣式的設置，對於控件的展示效果，以后再進行詳解。

　　請支持原創，尊重原創，轉載請注明出處。謝謝。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Android--UI之AutoCompleteTextView Android--UI之ImageSwitcher Android--UI之ScrollView Android--UI布局 Android--UI之Spinner Android--UI之ListView Android--UI之Button Android--UI布局 Android--UI之TextView Android--UI之EditText