Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> Android學習指南之十一:ProgressBar、SeekBar和RatingBar

Android學習指南之十一:ProgressBar、SeekBar和RatingBar

編輯:關於android開發

      上一講中介紹了Spinner、AutoCompleteTextView、DatePicker、TimePicker,本節主要講解ProgressBar、SeekBar和RatingBar。

      一、ProgressBar進度條

      在某項延續性工作的進展過程中為了不讓用戶覺得程序死掉了,需要有個活動的進度條,表示此過程正在進行中。Android中使用ProgressBar來實現這一功能:

      1、簡單的進度條

      在xml中添加:

XML/HTML代碼
  1. <ProgressBar android:id=”@+id/ProgressBar01″   
  2. android:layout_width=”wrap_content”   
  3. android:layout_height=”wrap_content”>  
  4. </ProgressBar>  

       就可以看到下面,圓形的、大大的圈圈:

Android學習指南之十一:ProgressBar、SeekBar和RatingBar

       2、各種各樣的圓圈:

Android學習指南之十一:ProgressBar、SeekBar和RatingBar

       注意標題欄上也有一個進度條,下面是代碼:

Java代碼
  1. package android.basic.lesson11;   
  2.   
  3. import android.app.Activity;   
  4. import android.os.Bundle;   
  5. import android.view.Window;   
  6.   
  7. public class MainHelloProgressBar extends Activity {   
  8.     /** Called when the activity is first created. */  
  9.     @Override  
  10.     public void onCreate(Bundle savedInstanceState) {   
  11.         super.onCreate(savedInstanceState);   
  12.       //在標題條裡放置進度條。請求窗口特色風格,這裡設置成不明確的進度風格   
  13.       requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);   
  14.       setContentView(R.layout.main);   
  15.       //設置標題欄中的不明確的進度條是否可以顯示,當你需要表示處理中的時候設置為True,處理完畢後設置為false   
  16.       setProgressBarIndeterminateVisibility(true);   
  17.     }   
  18. }  


       下面試main.xml中的代碼,大家注意黑體字部分的內容,看看不同樣式的不同的表現:

XML/HTML代碼
  1. <?xml version=”1.0″ encoding=”utf-8″?>  
  2. <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”   
  3. android:orientation=”vertical”   
  4. android:background=”#003399″   
  5. android:layout_width=”fill_parent”   
  6. android:layout_height=”fill_parent”   
  7. >  
  8. <ProgressBar android:id=”@+id/ProgressBar01″   
  9. android:layout_width=”wrap_content”   
  10. android:layout_height=”wrap_content”>  
  11. </ProgressBar>  
  12. <ProgressBar android:id=”@+id/ProgressBar02″   
  13. style=”?android:attr/progressBarStyleLarge”           大圓圈   
  14. android:layout_width=”wrap_content”   
  15. android:layout_height=”wrap_content”>  
  16. </ProgressBar>  
  17. <ProgressBar android:id=”@+id/ProgressBar03″   
  18. style=”?android:attr/progressBarStyleSmall”          小圓圈   
  19. android:layout_width=”wrap_content”   
  20. android:layout_height=”wrap_content”>  
  21. </ProgressBar>  
  22. <ProgressBar android:id=”@+id/ProgressBar03″   
  23. style=”?android:attr/progressBarStyleSmallTitle”   標題條的樣式   
  24. android:layout_width=”wrap_content”   
  25. android:layout_height=”wrap_content”>  
  26. </ProgressBar>  
  27. </LinearLayout>  

       3、長條狀的進度條

       xml代碼:

XML/HTML代碼
  1. <ProgressBar android:id=”@+id/ProgressBar04″      
  2. style=”?android:attr/progressBarStyleHorizontal”      
  3. android:layout_marginLeft=”10dp”      
  4. android:layout_marginRight=”10dp”      
  5. android:max=”100″                                  最大刻度按100算      
  6. android:progress=”30″                              第一進度是30      
  7. android:secondaryProgress=”80″              第二進度是80      
  8. android:layout_width=”fill_parent”              進度條的顯示長度是鋪滿父窗口      
  9. android:layout_height=”wrap_content”>     
  10. </ProgressBar>     
  11. <?xml version=”1.0″ encoding=”utf-8″?>     
  12. <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”      
  13. android:orientation=”vertical”      
  14. android:background=”#003399″      
  15. android:layout_width=”fill_parent”      
  16. android:layout_height=”fill_parent”      
  17. >     
  18. <ProgressBar android:id=”@+id/ProgressBar04″      
  19. style=”?android:attr/progressBarStyleHorizontal”      
  20. android:layout_marginTop=”10dp”      
  21. android:layout_marginLeft=”10dp”      
  22. android:layout_marginRight=”10dp”      
  23. android:max=”100″      
  24. android:progress=”30″      
  25. android:secondaryProgress=”80″      
  26. android:layout_width=”fill_parent”      
  27. android:layout_height=”wrap_content”>     
  28. </ProgressBar>     
  29. </LinearLayout>  
Java代碼
  1.   
  2.   
  3. package android.basic.lesson11;   
  4.   
  5. import android.app.Activity;   
  6.   
  7. import android.os.Bundle;   
  8.   
  9. import android.view.Window;   
  10.   
  11. public class MainHelloProgressBar extends Activity {   
  12.   
  13. /** Called when the activity is first created. */  
  14.   
  15. @Override  
  16.   
  17. public void onCreate(Bundle savedInstanceState) {   
  18.   
  19. super.onCreate(savedInstanceState);   
  20.   
  21. //設置窗口進度條特性風格   
  22.   
  23. requestWindowFeature(Window.FEATURE_PROGRESS);   
  24.   
  25. setContentView(R.layout.main);   
  26.   
  27. //設置進度條可見性   
  28.   
  29. setProgressBarVisibility(true);   
  30.   
  31. //設置進度條進度值,要乘以100的   
  32.   
  33. setProgress(60*100);   
  34.   
  35. setSecondaryProgress(80*100);   
  36. }   
  37.   
  38. }  

       運行效果:

Android學習指南之十一:ProgressBar、SeekBar和RatingBar

       同學們可以使用下面的代碼對,進度條進行一些操作練習:

       private ProgressBar pb;                                                        //定義ProgressBar
       pb = (ProgressBar) findViewById(R.id.ProgressBar01);
       pb.incrementProgressBy(5);                                                 //ProgressBar進度值增加5
       pb.incrementProgressBy(-5);                                                //ProgressBar進度值減少5
       pb.incrementSecondaryProgressBy(5);                                 //ProgressBar第二個進度條 進度值增加5
       pb.incrementSecondaryProgressBy(-5);                                //ProgressBar第二個進度條 進度值減少5

       二、SeekBar拖動條(滑動條)

       SeekBar可以作為音樂播放器的進度指示和調整工具,音量調整工具等,SeekBar是ProgressBar的一個子類,下面我們用一個可以改變並顯示當前進度的拖動條例子來演示一下它的使用:

       1、main.xml

       < ?xml version="1.0" encoding="utf-8"?>                               

       2、java:

Java代碼
  1. package android.basic.lesson11;   
  2.   
  3. import android.app.Activity;   
  4. import android.os.Bundle;   
  5. import android.widget.SeekBar;   
  6. import android.widget.SeekBar.OnSeekBarChangeListener;   
  7. import android.widget.TextView;   
  8. import android.widget.Toast;   
  9.   
  10. public class MainHelloSeekBar extends Activity {   
  11.         /** Called when the activity is first created. */  
  12.         @Override  
  13.         public void onCreate(Bundle savedInstanceState) {   
  14.                 super.onCreate(savedInstanceState);   
  15.                 setContentView(R.layout.main);   
  16.   
  17.                 //找到拖動條和文本框   
  18.                 final SeekBar sb = (SeekBar) findViewById(R.id.SeekBar01);   
  19.                 final TextView tv1 = (TextView) findViewById(R.id.TextView01);   
  20.   
  21.                 //設置拖動條的初始值和文本框的初始值   
  22.                 sb.setMax(100);   
  23.                 sb.setProgress(30);   
  24.                 tv1.setText("當前進度:" + sb.getProgress());   
  25.   
  26.                 //設置拖動條改變監聽器   
  27.                 OnSeekBarChangeListener osbcl = new OnSeekBarChangeListener() {   
  28.   
  29.                         @Override  
  30.                         public void onProgressChanged(SeekBar seekBar, int progress,   
  31.                                         boolean fromUser) {   
  32.                                 tv1.setText("當前進度:" + sb.getProgress());   
  33.                                 Toast.makeText(getApplicationContext(), "onProgressChanged",   
  34.                                                 Toast.LENGTH_SHORT).show();   
  35.                         }   
  36.   
  37.                         @Override  
  38.                         public void onStartTrackingTouch(SeekBar seekBar) {   
  39.                                 Toast.makeText(getApplicationContext(), "onStartTrackingTouch",   
  40.                                                 Toast.LENGTH_SHORT).show();   
  41.                         }   
  42.   
  43.                         @Override  
  44.                         public void onStopTrackingTouch(SeekBar seekBar) {   
  45.                                 Toast.makeText(getApplicationContext(), "onStopTrackingTouch",   
  46.                                                 Toast.LENGTH_SHORT).show();   
  47.                         }   
  48.   
  49.                 };   
  50.   
  51.                 //為拖動條綁定監聽器   
  52.                 sb.setOnSeekBarChangeListener(osbcl);   
  53.   
  54.         }   
  55. }  

       3、運行程序:

Android學習指南之十一:ProgressBar、SeekBar和RatingBar

Android學習指南之十一:ProgressBar、SeekBar和RatingBar

         三、RatingBar評分條

         RatingBar評分條是SeekBar拖動條的子類。現階段系統自帶了3種樣式,我們同樣用例子來演示他的使用方法和屬性設置:

         1、main.xml的代碼:

XML/HTML代碼
  1. <?xml version=”1.0″ encoding=”utf-8″?>  
  2. <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”   
  3. android:orientation=”vertical”   
  4. android:layout_width=”fill_parent”   
  5. android:layout_height=”fill_parent”   
  6. >  
  7.   
  8. <RatingBar  
  9. android:id=”@+id/RatingBar01″   
  10. android:layout_width=”wrap_content”   
  11. android:rating=”3″                                             默認分值設為3   
  12. android:layout_marginTop=”20dp”   
  13. android:layout_height=”wrap_content”>  
  14. </RatingBar>  
  15.   
  16. <RatingBar  
  17. android:id=”@+id/RatingBar03″   
  18. android:layout_width=”wrap_content”   
  19. android:numStars=”5″                                      星星數量設為5   
  20. android:rating=”4″                                            默認分值設為4   
  21. android:isIndicator=”false”          在ratingBarStyleIndicator樣式中此項默認值是TRUE,會導致不可操作   
  22. style=”?android:attr/ratingBarStyleIndicator”      指示器(Indicator)樣式   
  23. android:layout_marginTop=”20dp”   
  24. android:layout_height=”wrap_content”>  
  25. </RatingBar>  
  26. <RatingBar  
  27. android:id=”@+id/RatingBar02″   
  28. android:layout_width=”wrap_content”   
  29. android:isIndicator=”false”                           同上   
  30. android:numStars=”10″   
  31. android:rating=”8″   
  32. style=”?android:attr/ratingBarStyleSmall”        小星星樣式   
  33. android:layout_marginTop=”20dp”   
  34. android:layout_height=”wrap_content”>  
  35. </RatingBar>  
  36. </LinearLayout>  

        2、在HelloRatingBar.java的代碼裡我們實現了3個評分條聯動的功能:

Java代碼
  1. package android.basic.lesson11;   
  2.   
  3. import android.app.Activity;   
  4. import android.os.Bundle;   
  5. import android.widget.RatingBar;   
  6. import android.widget.RatingBar.OnRatingBarChangeListener;   
  7.   
  8. public class MainHelloRatingBar extends Activity {   
  9.     /** Called when the activity is first created. */  
  10.     @Override  
  11.     public void onCreate(Bundle savedInstanceState) {   
  12.         super.onCreate(savedInstanceState);   
  13.         setContentView(R.layout.main);   
  14.   
  15.         //定義組件對象   
  16.         final RatingBar rb1 = (RatingBar)findViewById(R.id.RatingBar01);   
  17.         final RatingBar rb2 = (RatingBar)findViewById(R.id.RatingBar02);   
  18.         final RatingBar rb3 = (RatingBar)findViewById(R.id.RatingBar03);   
  19.   
  20.         //定義評分監聽器   
  21.         OnRatingBarChangeListener orbcl= new OnRatingBarChangeListener(){   
  22.   
  23.                         @Override  
  24.                         public void onRatingChanged(RatingBar ratingBar, float rating,   
  25.                                         boolean fromUser) {   
  26.                                                 switch(ratingBar.getId()){   
  27.                                                 case R.id.RatingBar01:   
  28.                                                         //把第一個評分條的值取出來設置給其他評分條   
  29.                                                         rb2.setRating(rb1.getRating());   
  30.                                                         rb3.setRating(rb1.getRating()*2);//十顆星所以乘以2   
  31.                                                         break;   
  32.                                                 case R.id.RatingBar02:   
  33.                                                         rb1.setRating(rb2.getRating());   
  34.                                                         rb3.setRating(rb2.getRating()*2);   
  35.                                                         break;   
  36.                                                 case R.id.RatingBar03:   
  37.                                                         rb1.setRating(rb3.getRating()/2);   
  38.                                                         rb2.setRating(rb3.getRating()/2);   
  39.                                                         break;   
  40.                                 }   
  41.                         }   
  42.         } ;   
  43.   
  44.         //綁定監聽器   
  45.         rb1.setOnRatingBarChangeListener(orbcl);   
  46.         rb2.setOnRatingBarChangeListener(orbcl);   
  47.         rb3.setOnRatingBarChangeListener(orbcl);   
  48.     }   
  49. }  

       3、運行程序,點擊評分條看看效果,使用左右鍵再試試

Android學習指南之十一:ProgressBar、SeekBar和RatingBar

        有興趣的同學可以研究一下,如何更換評分條中的圖片,譬如罷星星換成花朵什麼的。

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved