評(píng)分條 RatingBar

本節(jié)將繼續(xù)學(xué)習(xí)一個(gè)和進(jìn)度有關(guān)的控件：RatingBar ，在 Android 中 RatingBar 是一個(gè)可以支持用戶打分的 UI 控件，相比 ProgressBar 而言，RatingBar 不僅僅可以用來(lái)展示同時(shí)還可以接收用戶的輸入操作；而相比 SeekBar，RatingBar 則更側(cè)重于與用戶的互動(dòng)性。有了前兩節(jié)的基礎(chǔ)，這一節(jié)理解起來(lái)也是非常容易的。

1. RatingBar 的特性

從繼承關(guān)系來(lái)看，RatingBar 是派生自 SeekBar 的，所以它擁有 SeekBar 的所有屬性和功能（當(dāng)然也包括 ProgressBar 的功能）?？梢岳斫鉃?SeekBar 是進(jìn)度的另一種表現(xiàn)形式，它將進(jìn)度換成了分?jǐn)?shù)，用戶拖動(dòng)進(jìn)度條來(lái)進(jìn)行評(píng)分操作，我們先來(lái)感受一下 RatingBar 的樣式：

有圖有真相，我們會(huì)在各大 App 市場(chǎng)、電影票 App、團(tuán)購(gòu) App 等場(chǎng)景中大量的看到 RatingBar 的影子。

用戶通過(guò)點(diǎn)擊不同的星級(jí)進(jìn)行打分，通過(guò) RatingBar 我們可以拿到一個(gè)浮點(diǎn)類型的數(shù)字，比如：1.0、2.3、5.5 等等，就類似于我們給電影評(píng)分，接下來(lái)我們看看如何使用。

2 RatingBar 的基本用法

2.1 RatingBar 的屬性

RatingBar 的屬性都很好理解，以下是幾個(gè)常用的屬性：

• android:rating：
  設(shè)置默認(rèn)評(píng)分值，接收一個(gè)浮點(diǎn)數(shù)。
• android:numStars：
  總共有多少顆星級(jí)，接收一個(gè)整形數(shù)。
• android:isIndicator：
  設(shè)置當(dāng)前 RatingBar 是否只是分?jǐn)?shù)展示，即用戶無(wú)法更改分值，接收一個(gè) boolean 值。
• android:stepSize：
  評(píng)分增加的步進(jìn)值，接收一個(gè)浮點(diǎn)數(shù)。
• style：
  自定義樣式。和 ProgressBar、SeekBar 一樣，我們可以自定義 RatingBar 的展示樣式，系統(tǒng)為我們提供了兩種常用的樣式可供選擇：

  style="?android:attr/ratingBarStyleSmall"
  style="?android:attr/ratingBarStyleIndicator"
  

2.2 RatingBar 事件監(jiān)聽(tīng)及 API

RatingBar 需要接收用戶的輸入，所以需要一個(gè)事件監(jiān)聽(tīng)器：

RatingBar.OnRatingBarChangeListener

接口中只定義了一個(gè)函數(shù):

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

參數(shù)說(shuō)明：

• ratingBar： 分值被修改的 RatingBar 實(shí)例
• rating： 修改之后的分值，一個(gè)浮點(diǎn)型
• fromUser： 是否是由用戶主動(dòng)修改

另外我們?cè)诖a中可以動(dòng)態(tài)去修改 Rating 值以及總的星級(jí)數(shù)，通過(guò)如下接口：

setRating(float rating)          // 動(dòng)態(tài)設(shè)置當(dāng)前分值
setNumStars(final int numStars)  // 動(dòng)態(tài)設(shè)置總分?jǐn)?shù)

通過(guò)以下接口獲取當(dāng)前的分值及總分?jǐn)?shù)：

getNumStars()
getRating()

2.3 RatingBar 的使用示例

接下來(lái)我們實(shí)現(xiàn)一個(gè)完整的 RatingBar 工程，通過(guò)打分回調(diào)接口及獲取分?jǐn)?shù)的 API 完成以下兩大功能：

• 在點(diǎn)擊 RatingBar 進(jìn)行打分之后通過(guò) Toast 展示當(dāng)前分?jǐn)?shù)
• 點(diǎn)擊 Button 的獲取當(dāng)前分?jǐn)?shù)，并展示到 TextView 之上
  首先我們編寫(xiě)布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="80dp"
        android:layout_marginTop="200dp"
        android:numStars="5"
        android:rating="2.6"
        android:stepSize="0.1" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ratingBar"
        android:layout_alignLeft="@+id/ratingBar"
        android:layout_marginLeft="60dp"
        android:layout_marginTop="30dp"
        android:text="獲取評(píng)分" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button"
        android:layout_alignLeft="@+id/button"
        android:layout_marginTop="20dp"
        android:textSize="20dp"
        android:textStyle="bold" />
</RelativeLayout>

布局文件中我們放置了 3 個(gè)控件：RatingBar 用來(lái)展示星級(jí)、Button 用來(lái)展示觸發(fā)分?jǐn)?shù)獲取、TextView用來(lái)展示具體的分?jǐn)?shù)值，接下來(lái)編寫(xiě) Java 代碼完成邏輯控制：

package com.emercy.myapplication;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private RatingBar mRatingBar;
    private TextView mTextView;
    private Button mButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mRatingBar = findViewById(R.id.ratingBar);
        mTextView = findViewById(R.id.textView);
        mButton = findViewById(R.id.button);
        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int numStars = mRatingBar.getNumStars();
                float rating = mRatingBar.getRating();
                mTextView.setText("得分: " + rating + "/" + numStars);
            }
        });

        mRatingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
                Toast.makeText(MainActivity.this, "當(dāng)前分?jǐn)?shù)變動(dòng)為：" + rating, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

首先給 Button 設(shè)置一個(gè)點(diǎn)擊事件監(jiān)聽(tīng)器，在其中通過(guò)getNumStars()和getRating()獲取總的星數(shù)和當(dāng)前星數(shù)，并通過(guò) TextView 展示。接著給 RatingBar 。

設(shè)置一個(gè)評(píng)分變動(dòng)監(jiān)聽(tīng)器，在評(píng)分修改的時(shí)候通過(guò) Toast 打印出最新的評(píng)分，效果如下：

3. 小結(jié)

本節(jié)是繼續(xù)前兩節(jié)—— ProgressBar 、 SeekBar 的又一升級(jí)版，它延續(xù)了進(jìn)度條及拖動(dòng)條的特點(diǎn)，而將場(chǎng)景轉(zhuǎn)移到了評(píng)分系統(tǒng)當(dāng)中，使用起來(lái)和 ProgressBar、SeekBar 類似，也非常好理解，在具體場(chǎng)景的時(shí)候能夠靈活運(yùn)用就行。