안드로이드 ratingbar custom

2021. 2. 4. 2:18

https://blog.naver.com/nagne2011/222231077655

안드로이드 ratingbar custom

 

#안드로이드 #android #ratingbar #custom

 

구현목표는..

 

대표사진 삭제

사진 설명을 입력하세요.

 

이렇게 생긴 기본 ratingbar를

 

대표사진 삭제

사진 설명을 입력하세요.

이런식으로 임의 이미지로 커스텀할 예정

 

 

여기서 주의할점이, '별 반개'를 표시하기 위해서 따로 이미지를 추가해줘야한다

즉,

1. 빈칸

사진 삭제

사진 설명을 입력하세요.

2. 반개

사진 삭제

사진 설명을 입력하세요.

3. 한개

사진 삭제

사진 설명을 입력하세요.

 

이런식으로 구성해야된다

물론 반개짜리를 쓰지 않을거면 생략가능

(이전 포스팅에서도 언급했듯, svg이미지는 사용불가!)

 

이제 각 이미지를 어떤 상황에서 사용할지 적어주자

drawable폴더에 새로운 xml을 만들어서 아래와 같이 추가

<?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/icon_rating_empty"/>
    <item android:id="@android:id/secondaryProgress" android:drawable="@drawable/icon_rating_half"/>
    <item android:id="@android:id/progress" android:drawable="@drawable/icon_rating_fill"/>
</layer-list>

 

만약 반개짜리 별을 쓰지않는다면, secondaryProgress는 empty 이미지와 같은 이미지를 사용해주면된다

 

그리고 style.xml에 아래 내용 추가

<style name="ImageRatingBar" parent="@android:style/Widget.RatingBar">
        <item name="android:progressDrawable">@drawable/item_rating_bar</item>
        <item name="android:minHeight">32dp</item>
        <item name="android:minWidth">36dp</item>
    </style>

 

여기선 이미지 크기를 위해서 minHeight, minWidth등을 추가했지만 생략해도 되고

입맛따라 이것저것 추가해도된다

핵심은 "android:progressDrawble"

 

 

그다음 원하는 xml에 ratingbar를 추가하고

마지막에 style만 지정해주면 된다

<RatingBar
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:numStars="5"
 android:stepSize="0.5"
 android:rating="2.5"
 style="@style/ImageRatingBar"/>

 

여기서 중요하게 봐야할건

numStart : 별점 갯수

stepSize : 각각 갯수

이걸 1로 해주면 한개씩, 0.5로 해주면 반개씩 채운다

rating : 별점 초기 설정

 

그리고 마지막으로 style를 아까 만들었던 xml로 맞춰주면

 

끝!