[Android] Custom Rating Bar

RatingBar

SeekBar, ProgressBar의 확장으로 별점을 표시할 때 쓰이는 View입니다 

터치 혹은 드래그로 별점을 정할 수 있습니다 아래사진처럼요! 

 

RatingBar의 자주 쓰이는 속성 

android:isIndicator

 - RatingBar의 조절 여부 (true : 사용자가 조절 불가 , false: 사용자가 조절 가능)

android:numStars

 -  별의 개수를 지정 (ex: android:numStars="5")

 -  numStar 지정 시, RatingBar의 layout_width = "wrap_content"로 해야 지정한 개수가 제대로 보입니다

android:rating

 -  디폴트 별점 지정 (ex. android:rating="3")

android:stepSize

 -  별점의 증감 범위 설정 (기본값은 0.5) 

 

사용자가 정한 별점을 가져오려면 ratingBar.rating을 사용하면 됩니다 

 

RatingBar는 속성이나 함수가 많지 않기때문에 사용하기엔 간단하지만,

저는 별모양 말고 다른 모양을 사용하고 싶었기에 RatingBar를 커스텀 해야 했습니다 😅

---

RatingBar Custom 하기

 

1️⃣ 이미지 및 xml 설정

별 대신 보여질 이미지를 준비합니다 

1) 채워진 이미지

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/heart_fill" android:state_pressed="true" android:state_window_focused="true" />
    <item android:drawable="@drawable/heart_fill" />
</selector>

 

2) 비워진 이미지

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/heart_not_fill" android:state_pressed="true" android:state_window_focused="true" />
    <item android:drawable="@drawable/heart_not_fill" />
</selector>

 

 

2️⃣ Selector 생성

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/rating_border" />
    <item
        android:id="@android:id/secondaryProgress"
        android:drawable="@drawable/rating_border" />
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/rating_fill" />

</layer-list>

 

 

3️⃣ Style 선언 

progressDrawable에 위에서 생성한 Selector파일을 넣어줍니다 

<style name="CustomRatingBar" parent="Widget.AppCompat.RatingBar">
     <item name="android:progressDrawable">@drawable/rating</item>
</style>

 

 

4️⃣ xml에 선언

이제 3에서 만든 Style파일을 RatingBar를 생성하고자 하는 레이아웃 파일에 선언해줍니다 

<RatingBar
     android:id="@+id/ratingbar"
     style="@style/CustomRatingBar"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginStart="20dp"
     android:layout_marginTop="20dp"
     android:layout_marginEnd="20dp"
     android:isIndicator="false"
     android:numStars="5"
     android:rating="3.5"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent" />

 

 

1️⃣ ~ 4️⃣까지 완료하면 아래와 같은 RatingBar가 생성됩니다 

 

---

 

라이브러리를 쓰지않고 RatingBar를 커스텀하려니 좀 헤맸습니다 

궁금하신 점이나 의견이 있으시면 댓글 부탁드립니다 감사합니다 😊

도움받은 블로그