Jak mogę zmniejszyć rozmiar paska Ratingbar?


133

W swojej działalności mam kilka pasków ratingowych. Ale rozmiar tego paska jest taki duży! Jak mogę to zmniejszyć?

Edytować

Dzięki Gabrielowi Negutowi zrobiłem to w następującym stylu:

<RatingBar
style = "?android:attr/ratingBarStyleSmall"
android:numStars = "5"
android:rating   = "4" />

Teraz rozmiar jest zmniejszony, ale liczba gwiazdek i ocena nie działają !!! Czemu? Mam 7 gwiazdek, z których 6 jest wybranych.


Masz na myśli Seekbar? Ustawienie wysokości i szerokości działa dobrze dla mnie. Czy możesz zamieścić tutaj fragment kodu?
Shailendra Singh Rajawat

Zalecałbym usunięcie opcji „edytuj” i zamiast tego uczynić ją akceptowaną odpowiedzią. To lub @GabrielNegut może edytować swoją odpowiedź, aby uwzględnić tego rodzaju rozwiązanie. Uwzględnienie rozwiązania w pytaniu trochę odbiega od doświadczenia związanego z pytaniami i odpowiedziami.
onebree

1
style="?android:attr/ratingBarStyleSmall"pracuje dla mnie.
Muhammad Shahzad

Odpowiedzi:


166

Oryginalny link, który opublikowałem, jest teraz uszkodzony (istnieje dobry powód, dla którego publikowanie samych linków nie jest najlepszym sposobem). Musisz stylizować za RatingBarpomocą stylu ratingBarStyleSmalllub stylu niestandardowego dziedziczącego po Widget.Material.RatingBar.Small(zakładając, że używasz Material Design w swojej aplikacji).

Opcja 1:

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

Opcja 2:

// styles.xml
<style name="customRatingBar"   
    parent="android:style/Widget.Material.RatingBar.Small">
    ... // Additional customizations
</style>

// layout.xml
<RatingBar
    android:id="@+id/ratingBar"
    style="@style/customRatingBar"
    ... />

21
lub użycie tego stylu style = "? android: attr / ratingBarStyleSmall" zmniejszy rozmiar.
Mightian

1
Ale po prawej stronie znajduje się bezużyteczna dodatkowa wyściółka! Jak to usunąć ?!
Dr Jacky

Uwaga: ustaw szerokość = "wrap_content", aby pozbyć się dodatkowych gwiazdek
hkchakladar

76

To było moje rozwiązanie po wielu zmaganiach, aby zmniejszyć pasek oceny w małym rozmiarze bez nawet brzydkiego wypełnienia

 <RatingBar
        android:id="@+id/listitemrating"
        style="@android:attr/ratingBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleX=".5"
        android:scaleY=".5"
        android:transformPivotX="0dp"
        android:transformPivotY="0dp"
        android:isIndicator="true"
        android:max="5" />

3
Zalogowałem się tylko po to, aby zagłosować za Twoją odpowiedź dotyczącą użycia transformPivot do złagodzenia problemu nierównego wypełnienia. Dzięki!
imin

Wreszcie koniec z wyściółką!
Uday

Świetna odpowiedź! Dziękuję Ci!
valerybodak

2
Skala przeszkadza w dopasowaniu widoków rodzeństwa i zakłóca równowagę marginesów i odstępów.
Prateek Gupta

63

Jeśli chcesz wyświetlić pasek oceny w małym rozmiarze, po prostu skopiuj i wklej ten kod do swojego projektu.

  <RatingBar
    android:id="@+id/MyRating"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/getRating"
    android:isIndicator="true"
    android:numStars="5"
    android:stepSize="0.1" />

3
Co to jest android: stepSize = "0.1"?
darwin


sprawdź również moją odpowiedź na końcu tej strony.
Developine

@HammadTariqSahi Jest dobrze, tak trzymaj, ale czy jest jakiś problem w moim kodzie? Daj mi znać, jeśli jest coś, proszę
Pir Fahim Shah

@PirFahimShah thankyou, brachu Nie sprawdziłem tego kodu. możesz ulepszyć pasek oceny i nadać mu styl, jeśli zastosujesz się do tego podejścia.
Developine

42

Możesz ustawić go w kodzie XML dla RatingBar, użyć scaleXi scaleYodpowiednio dostosować. „1.0” będzie normalnym rozmiarem, a cokolwiek w „.0” go zmniejszy, a także wszystko większe niż „1,0” zwiększy go.

<RatingBar
  android:id="@+id/ratingBar1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:scaleX="0.5"
  android:scaleY="0.5" />

14
Problem polega na tym, że pasek oceny nadal zajmuje taką samą szerokość i wysokość jak poprzednio, mimo że ikony są mniejsze. Powoduje to problemy z wyrównaniem, ponieważ obok pierwszej i ostatniej ikony znajduje się kilka dopełnień z lewej i prawej strony. Na przykład, jeśli chcesz, aby Twoje ikony były takie jak „XXXXX”, po przeskalowaniu będą wyglądać tak: „----- XXXXX -----”, gdzie „-” to puste miejsce, a „X” to ikona . Twój pasek oceny będzie wyglądał, jakby został przesunięty w prawo z powodu pustego miejsca
olśniewającego

1
Domyślam się, że używasz układu względnego. To uciążliwe, ale możesz go dostosować, aby znalazł się we właściwej pozycji, używając android:layout_marginRight i lubi, aby uzyskać tak, jak chcesz.
ZeWolfe 15

5
aby uzyskać skalę bez tworzenia dopełnienia po lewej stronie, dodaj android: transformPivotX = "0dp"
darwin

38

Poniższy fragment zadziałał, aby zmienić rozmiar paska ratingowego

<RatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/ratingBar"
    style="?android:attr/ratingBarStyleIndicator"
    android:scaleX=".5"
    android:rating="3.5"
    android:scaleY=".5"
    android:transformPivotX="0dp"
    android:transformPivotY="0dp"
    android:max="5"/>

wprowadź opis obrazu tutaj


2
jak zmienić kolor paska oceny dla tego paska oceny wypełnienia do połowy, pełnego wypełnienia i pustego koloru?
Ganpat Kaliya

parametr oceny służy do wypełnienia paska oceny, prawda? Użyłem androida: rating = "3,5", więc 3,5 gwiazdki jest wypełnione. możesz ustawić do 5, ponieważ max = 5 jest ustawione w xml. Jeśli chcesz zmienić kolory paska oceny, musisz utworzyć styl w style.xml, zobacz ten link: stackoverflow.com/a/35914622/2915785
Naveed Ahmad

jak android: transformPivotX = "0dp" android: transformPivotY = "0dp" Programowo?
Salman Khakwani,

1
@NaveedAhmad Ale po prawej stronie znajduje się bezużyteczna wyściółka! Jak to usunąć ?!
Dr Jacky

@ Mr.Hyde sprawdź style raringbar stackoverflow.com/a/24407907/2915785
Naveed Ahmad

11

Przykład roboczy

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

i dodaj to do swojego pliku stylów xml

<style name="RatingBar"   
parent="android:style/Widget.Material.RatingBar.Small">
<item name="colorControlNormal">@color/primary_light</item>
<item name="colorControlActivated">@color/primary_dark</item>
</style>

W ten sposób nie musisz dostosowywać ratingBar.


9

Sprawdź moją odpowiedź tutaj . Najlepszy sposób na osiągnięcie tego.

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

i użyj jak

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

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

5
Czy mógłbyś wyjaśnić, jak doszedłeś do rozwiązania?
onebree

To nie pozwala RatingBarna zmianę.
CopsOnRoad,

4

Używając Widget.AppCompat.RatingBar, masz 2 style do użycia; Indicatori odpowiednio Smalldla dużych i małych rozmiarów. Zobacz przykład poniżej.

<RatingBar
    android:id="@+id/rating_star_value"
    style="@style/Widget.AppCompat.RatingBar.Small"
    ... />

3

Jeśli używasz paska oceny w Linearlayout z weightSum. Upewnij się, że nie powinieneś przypisywać lay_weight do paska oceny. Zamiast tego umieść pasek oceny w układzie względnym i nadaj wagę układowi względnemu. Utwórz zawartość zawijania szerokości paska oceny.

<RelativeLayout
    android:layout_width="0dp"
    android:layout_weight="30"
    android:layout_gravity="center"
    android:layout_height="wrap_content">
        <RatingBar
            android:id="@+id/userRating"
            style="@style/Widget.AppCompat.RatingBar.Small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:stepSize="1" />
</RelativeLayout>

3

W RatingBartagu dodaj te dwie linie

style="@style/Widget.AppCompat.RatingBar.Small"
android:isIndicator="false"

2

Jeśli potrzebujesz tylko domyślnego stylu, upewnij się, że masz następującą szerokość / wysokość, w przeciwnym razie numStars może się pomylić:

android:layout_width="wrap_content"
android:layout_height="wrap_content"

1
użycie tego stylu style = "? android: attr / ratingBarStyleSmall" zmniejszy rozmiar
Mightian,


1

To zadziałało dla mnie.
Sprawdź ten obraz

            android:id="@+id/ratingBar"
            style="?android:attr/ratingBarStyleIndicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numStars="5"
            android:scaleX=".8"
            android:scaleY=".8"
            android:stepSize="0.5"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.543"
            app:layout_constraintStart_toEndOf="@+id/title"
            app:layout_constraintTop_toTopOf="parent" />

0

Dla tych, którzy programowo utworzyli pasek oceny i chcą ustawić mały pasek oceny zamiast domyślnego dużego paska oceny

    private LinearLayout generatedRatingView (wartość zmiennoprzecinkowa) {
        LinearLayout linearLayoutRating = new LinearLayout (getContext ());
        linearLayoutRating.setLayoutParams (new TableRow.LayoutParams (TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT));
        linearLayoutRating.setGravity (Gravity.CENTER);
        RatingBar ratingBar = new RatingBar (getContext (), null, android.R.attr.ratingBarStyleSmall);
        ratingBar.setEnabled (false);
        ratingBar.setStepSize (Float.parseFloat ("0.5")); // do włączenia pół gwiazdki
        ratingBar.setNumStars (5);
        ratingBar.setRating (wartość);
        linearLayoutRating.addView (ratingBar);
        return linearLayoutRating;
    }


0
 <RatingBar     android:id="@+id/id_tv_rating_bar"
                style="@style/Widget.AppCompat.RatingBar.Small"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/_20sdp"
                android:layout_marginLeft="@dimen/_80sdp"
                android:numStars="5"
                android:paddingTop="@dimen/_5sdp"
                android:rating="5" />

Po prostu użyj style="@style/Widget.AppCompat.RatingBar.Small", będzie działać na pewno!


po użyciu tej oceny kolor paska się nie zmienia. Jak to zmienić?
Shoaib K.
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.