더 작은 RatingBar를 만드는 방법?


134

레이아웃에 RatingBar 를 추가했습니다 :

<RatingBar 
    android:id="@+id/ratingbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:numStars="5"
    android:stepSize="1.0"
    />  

그러나 등급 표시 줄의 기본 스타일이 너무 큽니다.
안드로이드 스타일을 추가하여 변경하려고했습니다.style="?android:attr/ratingBarStyleSmall"

그러나 결과가 너무 작으므로이 속성으로 요금을 설정할 수 없습니다.

어떻게해야합니까?

답변:


106

기본 RatingBar 위젯은 일종의 절름발이입니다.

소스는 이미 친숙한 " ?android:attr/ratingBarStyleIndicator" 스타일 외에도 " " 스타일을 참조합니다 ?android:attr/ratingBarStyleSmall. ratingBarStyleIndicator약간 작지만 여전히 추악하고 의견에 따르면 이러한 스타일은 "상호 작용을 지원하지 않습니다".

당신은 아마 당신 자신을 굴리는 것이 더 나을 것입니다. http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/ 에는 괜찮은 가이드가 있습니다. (나는 아직 직접하지 않았지만 하루 정도면 시도 할 것입니다.)

행운을 빕니다!

추신 : 죄송합니다, 당신이 찌를 수있는 소스에 대한 링크를 게시하려고했지만 새로운 사용자이고 하나 이상의 URL을 게시 할 수 없습니다. 소스 트리를 통해 길을 찾으면 frameworks / base / core / java / android / widget / RatingBar.java에 있습니다.


android : attr / ratingBarStyleSmall을 사용하고 전역 평가 테마를 설정하지만 정확한 테마 이름을 사용하지 않는 것이 훨씬 좋습니다.)
Tsung Goh

7
우리가 인디케이터 속성 android : isIndicator = "false" 를 설정하면 그것과 상호 작용할 것입니다.
Mayur R. Amipara

문서는 ratingBarStyleSmall 두의 작은 의미한다. 나는 당신의 의견이 거꾸로 생각합니다.
AdamMc331

5
링크가 끊어졌습니다.
Denny

@Denny Content는 Google Cache 에서 사용할 수 있습니다 . 몇 년 동안 Android 등급 막대를 보지 않았기 때문에 콘텐츠로 게시물을 업데이트하지 않으며 해당 링크의 콘텐츠가 여전히 유효한지 확실하지 않습니다.
Farray

195

여기에 주어진 코드를 붙이는 방법 ...

1 단계. 당신은 자신의 등급 별이 필요합니다 res/drawable...

풀 스타

빈 별

2 단계 다음과 같이 res/drawable필요합니다 ratingstars.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/star_empty" />
    <item android:id="@android:id/secondaryProgress"
          android:drawable="@drawable/star_empty" />
    <item android:id="@android:id/progress"
          android:drawable="@drawable/star" />
</layer-list>

3 단계 다음과 같이 res/values필요합니다 styles.xml...

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="foodRatingBar" parent="@android:style/Widget.RatingBar">
        <item name="android:progressDrawable">@drawable/ratingstars</item>
        <item name="android:minHeight">22dip</item>
        <item name="android:maxHeight">22dip</item>
    </style>
</resources>

4 단계 레이아웃에서 ...

<RatingBar 
      android:id="@+id/rtbProductRating"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:numStars="5"
      android:rating="3.5"
      android:isIndicator="false"
      style="@style/foodRatingBar"    
/>  

7
그렇지 않습니다 : <item android : id = "@ + android : id / secondaryProgress"android : drawable = "@ drawable / star_empty"/> "@ drawable / star_half"/> 또는 무엇이라고 하던가?
StackOverflowed

8
무리 감사. 그러나 작은 의견 : 반 별 이미지가 필요하지 않습니다. 진행 상황에 따라 자동으로 생성됩니다.
보리스 스트 란드 제프

1
@Vlad 내가 이것을 얻는 곳에서 언급 한 첫 번째 답변을 읽으십시오.
Vaibhav Jani

4
완벽하게 작동 :)하지만 난이 문제 .. numStars 더 이상 작업을 나던있어, 나는 내가 최대 및 최소 폭을 설정 한 경우에도 그것이 조금 더 크게 기운 다
아마드 Dwaik '흑 마법사'를

1
감사합니다 @ PiedPiper-이것은 많은 시간을 절약했습니다! 최고의 설명!
Edmond Tamas

70

그냥 사용하십시오 :

android:scaleX="0.5"
android:scaleY="0.5"

필요에 따라 스케일 팩터를 변경하십시오.

왼쪽에 패딩을 만들지 않고 크기를 조정하려면

android:transformPivotX="0dp"

scaleX가 scaleY를 좋아하지만 당신이 가장 쉬운 완벽한 해답이 될 것이라고 패딩을 제거 할 수 있다면, 추한 패딩을 남겨
아마드 Dwaik '흑 마법사'

또한, 그들은 안드로이드 3.0 / API (11) 필요
averasko

6
나는 못생긴 (오른쪽) 패딩을 해결했습니다 codeandroid:scaleX="0.75" android:scaleY="0.75" android:layout_marginRight="-25dp"
hannes ach

1
가장 쉬운 해결책처럼 보이지만 나에게는 효과가 없었습니다. 어떤 이유로 효과가 없었습니다. Android 5.x를 사용하고 있기 때문입니까?
노틸러스

예를 들어 등급 막대의 높이를 지정하여 추가 패딩을 제거 할 수 있습니다.android:layout_height="40dp"
Manohar Reddy

43

에 리스너를 추가 할 필요가 없습니다 ?android:attr/ratingBarStyleSmall. 추가 만하면 android:isIndicator=false클릭 이벤트가 캡처됩니다. 예 :

<RatingBar
  android:id="@+id/myRatingBar"
  style="?android:attr/ratingBarStyleSmall"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:numStars="5"
  android:isIndicator="false" />

4
isIndicator가 핵심입니다!
deadfish

19

OS가 구현 한 작은 것

<RatingBar
    android:id="@+id/ratingBar"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    />

2
위의 코드를 제공 할 때 등급 표시 줄을 클릭 할 수 없습니다.
Sharath

16

이것을 적용하십시오.

<RatingBar android:id="@+id/indicator_ratingbar"
    style="?android:attr/ratingBarStyleIndicator"
    android:layout_marginLeft="5dip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical" />

1
시각적으로 좋지만. 이 솔루션에서 작동하지 않는 클릭 이벤트 이 문제에 대한 해결책이 있습니까?
Gökhan Barış Aker

4
클릭 작동을 원한다면 android : isIndicator = "false"
D4rWiNS

15

위의 솔루션에서 생각한 것보다 쉽고 쉬운 솔루션을 찾았습니다. 작은 등급 표시 줄을 만든 다음 onTouchListener를 추가했습니다. 거기에서 클릭 너비를 계산하고 그 별 수를 결정합니다. 이것을 여러 번 사용한 결과, 내가 찾은 유일한 단점은 LinearLayout으로 묶지 않으면 작은 등급 표시 줄의 그림이 테이블에서 항상 올바르게 나오지 않는다는 것입니다 (편집기에서는 보이지만 장치는 아닙니다) . 어쨌든 내 레이아웃에서 :

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >
                <RatingBar
                    android:id="@+id/myRatingBar"
                    style="?android:attr/ratingBarStyleSmall"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:numStars="5" />
            </LinearLayout>

내 활동 내에서 :

    final RatingBar minimumRating = (RatingBar)findViewById(R.id.myRatingBar);
    minimumRating.setOnTouchListener(new OnTouchListener()
    { 
        public boolean onTouch(View view, MotionEvent event)
        { 
            float touchPositionX = event.getX();
            float width = minimumRating.getWidth();
            float starsf = (touchPositionX / width) * 5.0f;
            int stars = (int)starsf + 1;
            minimumRating.setRating(stars);
            return true; 
        } 
    });

나는 이것이 다른 누군가를 돕기를 바랍니다. 자신의 그림을 그리는 것보다 확실히 쉽습니다 (물론 효과가 있지만 별을 쉽게 사용하고 싶었습니다).


그것은 작동하고 쉽습니다 ... 그러나 ratingBarStyleSmall별은 너무 작아서 유용하지 않습니다. 중간 크기의 별을 얻으려면 나 자신을 굴려야한다고 생각합니다.
Beer Me

5
<RatingBar
    android:id="@+id/rating_bar"
    style="@style/Widget.AppCompat.RatingBar.Small"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

5
 <RatingBar
                    android:rating="3.5"
                    android:stepSize="0.5"
                    android:numStars="5"
                    style = "?android:attr/ratingBarStyleSmall"
                    android:theme="@style/RatingBar"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>

// if you want to style 

 <style name="RatingBar" parent="Theme.AppCompat">
        <item name="colorControlNormal">@color/colorPrimary</item>
        <item name="colorControlActivated">@color/colorAccent</item>
    </style>

// 작은 등급 표시 줄에이 줄을 추가하십시오.

style = "?android:attr/ratingBarStyleSmall"

이 코드 스 니펫이 해결책이 될 수 있지만 설명을 포함하면 게시물의 품질을 향상시키는 데 실제로 도움이됩니다. 앞으로 독자들에게 질문에 대한 답변을 제공하므로 해당 사람들이 코드 제안의 이유를 모를 수도 있습니다.
요한

3

Farry의 대답은 효과가 있지만 Samsung 장치의 경우 RatingBar는 내가 정의한 대신 임의의 파란색을 사용했습니다. 그래서 사용

style="?attr/ratingBarStyleSmall"

대신에.

전체 코드 사용 방법 :

<android.support.v7.widget.AppCompatRatingBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="?attr/ratingBarStyleSmall" // use smaller version of icons
                android:theme="@style/RatingBar"
                android:rating="0"
                tools:rating="5"/>

<style name="RatingBar" parent="Theme.AppCompat">
        <item name="colorControlNormal">@color/grey</item>
        <item name="colorControlActivated">@color/yellow</item>
        <item name="android:numStars">5</item>
        <item name="android:stepSize">1</item>
    </style>

3

작은 등급 막대에 대한 최상의 답변

<RatingBar
                    android:layout_width="wrap_content"
                    style = "?android:attr/ratingBarStyleSmall"
                    android:layout_height="wrap_content" />

2

이 코드를 사용하십시오

<RatingBar
    android:id="@+id/ratingBarSmalloverall"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="30dp"
    android:isIndicator="false"
    android:numStars="5" />

2
<RatingBar
    android:id="@+id/ratingBar1"
    android:numStars="5"
    android:stepSize=".5"
    android:rating="3.5"
    style="@android:style/Widget.DeviceDefault.RatingBar.Small"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

2

내가 얻은 최고의 답변

  <style name="MyRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:minHeight">15dp</item>
    <item name="android:maxHeight">15dp</item>
    <item name="colorControlNormal">@color/white</item>
    <item name="colorControlActivated">@color/home_add</item>
</style>

이 같은 사용자

<RatingBar
                style="?android:attr/ratingBarStyleIndicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:isIndicator="false"
                android:max="5"
                android:rating="3"
                android:scaleX=".8"
                android:scaleY=".8"
                android:theme="@style/MyRatingBar" />

scaleXscaleY 값 을 사용하여 크기 증가 / 감소


1

onTouch 이벤트와 함께 작은 등급 표시 줄에 다음 코드를 사용하십시오.

enter code here


<RatingBar
            android:id="@+id/ratingBar"
            style="?android:ratingBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:isIndicator="false"
            android:rating="4"
            android:stepSize="0.5" />

0

많은 연구 끝에 맞춤 등급 막대의 크기를 줄이는 가장 좋은 해결책은 아래에 언급 된 것처럼 특정 크기에서 진행 가능한 크기를 얻는 것입니다.

xxhdpi-48 * 48 픽셀

xhdpi-36 * 36 픽셀

hdpi-24 * 24 픽셀

그리고 스타일에서 모든 해상도에 대해 최소 높이와 최대 높이를 16dp로 설정하십시오.

이 크기가 ratingbar.small 스타일 속성과 매우 호환되며 동등한 크기로 최상의 소형 등급 막대를 얻는 데 도움이되지 않는지 알려주십시오.


0

그것은 평가 표시 줄 xml style = "? android : attr / ratingBarStyleSmall"에서 나를 위해 일하고 있습니다 .this.it가 작동합니다.


-4

이 문제를 다음과 같이 해결합니다. style = "? android : attr / ratingBarStyleSmall"


이것은 OP가 이미 시도한 것이며 다른 답변은 이미 언급했습니다.
Pang
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.