Как сделать меньший 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"
    />  

Но стиль по умолчанию для строки рейтинга слишком велик.
Я пытаюсь изменить это, добавив стиль Android:style="?android:attr/ratingBarStyleSmall"

Но результат слишком мал, и с помощью этого свойства невозможно установить ставку.

Как я мог сделать?

Ответы:


106

По умолчанию виджет RatingBar выглядит как "хромая".

Источник ссылается на стиль " ?android:attr/ratingBarStyleIndicator" в дополнение к " ?android:attr/ratingBarStyleSmall", с которым вы уже знакомы. ratingBarStyleIndicatorнемного меньше, но все еще довольно некрасиво, и в комментариях отмечается, что эти стили "не поддерживают взаимодействие".

Вы, вероятно, лучше катать свои собственные. На http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/ есть достойно выглядящее руководство, показывающее, как это сделать. (Я еще не сделал это сам, но попытаюсь через день или около того.)

Удачи!

ps Извините, я собирался опубликовать ссылку на источник, чтобы вы могли в нем разобраться, но я новый пользователь и не могу опубликовать более 1 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 Content доступен из Google Cache . Я не обновляю сообщение с содержанием, так как я не просматривал бары рейтинга Android в течение многих лет, и не уверен, что содержание в этой ссылке все еще допустимо.
Фаррей

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 / primaryProgress" android: drawable = "@ drawable / star_empty" /> be "@ drawable / star_half" /> или как вы там это называли?
Переполнение стека

8
Огромное спасибо. Тем не менее, просто небольшой комментарий: вам не нужно изображение полузвезды. Он будет автоматически сгенерирован на основе прогресса.
Борис Странджев

1
@Vlad Прочтите первую строку ответа, которую я упомянул, откуда я это взял.
Вайбхав Яни

4
работает отлично :), но у меня есть 2 проблемы .. numStars больше не работает, и я не могу получить его немного больше, даже если я установил максимальную и минимальную ширину
Ахмад Двайк «Чернокнижник»

1
Спасибо @PiedPiper - это сэкономило мне много времени !! Лучшее объяснение!
Эдмонд Тамас

70

Просто используйте:

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

Измените масштабный коэффициент в соответствии с вашими потребностями.

Для масштабирования без создания отступа слева также добавьте

android:transformPivotX="0dp"

ScaleX ScaleY хороши, но оставляют уродливые отступы, если бы вы могли избавиться от этих отступов, это был бы самый простой идеальный ответ
Ахмад Двайк «Чернокнижник»

также им требуется Android 3.0 / API 11
averasko

6
Я codeandroid:scaleX="0.75" android:scaleY="0.75" android:layout_marginRight="-25dp"
решаю

1
Хотя это выглядит как самое простое решение, оно не сработало для меня. По какой-то причине не было никакого эффекта. Это потому что я на Android 5.x?
Наутилус

Вы можете удалить некоторые дополнительные отступы, указав высоту строки рейтинга, например:android:layout_height="40dp"
Манохар Редди

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

маленький, реализованный ОС

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

2
Рейтинговая строка не кликабельна при указании кода выше
Шарат

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
Хотя визуально это здорово. события щелчка, не работающие над этим решением. у вас есть какое-то решение для этого?
Гекхан Барыш Акер

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

хотя ответ Фарри работает, для устройств 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" />

Увеличьте / уменьшите размеры, используя scaleX и scaleY value


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 пикселей

HDP - 24 * 24 пикс.

И в стиле положите minheight и maxheight как 16 dp для всех разрешений.

Дайте мне знать, если это не поможет вам получить лучшие рейтинговые панели небольшого размера, так как эти размеры я нашел очень совместимыми и эквивалентными атрибуту стиля ratingbar.small.


0

Это работает для меня в строке рейтинга xml style = "? Android: attr / ratingBarStyleSmall" добавь this.it будет работать.


-4

Я решаю эту проблему следующим образом: style = "? Android: attr / ratingBarStyleSmall"


Это то, что ОП уже пробовал, и другие ответы уже упоминались.
Пан
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.