閱讀363 返回首頁    go 阿裏雲 go 技術社區[雲棲]

API Demos 2.3 學習筆記 (12)-- Views->Rating Bar

更多精彩內容，請點擊閱讀：《API Demos 2.3 學習筆記》


RatingBar是基於SeekBar和ProgressBar的擴展，用星型來顯示等級評定。用戶可以通過觸屏點擊或者軌跡球左右移動來進行星型等級評定。RatingBar有三種風格:
ratingBarStyle 默認風格 
ratingBarStyleSmall 小風格
ratingBarStyleIndicator 大風格

其中，默認風格的RatingBar是我們通常使用的可以交互的，而後麵兩種不能進行進行交互，隻能作為指示牌。設置RatingBar樣式的方法是在xml布局文件中RatingBar控件內設置style：

下麵我們以RatingBar為例，簡單介紹如何創建三種不同樣式的RatingBar。
1、 ratingBarStyle 默認風格 

        <RatingBar android:
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numStars="3"
            android:rating="2.5"
            android:stepSize="0.5" />
注：android:numStars="3" 屬性用來設置星星總個數，必須是一個整形值，例如 100 。
android:rating="2.5"  屬性用來設置初始星星評分星星數目，必須是浮點類型，例如 1.2。
android:stepSize="0.5"  屬性用來設置步長，即一次增加或者減少的星星數目是這個數字的整數倍。必須是浮點類型，例如 0.5。

2、ratingBarStyleSmall 小風格

        <RatingBar android:
            
            android:layout_marginLeft="5dip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical" />

3、ratingBarStyleIndicator 大風格

        <RatingBar android:
            
            android:layout_marginLeft="5dip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical" />

RatingBar主要通過設置監聽器OnRatingBarChangeListener來響應用戶點擊的。具體使用方法如下：

      // 通過findViewById方法獲得RatingBar對象
        RatingBar mRatingBar = (RatingBar) findViewById(R.id.ratingbar);
        mRatingBar.setOnRatingBarChangeListener(mRatingBarChangeListener);

         //創建RatingBar監聽器
        RatingBar.OnRatingBarChangeListener mRatingBarChangeListener = new RatingBar.OnRatingBarChangeListener() {

        	public void onRatingChanged(RatingBar ratingBar, float rating,
        			boolean fromUser) {
        		// TODO 執行用戶點擊RatingBar後的響應動作
        		final int mNumStars = ratingBar.getNumStars();  //獲取RatingBar總星星數
        		float mrating = rating;          //用戶點擊評定後的評分（高亮的星星個數）
        		if(fromUser){
        			// TODO 
        		}
        		else{
        			// TODO 
        		}
        	}
     };
注：創建 RatingBar 監聽器時，需要注意的是，3個參數以及它們對應的含義如下：
ratingBar:    由於多個RatingBar可以同時指定同一個RatingBar 監聽器 。該參數就是當前觸發RatingBar監聽器的那一個RatingBar對象。
rating:  當前評級分數。取值範圍從0到RatingBar 的總星星數。
fromUser:  如果觸發監聽器的是來自用戶觸屏點擊或軌跡球左右移動，則為true。


下麵我們進行實例代碼解析：
res-layout-ratingbar_1.xml

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

<LinearLayout xmlns:andro
    android:orientation="vertical"
    android:paddingLeft="10dip"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

	<!-- 一個星星數為3，評分2.5個星星的默認RatingBar -->
    <RatingBar android:
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="3"
        android:rating="2.5"
        android:stepSize="0.5" />
        
	<!-- 一個星星數為5，評分2.5個星星的默認RatingBar 默認步長0.5-->
    <RatingBar android:
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:rating="2.25"
        android:stepSize="0.5" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip">
        
        <TextView android:
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
            
		 <!-- 一個stlye為ratingBarStyleSmall的RatingBar，不支持交互 -->
        <RatingBar android:
            
            android:layout_marginLeft="5dip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical" />
            
    </LinearLayout>

		<!-- 一個stlye為indicator_ratingbar的RatingBar，不支持交互 -->
	    <RatingBar android:
           
           android:layout_marginLeft="5dip"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center_vertical" />
            
</LinearLayout>

src-com.example.android.apis.view-RatingBar1.java

package com.example.android.apis.view;

import android.app.Activity;
import android.os.Bundle;
import android.widget.RatingBar;
import android.widget.TextView;

import com.example.android.apis.R;

/**
 * 演示如何使用rating bar
 */
public class RatingBar1 extends Activity implements RatingBar.OnRatingBarChangeListener {
    RatingBar mSmallRatingBar;
    RatingBar mIndicatorRatingBar;
    TextView mRatingText;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.ratingbar_1);

         // 通過findViewById方法獲得一個TextView對象
        mRatingText = (TextView) findViewById(R.id.rating);

        // 通過findViewById方法獲得兩個用作指示牌的RatingBar對象
        mIndicatorRatingBar = (RatingBar) findViewById(R.id.indicator_ratingbar);
        mSmallRatingBar = (RatingBar) findViewById(R.id.small_ratingbar);

        // 通過findViewById方法獲得兩個可以交互的RatingBar對象，並設置監聽器
        ((RatingBar)findViewById(R.id.ratingbar1)).setOnRatingBarChangeListener(this);
        ((RatingBar)findViewById(R.id.ratingbar2)).setOnRatingBarChangeListener(this);
    }

    public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromTouch) {
        final int numStars = ratingBar.getNumStars();
         //顯示當前星星總數多少，被選中高亮的星星數多少
        mRatingText.setText( 
                getString(R.string.ratingbar_rating) + " " + rating + "/" + numStars);

         //當用戶點擊上麵可以交互的RatingBar，觸發監聽器，在這裏更新兩個作為指示牌作用的RatingBar對象的三個參數
        //更新兩個作為指示牌作用的RatingBar對象的星星總數
        if (mIndicatorRatingBar.getNumStars() != numStars) {
            mIndicatorRatingBar.setNumStars(numStars);
            mSmallRatingBar.setNumStars(numStars);
        }
        
        //更新兩個作為指示牌作用的RatingBar對象的星星數（被選中高亮）
        if (mIndicatorRatingBar.getRating() != rating) {
            mIndicatorRatingBar.setRating(rating);
            mSmallRatingBar.setRating(rating);
        }
        
        //更新兩個作為指示牌作用的RatingBar對象的步長值
        final float ratingBarStepSize = ratingBar.getStepSize();
        if (mIndicatorRatingBar.getStepSize() != ratingBarStepSize) {
            mIndicatorRatingBar.setStepSize(ratingBarStepSize);
            mSmallRatingBar.setStepSize(ratingBarStepSize);
        }
    }

}

知識點1：android:layout_marginLeft="5dip"
該屬性表示該空間離父控件的左邊距離為5個dip。其他android:layout_marginRight等屬性的含義與之類似。 關於dip等android單位的詳細介紹，請點擊閱讀：《Android 係統Dimension和間距參數詳解》和《Android單位區別與轉化》

知識點2：android:layout_gravity="center_vertical"
該屬性表示相對於該控件的父控件而言，該控件在父控件中的什麼位置。還有一個屬性 android:gravity則表示對於該控件而言，控件內部的文本顯示在該控件的什麼位置。兩個屬性容易混淆，切記進行區分。關於兩個屬性取值含義以及兩者的區別等更詳細的信息，請點擊閱讀：《android:layout_gravity 和 android:gravity 的區別》

知識點3：如果默認的 RatingBar不能滿足您的需求，您不想用星星，而想用其他的自定義圖片的話，請點擊閱讀：《 給RatingBar改圖片》

預覽效果：



最後更新：2017-04-02 06:51:58

  上一篇：go c、c++、java的區別
  下一篇：go android menu 實現動態修改menu