[Java][Android] SimpleRatingBar 사용하기

안녕하세요.

오늘은 SimpleRatingBar 라이브러리를 사용해서 쉽게 다양한 RaingBar를 만들어보겠습니다.

 

https://github.com/williamyyu/SimpleRatingBar

GitHub - williamyyu/SimpleRatingBar: A simple RatingBar that you can easier to customize image and animations

 

1. 라이브러리 등록

build.gradle에 다음과 같이 repositories 와 dependencies 를 등록해줍니다.

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

dependencies {
    implementation 'com.github.ome450901:SimpleRatingBar:1.5.1'
}

2. XMl 화면 구성

속성

기본 별점 BaseRatingBar

확대 별점 ScaleRatingBar

회전 별점 RototationBar

        app:srb_numStars="3"  -- 총 별의 갯수
        app:srb_minimumStars="1" -- 최소로 선택된 별의 갯수
        app:srb_rating="2" -- 현재 별의 갯수
        app:srb_starWidth="30dp" -- 각 별의 넓이
        app:srb_starHeight="30dp" -- 각 별의 높이
        app:srb_starPadding="15dp" -- 각 별의 여백값
        app:srb_stepSize="0.5" -- 최소로 몇점씩 오르는지
        app:srb_clickable="true" -- 터치 가능 여부
        app:srb_scrollable="true" -- 드래그 가능 여부
        app:srb_clearRatingEnabled="true" -- 별 초기화 가능 여부
        app:srb_drawableEmpty="@drawable/start_empty" -- 비어있는 별의 커스텀이미지
        app:srb_drawableFilled="@drawable/star_filled"> -- 차있는 별의 커스텀이미지

속성은 다음과 같습니다.

메인 화면 구성

<?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/base_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="기본 별점 : 0 점"
        android:textSize="40sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.503"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.willy.ratingbar.BaseRatingBar
        android:id="@+id/base"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="@+id/base_txt"
        app:layout_constraintStart_toStartOf="@+id/base_txt"
        app:layout_constraintTop_toBottomOf="@+id/base_txt"
        app:srb_clearRatingEnabled="true"
        app:srb_clickable="true"
        app:srb_isIndicator="false"
        app:srb_minimumStars="1"
        app:srb_numStars="5"
        app:srb_scrollable="true"
        app:srb_starHeight="30dp"
        app:srb_starPadding="5dp"
        app:srb_starWidth="30dp"
        app:srb_stepSize="0.5">

    </com.willy.ratingbar.BaseRatingBar>

    <TextView
        android:id="@+id/scale_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="152dp"
        android:text="확대 별점 : 0 점"
        android:textSize="40sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.509"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.willy.ratingbar.ScaleRatingBar
        android:id="@+id/scale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toEndOf="@+id/scale_txt"
        app:layout_constraintStart_toStartOf="@+id/scale_txt"
        app:layout_constraintTop_toBottomOf="@+id/scale_txt" />

    <com.willy.ratingbar.RotationRatingBar
        android:id="@+id/rotation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="@+id/rotation_txt"
        app:layout_constraintStart_toStartOf="@+id/rotation_txt"
        app:layout_constraintTop_toBottomOf="@+id/rotation_txt" />

    <TextView
        android:id="@+id/rotation_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="280dp"
        android:text="회전 별점 : 0 점"
        android:textSize="40sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.509"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/custom_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="424dp"
        android:text="이미지 커스텀"
        android:textSize="40sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.522"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.willy.ratingbar.BaseRatingBar
        android:id="@+id/custom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srb_drawableEmpty="@drawable/heartwhite"
        app:srb_drawableFilled="@drawable/heartblack"
        app:srb_clearRatingEnabled="true"
        app:srb_clickable="true"
        app:srb_isIndicator="false"
        app:srb_minimumStars="1"
        app:srb_numStars="5"
        app:srb_rating="2"
        app:srb_scrollable="true"
        app:srb_starHeight="30dp"
        app:srb_starPadding="5dp"
        app:srb_starWidth="30dp"
        app:srb_stepSize="0.5"
        app:layout_constraintEnd_toEndOf="@+id/custom_txt"
        app:layout_constraintStart_toStartOf="@+id/custom_txt"
        app:layout_constraintTop_toBottomOf="@+id/custom_txt" />
</androidx.constraintlayout.widget.ConstraintLayout>

3. 메인 코드 구현

ScaleRatingBar ratingBar = new ScaleRatingBar(this); // 레이팅바 객체 생성
ratingBar.setNumStars(5); //  전체 별 갯수 설정
ratingBar.setMinimumStars(1); // 최소 별 설정
ratingBar.setRating(3); // 현재 별갯수 설정
ratingBar.setStarPadding(10); // 별 사이 여백 설정
ratingBar.setStepSize(0.5f); // 한번에 몇 점씩 오를지 설정
ratingBar.setWidth(105); // 별 넓이
ratingBar.setHeight(105); // 별 높이
ratingbar.setIsIndicator(false); // 인디케이터 설정 여부
ratingbar.setClickable(true); // 클릭가능여부
ratingbar.setScrollable(true); // 드래그 가능한지 여부
ratingbar.setClearRatingEnabled(true); // 최기화 가능한지 여부
ratingBar.setEmptyDrawableRes(R.drawable.start_empty); // 커스텀 이미지 (비어있는경우)
ratingBar.setFilledDrawableRes(R.drawable.start_empty); // 커스텀 이미지 (채워져있는경우)
ratingBar.setOnRatingChangeListener(new BaseRatingBar.OnRatingChangeListener() {
    @Override // 별의 갯수(점수) 가 바뀔때마다 처리해주는 Lintener
        public void onRatingChange(BaseRatingBar ratingBar, int rating, boolean fromUser) {
            Log.e(TAG, "onRatingChange: " + rating);
    }
});

자바 코드는 다음과 같습니다.

public class MainActivity extends AppCompatActivity {

    private AppBarConfiguration appBarConfiguration;
    private ActivityMainBinding binding;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        binding.base.setOnRatingChangeListener(new BaseRatingBar.OnRatingChangeListener() {
            @Override
            public void onRatingChange(BaseRatingBar ratingBar, float rating, boolean fromUser) {
             binding.baseTxt.setText("기본별점 : " + rating + "점");
            }
        });

        binding.scale.setOnRatingChangeListener(new BaseRatingBar.OnRatingChangeListener() {
            @Override
            public void onRatingChange(BaseRatingBar ratingBar, float rating, boolean fromUser) {
                binding.scaleTxt.setText("확대 별점 : " + rating + "점");
            }
        });

        binding.rotation.setOnRatingChangeListener(new BaseRatingBar.OnRatingChangeListener() {
            @Override
            public void onRatingChange(BaseRatingBar ratingBar, float rating, boolean fromUser) {
                binding.rotationTxt.setText("회전 별점 : " + rating + "점");
            }
        });
    }
}