Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> Android應用開發入門（二十一）UI控件ProgressBar的使用

Android應用開發入門（二十一）UI控件ProgressBar的使用

編輯：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控件以及其兩個子控件的用法，此處不包括控件樣式的設置，對於控件的展示效果，以後再進行詳解。

 

  1. 上一頁:
  2. 下一頁:
Android開發實例
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
android api 中文 （74）—— AdapterView.AdapterContextMenuInfo 控制Android LED燈顏色的代碼實例 Android RelativeLayout相對布局屬性簡析 通過Handler來更新本線程的UI界面 android api (83) —— InputMethodSession [輸入法] googlemap加載多個overlay內存溢出
android編程之XML文件解析方法詳解(附源碼)

本文實例講述了android編程之XML文件解析方法。分享給大家
android apk反編譯到java源碼的實現方法

Android由於其代碼是放在dalvik虛擬機上的托管代碼，所
基於Android實現ListView圓角效果

本文演示如何在Android中實現ListView圓角效果。　　無論是網
Android的文本和輸入之創建輸入法教程

輸入法編輯器（IME）是讓用戶輸入文本的控件。Android提供
閱讀排行版
Copyright © Android教程網 All Rights Reserved