Jak zrobić mniejszy RatingBar?


134

Dodałem RatingBar w układzie:

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

Ale domyślny styl paska oceny jest za duży.
Próbowałem to zmienić, dodając styl androida:style="?android:attr/ratingBarStyleSmall"

Ale wynik jest za mały i nie można ustawić stawki za pomocą tej właściwości.

Jak mogłem to zrobić?

Odpowiedzi:


106

Domyślnym widżetem RatingBar jest sorta 'lame.

Źródło odwołuje się do stylu „ ?android:attr/ratingBarStyleIndicator” oprócz stylu „ ?android:attr/ratingBarStyleSmall”, który już znasz. ratingBarStyleIndicatorjest nieco mniejszy, ale wciąż jest dość brzydki, a komentarze wskazują, że te style „nie obsługują interakcji”.

Prawdopodobnie lepiej skręcisz własne. Na http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/ znajduje się przyzwoicie wyglądający przewodnik pokazujący, jak to zrobić. (Sam tego jeszcze nie zrobiłem, ale spróbuję za jakiś dzień).

Powodzenia!

ps Przepraszamy, zamierzałem zamieścić link do źródła, w którym możesz się przejrzeć, ale jestem nowym użytkownikiem i nie mogę opublikować więcej niż 1 adresu URL. Jeśli przekopiesz się przez drzewo źródłowe, znajduje się ono w frameworks / base / core / java / android / widget / RatingBar.java


O wiele lepiej jest używać? Android: attr / ratingBarStyleSmall i ustawić motyw oceny globalnej, ale nie używaj dokładnie nazwy motywu, wielkie dzięki;)
Tsung Goh

7
jeśli ustawimy właściwość wskaźnika android: isIndicator = "false" , będziemy z nim wchodzić w interakcje ..
Mayur R. Amipara

W docs sugerować ratingBarStyleSmall jest mniejsza od dwóch. Myślę, że twój komentarz jest zacofany.
AdamMc331

5
Link jest uszkodzony.
Denny

Treść @Denny jest dostępna w Google Cache . Nie aktualizuję posta o treść, ponieważ od lat nie oglądałem pasków oceny Androida i nie jestem pewien, czy treść w tym linku jest nadal aktualna.
Farray

195

Jak przykleić podany tutaj kod ...

Krok 1. Potrzebujesz własnych gwiazdek w res/drawable...

Pełna gwiazda

Pusta gwiazda

Step-2 W res/drawablepotrzebujesz ratingstars.xmlnastępujących ...

<?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>

Krok 3 W res/valuespotrzebujesz styles.xmlnastępujących ...

<?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>

Krok 4 W swoim układzie ...

<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
Czy nie powinno to być: <item android: id = "@ + android: id / secondaryProgress" android: drawable = "@ drawable / star_empty" /> być "@ drawable / star_half" /> czy jakkolwiek to nazwałeś?
StackOverflowed

8
Wielkie dzięki. Jednak tylko mały komentarz: nie potrzebujesz obrazu półgwiazdki. Zostanie automatycznie wygenerowany na podstawie postępu.
Boris Strandjev

1
@Vlad Przeczytaj pierwszą linię odpowiedzi, o której wspomniałem, skąd ją otrzymałem.
Vaibhav Jani,

4
działa idealnie :) ale mam 2 problemy .. numStars już nie działa i nie mogę go trochę zwiększyć, nawet jeśli
ustawię

1
Dzięki @PiedPiper - zaoszczędziło mi to dużo czasu !! Najlepsze wyjaśnienie w historii!
Edmond Tamas

70

Po prostu użyj:

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

Zmień współczynnik skali zgodnie z potrzebami.

Aby skalować bez tworzenia wypełnienia po lewej stronie, dodaj również

android:transformPivotX="0dp"

scaleX scaleY są dobre, ale zostaw brzydkie wypełnienie, gdybyś mógł się ich pozbyć, byłaby to najłatwiejsza idealna odpowiedź
Ahmad Dwaik 'Warlock'

wymagają też Androida 3.0 / API 11
averasko,

6
Rozwiązuję brzydkie (prawe) wypełnienie przez codeandroid:scaleX="0.75" android:scaleY="0.75" android:layout_marginRight="-25dp"
hannes ach

1
Chociaż wygląda to na najłatwiejsze rozwiązanie, nie zadziałało. Z jakiegoś powodu nie było żadnego efektu. Czy to dlatego, że używam Androida 5.x?
Nautilus

możesz usunąć dodatkowe wypełnienie, określając wysokość paska oceny, np .:android:layout_height="40dp"
Manohar Reddy

43

Nie ma potrzeby dodawania słuchacza do ?android:attr/ratingBarStyleSmall. Wystarczy dodać, android:isIndicator=falsea przechwyci zdarzenia kliknięcia, np

<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 jest kluczem!
martwa ryba

19

mała implementacja przez system operacyjny

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

2
Pasek oceny nie jest klikalny podczas podawania powyższego kodu.
Sharath

16

zastosuj to.

<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
Chociaż wizualnie jest świetny. zdarzenia kliknięć nie działają w tym rozwiązaniu. czy masz na to jakieś rozwiązanie?
Gökhan Barış Aker

4
jeśli chcesz, aby kliknięcia działały, użyj androida: isIndicator = "false"
D4rWiNS,

15

Znalazłem łatwiejsze rozwiązanie niż sądzę podane powyżej i łatwiejsze niż toczenie własnego. Po prostu utworzyłem mały pasek oceny, a następnie dodałem do niego onTouchListener. Stamtąd obliczam szerokość kliknięcia i określam na tej podstawie liczbę gwiazdek. Korzystając z tego kilka razy, jedynym dziwactwem, które znalazłem, jest to, że rysowanie małego paska oceny nie zawsze kończy się dobrze w tabeli, chyba że umieszczę go w LinearLayout (wygląda dobrze w edytorze, ale nie w urządzeniu) . W każdym razie w moim układzie:

            <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>

aw ramach mojej działalności:

    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; 
        } 
    });

Mam nadzieję, że to pomoże komuś innemu. Zdecydowanie łatwiejsze niż rysowanie własnego (chociaż odkryłem, że to również działa, ale chciałem po prostu łatwego użycia gwiazdek).


To działa i jest łatwe ... ale ratingBarStyleSmallgwiazdy są naprawdę za małe, aby były przydatne. Myślę, że będę musiał zrobić własne, aby uzyskać gwiazdy o średnim rozmiarze.
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>

// dodaj tę linię dla małego paska oceny

style = "?android:attr/ratingBarStyleSmall"

Chociaż ten fragment kodu może być rozwiązaniem, dołączenie wyjaśnienia naprawdę pomaga poprawić jakość Twojego posta. Pamiętaj, że odpowiadasz na pytanie do czytelników w przyszłości, a osoby te mogą nie znać powodów, dla których zaproponowałeś kod.
Johan

3

chociaż odpowiedź Farry działa, dla urządzeń Samsung RatingBar przyjął losowy niebieski kolor zamiast zdefiniowanego przeze mnie. Więc użyj

style="?attr/ratingBarStyleSmall"

zamiast.

Pełny kod, jak go używać:

<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

Najlepsza odpowiedź dla małego paska ratingowego

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

2

Użyj tego kodu

<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

Najlepsza odpowiedź, jaką otrzymałem

  <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>

użytkownik lubi to

<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" />

Zwiększenie / Zmniejszenie rozmiarów za pomocą scaleX i scaleY wartości


1

użyj poniższego kodu dla małego paska oceny ze zdarzeniem 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

Po wielu badaniach stwierdziłem, że najlepszym sposobem na zmniejszenie rozmiaru niestandardowych pasków oceny jest uzyskanie postępu, który można narysować w określonych rozmiarach, jak wspomniano poniżej:

xxhdpi - 48 * 48 pikseli

xhdpi - 36 * 36 pikseli

hdpi - 24 * 24 piksele

Stylowo ustaw minimalną i maksymalną wysokość na 16 dp dla wszystkich rozdzielczości.

Daj mi znać, jeśli to nie pomoże Ci uzyskać najlepszych ocen w małych rozmiarach, ponieważ te rozmiary uważam za bardzo zgodne i równoważne atrybutowi ratingbar.small style.


0

Działa dla mnie w pasku oceny xml style = "? Android: attr / ratingBarStyleSmall" add this.it będzie działać.


-4

Rozwiązuję ten problem w następujący sposób: style = "? Android: attr / ratingBarStyleSmall"


Właśnie tego PO już próbował i inne odpowiedzi już wspomniały.
Pang
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.