안녕하세요, 반갑습니다!
 |
 |
 |
게임을 하거나
음악을 듣거나
상품을 구입하고 우리는 리뷰를 남깁니다.
그리고 상품이 얼마나 만족스러웠는지 점수도 줄 수 있습니다.
쇼핑몰, 앱스토어 등에서 정말 흔하게 볼 수 있는 별점!
안드로이드에서 기본적으로 제공하는 기능이 있습니다.
바로,
레이팅바(Rating Bar)
평가 점수를 주는데 가장 직관적인 UI 가 아닌가 싶습니다.
사용자는 손 쉽게 원하는 별 개수를 클릭 및 드래그하면 되니까요.
이 레이팅바도 프로그래스바, 시크바 등과 마찬가지로 간단하게 구현할 수 있습니다.
같이 만들어보시죠.
간단하게 만들 수 있습니다.
1. .xml 파일에 레이팅바 배치하기
저는 심플하게 레이팅바(RatingBar) 와 점수를 나타내는 TextView 만 배치했습니다.
<RatingBar
android:id="@+id/ratingBar"
style="@android:style/Widget.DeviceDefault.Light.RatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:isIndicator="false" //사용자 사용 유무(true:불가, false:가능)
android:numStars="5" //별 개수
android:rating="0" //시작 별 개수
android:stepSize="2" //변경 범위, 별 5일때 2라면 범위가 2.5개
/>레이팅 바를 사용하면 주로 사용하게 되는 속성들이 있습니다.
1. isIndicator : 사용자가 별점을 바꿀 수 없도록 합니다. true 로 설정하면 별점을 줄 수가 없네요
2. numStars : 별 개수 입니다. 기본이 5개입니다.
3. rating : 별 개수를 미리 설정할 수도 있습니다.
4. stepSize : 변경되는 범위를 지정합니다. 보통 0.5 또는 1로 설정합니다.
단, 이 설정은 비율로 지정이 됩니다.
만약 별 5개일때 stepSize 를 2로 설정한다면, 별은 5/2 가 되어 2.5 만큼 움직이게 됩니다.
저는 아래와 같이 간단히 점수를 표시할 수 있는 텍스트뷰(TextView) 와 레이팅바(RatingBar)를 배치했습니다.
2. 레이팅바 크기 조절하기
이 레이팅바(RatingBar)의 기본 크기는 너무 큽니다.
앱에도 쉽게 사용하기가 힘든 크기죠.
하지만, 다행스럽게도 스타일을 변경함으로 인해서 이 크기를 조절할 수가 있습니다.
Design 화면에서 Style의 값을 아래와 같이 3가지로 설정해 줄 수 있습니다.
- 기본 크기인 RatingBar
- 조금 작은 RatingBar.Indicator
- 완전 작은 RatingBar.Small
3. 레이팅바에 Listener 연결하기
이제 이 레이팅바가 동작할 수 있도록 Listener() 를 연결해 보겠습니다.
너무 쉬워서 큰 일이에요.
ratingBar.setOnRatingBarChangeListener { ratingBar, rating, fromUser ->
starScore.text = "${rating}점"
}
끝났습니다.
setOnRatingBarChangeListener { } 만 연결해서 rating 으로 전달되는 값을 가져오기만 하면 됩니다.
어떠신가요?
이제 레이팅바(RatingBar) 를 이용해서 사용자로부터 평점을 받을 수 있고,
상품별 평점을 줄 수도 있게 되었습니다!
그럼 전 다른 유용한 기능을 또 준비해보겠습니다.
감사합니다.