Die Anleitung zu Android RatingBar

Android RatingBar
RatingBar Styles
RatingBar Events
Das Beispiel von RatingBar

1. Android RatingBar

In Android ist RatingBar ein Steuerelement für die Benutzer-Interface, mit dem Bewertungen von Benutzern empfangen werden. RatingBar ist ein Nachkomme von ProgressBar , daher verfügt es über die Funktionen, die von ProgressBar geerbt wurden. Es wird auch verwendet, um eine Gesamtbewertung (Durchschnitt) aller Benutzer anzuzeigen. Bei RatingBar besteht es aus die Sternen und die Benutzer wählen einen Stern aus, um eine Bewertung abzugeben. Der erste Stern entspricht der niedrigsten Bewertung und der letzte Stern entspricht der höchsten Bewertung.

Die Syntax eines RatingBar:

android:numStars

Mit dem Attribut android:numStars können Sie die Anzahl der Sternen festlegen, die in RatingBar anzeigen kann. Der Standardwert ist 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: Ein Wert, der die Bewertung des Benutzers oder den Durchschnittswert aller Bewertungen aller Benutzer angibt. Es liegt im Bereich von (0,numStars].

Der Standardwert des Attributs android:stepSize ist 0.5. Dies bedeutet, dass in der RatingBar nur die Bewertungen angezeigt werden (oder die Benutzer bewerten) mit dem Werten von 0, 0.5, 1, 1.5, 2,... Wenn der Wert des Attributs android:stepSite in 0.1 geändert wird, kann RatingBar die Bewertungen mit der Werten von 0, 0.1, 0.2, 0.3, 0.4, 0.5, usw anzeigen.

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

Das Attribut android:isIndicator = "true" wird verwendet wenn Sie möchten nicht, dass die Benutzer mit RatingBar keine Bewertung abgeben. Standardmäßig hat das Attribut den Wert von 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

Das Attribut style ist eine Option von RatingBar, mit der Sie den Stil für RatingBar festlegen können. In der Bibliothek von Android stehen verschiedene Stile zur Verfügung, die Sie vielleicht bereits benutzen.

Die Bibliothek von Android bietet einige Stile für RatingBar. Aber eine umfangreiche Anzahl von ihnen sieht sich sehr ähnlich. Daher ist es Ihnen sehr schwer, den Unterschied zu erkennen. Hier ist ein Beispiel mit einigen schönen Designs:

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

Es gibt einige Ereignisse im Zusammenhang mit RatingBar, aber die folgenden Ereignisse werden am häufigsten verwendet:

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

On Click Event:

Das Ereignis tritt ein, wenn der Benutzer auf RatingBar klickt. Dies entspricht der Aktion des Benutzer, der auf Button klickt.

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

Das Ereignis tritt ein, wenn sich der Wert von rating aufgrund der Aktion des Benutzers oder der Auswirkung des Aufrufs der Methode ratingBar.setRating(newRating), usw ändert.

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

4. Das Beispiel von RatingBar

OK, Jetzt üben wir ein einfaches Beispiel mit RatingBar. In diesem Beispiel erhält das erste RatingBar die Kritiken vom Benutzer. Das zweite RatingBar zeigt eine Gesamtbewertung (Durchschnitt) aller Benutzer an.

Auf Android Studio erstellen Sie ein Projekt:

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

Die Interface der Anwendung:

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);
    }

}

Anleitungen Android

Anleitungen Flutter

Die Anleitung zu Android RatingBar

1. Android RatingBar

2. RatingBar Styles

3. RatingBar Events

4. Das Beispiel von RatingBar

Anleitungen Android

Anleitungen Android

Neueste Artikel