Руководство Android RatingBar

Android RatingBar
RatingBar Styles
RatingBar Events
Пример RatingBar

1. Android RatingBar

В Android, RatingBar это контроль интерфейса пользователя (User Interface Control) использующийся для получения оценки от пользователей. RatingBar это подкласс у ProgressBar поэтому имеет унаследованные функции от ProgressBar, он так же используется для отображения общей оценки (среднего значения) от всех пользователей. В плане интерфейса, RatingBar включает звездочки, пользователь выбирает звездочку для оценки, первая соответствую самой низкой оценке, и последняя соответствует самой высокой оценке.

Структура у RatingBar:

android:numStars

Атрибут android:numStars разрешает вам настроить количество звездочек для отображения на RatingBar. Его значение по умолчанию это 5.

android:numStars

<!-- numStars default is 5 -->
<RatingBar
    android:id="@+id/ratingBar21"
    android:rating="3.5"
    android:stepSize="0.1" ... />

<!-- numStars = 7 -->
<RatingBar
    android:id="@+id/ratingBar22"
    android:numStars="7"
    android:rating="5.7"
    android:stepSize="0.1" ... />

android:rating, android:stepSize

android:rating: Значение, определяющее оценку пользователя или среднее значение все оценок всех пользователей. Расположен в диапозоне (0,numStars].

Значение по умолчанию у android:stepSize это 0.5, это значит RatingBar будет отображать только оценки (Или оценки пользователей) с значением 0, 0.5, 1, 1.5, 2,... При изменении знчения атрибута android:stepSite на 0.1, RatingBar может отобразить оценки со значениями: 0, 0.1, 0.2, 0.3, 0.4, 0.5, ....

android:stepSize

<!-- android.stepSize = "0.5" (Default) -->
<RatingBar
    android:id="@+id/ratingBar31"
    android:rating="2.7" ... />

<!-- android.stepSize = "0.1" -->
<RatingBar
    android:id="@+id/ratingBar32"
    android:rating="2.7"
    android:stepSize="0.1" ... />

android:isIndicator

Атрибут android:isIndicator = "true" используется когда вы не хотите, чтобы пользователь оставил оценку с данным RatingBar. По умолчанию данный атрибут имеет значение false.

<!-- android:isIndicator = "false" (Default) -->
<RatingBar
    android:id="@+id/ratingBar51"
    android:rating="2" ... />

<!-- android:isIndicator = "true" (Readonly RatingBar) -->
<RatingBar
    android:id="@+id/ratingBar52"
    android:isIndicator="true"
    android:rating="4.5" ... />

2. RatingBar Styles

Атрибут style это опция у RatingBar, он позволяет вам настроить стиль для RatingBar. Имеются некоторые готовые стили в библиотеке Android, которые вы можете сразу использовать.

Библиотека Android предоставляет доволно много стилей для RatingBar, но имеет много похожих стилей, вам будет очень сложно увидеть разницу. Ниже является пример с некоторыми красивыми дизайнами:

style="@style/Widget.AppCompat.RatingBar.Indicator"
style="@android:style/Widget.DeviceDefault.Light.RatingBar.Small"
style="@android:style/Widget.RatingBar"
style="@android:style/Widget.Holo.RatingBar"

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView41"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="(Default)"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <RatingBar
        android:id="@+id/ratingBar41"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:rating="2.7"
        android:stepSize="0.1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView41" />

    <TextView
        android:id="@+id/textView42"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="AppCompat.RatingBar.Indicator"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ratingBar41" />

    <RatingBar
        android:id="@+id/ratingBar42"
        style="@style/Widget.AppCompat.RatingBar.Indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:rating="4.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView42" />

    <TextView
        android:id="@+id/textView43"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Widget.DeviceDefault.Light.RatingBar.Small"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ratingBar42" />

    <RatingBar
        android:id="@+id/ratingBar43"
        style="@android:style/Widget.DeviceDefault.Light.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:rating="2.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView43" />

    <TextView
        android:id="@+id/textView44"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Widget.RatingBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ratingBar43" />

    <RatingBar
        android:id="@+id/ratingBar44"
        style="@android:style/Widget.RatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:rating="3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView44" />

    <TextView
        android:id="@+id/textView45"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Widget.Holo.RatingBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ratingBar44" />

    <RatingBar
        android:id="@+id/ratingBa45"
        style="@android:style/Widget.Holo.RatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:rating="3.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView45" />

</androidx.constraintlayout.widget.ConstraintLayout>

3. RatingBar Events

Есть много событий связанных с RatingBar, но следующие события используются чаще всего:

setOnClickListener(View.OnClickListener);
setOnRatingBarChangeListener(RatingBar.OnRatingBarChangeListener);

On Click Event:

Событие, происходящее когда пользователь кликает (click) на RatingBar, похоже на действие пользователя при кликании на Button.

ratingBar.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
         RatingBar rb = (RatingBar) v;
         float rating = rb.getRating();
         
         // Your code ...
    }
});

On RatingBar Changed Event

Событие, происходящее когда значение rating меняется, из-за действия пользователя или из-за эффекта от вызова метода ratingBar.setRating(newRating), ..

ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
    @Override
    public void onRatingChanged(RatingBar ratingBar, float newRating, boolean fromUser) {
         // Your code
    }
});

4. Пример RatingBar

OK, теперь мы выполним простой пример, используя RatingBar. В данном примере первый RatingBar принимает оценки пользователя. Второй RatingBar отображает общую оценку (сренее значение) от всех пользователей.

На Android Studio создайте новый project:

File > New > New Project > Empty Activity
- Name: RatingBarExample
- Package name: org.o7planning.ratingbarexample
- Language: Java

Интерфейс приложения:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Give your Rating:"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <RatingBar
        android:id="@+id/ratingBar_yours"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textView_yourCurrentRating"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Your current Rating:"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ratingBar_yours" />

    <Button
        android:id="@+id/button_submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Submit"
        android:textAllCaps="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.52"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView_yourCurrentRating" />

    <TextView
        android:id="@+id/textView_ratingCount"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Rating Count: 0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button_submit" />

    <TextView
        android:id="@+id/textView_sumAllRating"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Sum of all Rating: 0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView_ratingCount" />

    <TextView
        android:id="@+id/textView_averageAllRating"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Average value of all Rating: 0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView_sumAllRating" />

    <RatingBar
        android:id="@+id/ratingBar_all"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:isIndicator="true"
        android:stepSize="0.1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView_averageAllRating" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package com.example.ratingbarexample;

import androidx.appcompat.app.AppCompatActivity;

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

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RatingBar ratingBarYours;
    private RatingBar ratingBarAll;

    private Button buttonSubmit;

    private TextView textViewYourCurrentRating;
    private TextView textViewRatingCount;
    private TextView textViewSumAllRating;
    private TextView textViewAverageAllRating;

    private List<Float> allRatings = new ArrayList<Float>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //
        this.buttonSubmit = (Button) this.findViewById(R.id.button_submit);
        this.ratingBarYours = (RatingBar) this.findViewById(R.id.ratingBar_yours);
        this.ratingBarAll = (RatingBar) this.findViewById(R.id.ratingBar_all);

        this.textViewYourCurrentRating = (TextView) this.findViewById(R.id.textView_yourCurrentRating);
        this.textViewRatingCount= (TextView) this.findViewById(R.id.textView_ratingCount);
        this.textViewSumAllRating= (TextView) this.findViewById(R.id.textView_sumAllRating);
        this.textViewAverageAllRating= (TextView) this.findViewById(R.id.textView_averageAllRating);

        this.ratingBarYours.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
                textViewYourCurrentRating.setText("Your current Rating: " + rating);
            }
        });
        this.buttonSubmit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                doSubmit();
            }
        });
    }

    private void doSubmit()  {
        float rating = this.ratingBarYours.getRating();
        this.allRatings.add(rating);

        int ratingCount = this.allRatings.size();
        float ratingSum = 0f;
        for(Float r: this.allRatings)  {
            ratingSum += r;
        }
        float averageRating = ratingSum / ratingCount;


        this.textViewRatingCount.setText("Rating Count: " + ratingCount);
        this.textViewSumAllRating.setText("Sum off all Rating: " + ratingSum);
        this.textViewAverageAllRating.setText("Average value off all Rating: " + averageRating);

        float ratingAll = this.ratingBarAll.getNumStars() * averageRating / this.ratingBarYours.getNumStars() ;
        this.ratingBarAll.setRating(ratingAll);
    }

}

Pуководства Android

Pуководства Flutter

Руководство Android RatingBar

1. Android RatingBar

2. RatingBar Styles

3. RatingBar Events

4. Пример RatingBar

Pуководства Android

Pуководства Android

Новейшие статьи