[Android/Compose] 별점 평가 Rating Bar 라이브러리 제작 및 배포 경험

Rating Bar란, 별점 평가 UI 요소를 의미한다.

안드로이드 공식 문서에서도 사용하는 용어이며, 개발 및 디자인 커뮤니티에서도 잘 쓰이는 용어라고 한다.

 

나의 경우 별점 평가 기능을 넣을때 활성화/비활성화 이미지를 넣는 방식으로 개발해왔기 때문에 용어를 몰랐었다.

또, 평가 기능을 넣을때 0에서 5까지 있으며 설정 가능한 단위가 1 단위여서 충분히 활성화/비활성화 이미지 두장으로 구현 가능했다.

 

그러나 이번에 사이드 프로젝트를 진행하며 평가 최소, 최대 값이 0~5까지 있으며 단위가 0.5여서 평가 UI를 찾아보게 되었다.

RatingBar를 구현할 당시에 검색했던 용어가 Rating Bar가 아니었던 건지, 직접 구현해서 적용했다.

(내 기억으로는 어떤 용어로 검색을 했었고 그닥 결과가 나오지 않아서 직접 만들었던 것으로 기억함..)

 

기억상으로 검색해도 없었기에 라이브러리로 올려도 좋을 것 같아서 직접 라이브러리로 배포하게 되었다.

---

Android Compose Star Rating Bar

 

이 라이브러리에서 제공하는 RatingBar는 현재 별, 하트, 원형, 사각형 모형으로 제공하고 있다.

사이드 프로젝트에서는 Border 없이 활성화/비활성화 색상만 적용했지만

라이브러리로 제공할거라면 나름 기본적이라고 생각하는 기능 정도는 구현해야할 것 같아서 Border 색상과 두께, 크기, 간격 등 적용해서 배포해둔 상태이다.

 

주요 기능이라 하면 1, 0.5 단위도 가능하지만 0.2, 0.3, 0.05 등 단위도 가능하다. 최대 1 단위까지 적용 가능하도록 구현했다.

---

Android Compose Star Rating Bar

사이드 프로젝트에 적용한 기능은 사용자가 평점을 등록할때는 0.5 단위로 선택이 돼야하고

평점 통계 평균 값을 보여줄 때는 0.1 단위로 보여져야해서 입력은 단위를 제한하되 표시하는 부분은 제한되지 않도록 구현했다.

또 2.4라면 별 반개가 보여지는게 아닌 별의 40% 영역이 활성화로 보여지도록 구현했다.

 

사이드 프로젝트에 적용하기 위해 가장 중요했던 부분이 바로 별의 한개, 반개가 아닌 퍼센트 만큼 보여지도록 표시하는 것이였다.

 

---

위 라이브러리는 깃허브에 샘플 프로젝트로 올려뒀다.

라이브러리 컴포즈 버전이 최신 버전이라.. 라이브러리를 사용하는 프로젝트도 라이브러리에 맞춰서 컴포즈 버전을 올려서 사용해야한다.

이 부분을 낮은 버전까지 지원하도록 개선해야할지는 고민중이다.

---

 

GitHub - blueland99/ComposeRatingBar: Android Compose Customizable RatingBar: Star, Heart, Circle, Square

 

JitPack | Publish JVM and Android libraries