《Android》『RatingBar』- 星等評分元件的基本用法與如何透過 Shape、layer-list 自訂外觀

2016.04.28 / Android 工作筆記, 常用介面元件

《Android Developers 參考文獻》

➥RatingBar

《繼承架構》

extends AbsSeekBar

java.lang.Object

↳android.view.View

↳android.widget.ProgressBar

↳android.widget.AbsSeekBar

↳ android.widget.RatingBar

《簡單介紹》

RatingBar 是一種 Android 中內建的星等評價系統，與 SeekBar 一樣，它在使用上繼承自 ProgressBar，也因此 RatingBar 類別中的很多方法均與 ProgressBar 一致，分別有兩種用途，一種是讓使用者可以設定等級評分，另一種則是只顯示評分等級，不接受使用者設定，這邊我們來介紹它的基本用法以及自訂外觀的方式。

➥基本用法

➥透過 Selector 與 layer-list 資源檔自訂 RatingBar 的外觀

基本用法

package ...
import ...

public class MainActivity extends Activity 
{
    RatingBar mRatingBar;

    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mRatingBar=(RatingBar)findViewById(R.id.ratingBar1);
        mRatingBar.setMax(100); //設定最大值
        mRatingBar.setNumStars(5); //設定最大星型數量
        mRatingBar.setStepSize((float) 0.5); //設定步進值
        mRatingBar.setRating((float) 3.5); //設定目前顯示的星型數量
        mRatingBar.setIsIndicator(true); //設定是否可被使用者修改評分

        mRatingBar.setOnRatingBarChangeListener(ratingBarOnRatingBarChange);//設定監聽器
    }

    private RatingBar.OnRatingBarChangeListener ratingBarOnRatingBarChange 
    = new RatingBar.OnRatingBarChangeListener() 
    {
        @Override
        public void onRatingChanged(RatingBar ratingBar, float rating,boolean fromUser) 
        {
            Toast.makeText(getApplicationContext(), "rating: " + rating, Toast.LENGTH_LONG).show();	
        }	
    };
}

package ...

import ...

public class MainActivity extends Activity

{

RatingBar mRatingBar;

@Override

public void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

mRatingBar=(RatingBar)findViewById(R.id.ratingBar1);

mRatingBar.setMax(100); //設定最大值

mRatingBar.setNumStars(5); //設定最大星型數量

mRatingBar.setStepSize((float) 0.5); //設定步進值

mRatingBar.setRating((float) 3.5); //設定目前顯示的星型數量

mRatingBar.setIsIndicator(true); //設定是否可被使用者修改評分

mRatingBar.setOnRatingBarChangeListener(ratingBarOnRatingBarChange);//設定監聽器

}

private RatingBar.OnRatingBarChangeListener ratingBarOnRatingBarChange

= new RatingBar.OnRatingBarChangeListener()

{

@Override

public void onRatingChanged(RatingBar ratingBar, float rating,boolean fromUser)

{

Toast.makeText(getApplicationContext(), "rating: " + rating, Toast.LENGTH_LONG).show();

}

};

}

MainActivity.java

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <RatingBar android:id="@+id/ratingBar1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" />
    
</LinearLayout>

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<RatingBar android:id="@+id/ratingBar1"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</LinearLayout>

activity_main.xml

以上直接透過程式碼的方式，示範 RatingBar 元件的基本使用方式，並將常用到的設定方法條列如下 –

setMax()、getMax() (android:max)

設定、取得 RatingBar 範圍的最大值。

setNumStars()、getNumStars() (android:numStars)

設定、取得 RatingBar 的最大星型數量(總星級)。

setRating()、gatRating() (android:rating)

設定、取得 RatingBar 目前顯示的星型數量。

setStepSize()、getStepSize() (android:stepSize)

設定、取得 RatingBar 目前的步進值(例如設定為 0.5，則表示每次可更改半顆星)。

setIsIndicator()、isIndicator()

設定、取得 RatingBar 目前是否可被使用者修改評分。

(style=”?android:attr/ratingBarStyleIndicator” 使用者無法修改評分)

(style=”?android:attr/ratingBarStyleSmall” 使用者可以修改評分)

setOnRatingBarChangeListener()

設定 RatingBar 監聽器。

透過 Selector 與 layer-list 資源檔自訂 RatingBar 的外觀

要實作自訂 RatingBar 的外觀，我們必須使用 layer-list 資源檔來設定 android:progressDrawable 屬性，相關程式碼如下 –

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  

    <item android:id="@+android:id/background"
          android:drawable="@drawable/ratingbar_empty" />

    <item android:id="@+android:id/secondaryProgress"
          android:drawable="@drawable/ratingbar_empty" /> 

    <item android:id="@+android:id/progress"
          android:drawable="@drawable/ratingbar_filled" />        
</layer-list>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@+android:id/background"

android:drawable="@drawable/ratingbar_empty" />

<item android:id="@+android:id/secondaryProgress"

android:drawable="@drawable/ratingbar_empty" />

<item android:id="@+android:id/progress"

android:drawable="@drawable/ratingbar_filled" />

</layer-list>

progress_layer.xml

我們自訂了一個名為 progress_layer.xml 的 layer-list 資源檔，其中我們必須定義三個帶有特定 id 名稱的 <item> 標籤，且不得任意修改 id 名稱，三個 id 分別是 background、secondaryProgress 以及 progress。

<selector xmlns:android="http://schemas.android.com/apk/res/android">  
      
    <item android:state_pressed="true" 
          android:state_window_focused="true"
          android:drawable="@drawable/star_empty" />
  
    <item android:state_focused="true" 
          android:state_window_focused="true"
          android:drawable="@drawable/star_empty" />
  
    <item android:state_selected="true" 
          android:state_window_focused="true"
          android:drawable="@drawable/star_empty" />  
    
    <item android:drawable="@drawable/star_empty" />  

</selector>

<item android:state_pressed="true"