[Java][Android] RatingBar 사용해보기

안녕하세요. 오늘은 RatingBar 를 사용해보도록 하겠습니다.

 

RatingBar 란 평점이나 등급을 매길 때 사용할 수 있는 뷰인데요.

 

쉽게 말해서 별점을 주거나 표시할 때 사용하면 좋습니다.

 

위에 이미지처럼 생긴 뷰입니다.

 

코드부터 작성하겠습니다.

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <RatingBar
        android:id="@+id/bigRatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:progressTint="@android:color/holo_orange_light"
        android:rating="0"
        android:stepSize="0.5" />

    <TextView
        android:id="@+id/bigTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="큰별점" />

    <RatingBar
        android:id="@+id/mediumRatingBar"
        style="@style/Widget.AppCompat.RatingBar.Indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:isIndicator="false"
        android:numStars="5"
        android:progressTint="@android:color/holo_orange_light"
        android:rating="0"
        android:stepSize="0.5" />

    <TextView
        android:id="@+id/mediumTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="중간 별점" />

    <RatingBar
        android:id="@+id/smallRatingBar"
        style="@style/Widget.AppCompat.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:isIndicator="false"
        android:numStars="5"
        android:progressTint="@android:color/holo_orange_light"
        android:rating="0"
        android:stepSize="0.5" />

    <TextView
        android:id="@+id/smallTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="작은 별점" />

    <TextView
        android:layout_marginTop="64dp"
        android:id="@+id/averageTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/averageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="평균"
        android:textSize="20sp" />



</LinearLayout>

 

큰별점부터 크기가 다른 RatingBar 를 두었습니다.

 

크기 조절은 style 속성으로 변경되고 3가지 크기만 지원됩니다.

 

별 갯수는 numStars 로 변경 가능합니다. 여기서 주의하실 점이 있는데요. RatingBar 의 width 속성을 wrap을 사용하지 않으면 원하는 갯수로 나오지 않습니다.

 

isIndicator 속성은 클릭으로 rating 을 조절할 수 있게 만들어주는 속성입니다.

 

기본 style 을 사용하면 설정하지 않아도 동작 하지만 style 을 설정하게 되면 클릭이 안 먹히게 되는데요.

 

이때 isIndicator 설정을 true 바꿔주시면 됩니다.

 

별 색상을 지정하고 싶으실때는 progressTint 속성을 사용하시면 됩니다.

 

rating 은 초기에 채워져있는 별의 갯수를 지정하는 속성입니다.

 

마지막으로 stepSize 는 클릭했을 때 변경 단위를 지정해주는 속성입니다.

 

 

다음으로 액티비티 코드입니다.

 

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;

public class MainActivity extends AppCompatActivity {

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

        RatingBar bigRatingBar = findViewById(R.id.bigRatingBar);
        RatingBar mediumRatingBar = findViewById(R.id.mediumRatingBar);
        RatingBar smallRatingBar = findViewById(R.id.smallRatingBar);

        TextView bigTextView = findViewById(R.id.bigTextView);
        TextView mediumTextView = findViewById(R.id.mediumTextView);
        TextView smallTextView = findViewById(R.id.smallTextView);

        Button averageButton = findViewById(R.id.averageButton);
        TextView averageTextView = findViewById(R.id.averageTextView);

        bigRatingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
                bigTextView.setText(String.valueOf(rating));
            }
        });
        mediumRatingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
                mediumTextView.setText(String.valueOf(rating));
            }
        });
        smallRatingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
                smallTextView.setText(String.valueOf(rating));
            }
        });

        averageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                float totalRating = bigRatingBar.getRating() + mediumRatingBar.getRating() + smallRatingBar.getRating();

                float average = Math.round(totalRating / 3 * 100) / 100.0f;
                averageTextView.setText(String.valueOf(average));
            }
        });



    }
}

 

각 RatingBar 에서 자신의 변경사항을 각각의 텍스트뷰에 보여주도록 만들었습니다.

 

추가로 현재 레이팅바에 들어있는 값들을 전부 가져와서 평균을 내는 평균 버튼을 만들었습니다.

 

마지막으로 시연 영상입니다.