Como criar uma RatingBar menor?


134

Adicionei uma RatingBar em um layout:

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

Mas o estilo padrão da barra de classificação é muito grande.
Eu tentei alterá-lo adicionando o estilo android:style="?android:attr/ratingBarStyleSmall"

Mas o resultado é muito pequeno e é impossível definir uma taxa com essa propriedade.

Como eu poderia fazer?

Respostas:


106

O widget RatingBar padrão é meio que manco.

A fonte faz referência ao estilo " ?android:attr/ratingBarStyleIndicator", além do " ?android:attr/ratingBarStyleSmall" que você já conhece. ratingBarStyleIndicatoré um pouco menor, mas ainda é muito feio e os comentários observam que esses estilos "não suportam interação".

Você provavelmente está melhor rolando o seu próprio. Há um guia de aparência decente em http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/ mostrando como fazer isso. (Eu ainda não o fiz, mas tentarei em um dia ou mais.)

Boa sorte!

ps Desculpe, estava indo para postar um link para a fonte para você bisbilhotar, mas eu sou um novo usuário e não pode postar mais de 1 URL. Se você vasculhar a árvore de origem, ela estará localizada em frameworks / base / core / java / android / widget / RatingBar.java


É muito melhor para usar o Android: attr / ratingBarStyleSmall e tema rating global definida, mas não usar o nome exatamente tema, muito obrigado;)?
Tsung Goh

7
se nós conjunto de propriedades indicador Android: isIndicator = "false" do que vai interagir com ele ..
Mayur R. Amipara

Os documentos implicam ratingBarStyleSmall é o menor dos dois. Eu acho que seu comentário está atrasado.
AdamMc331

5
Link quebrado.
9119 Denny

O Conteúdo @Denny está disponível no Google Cache . Não atualizo a postagem com o conteúdo, pois não vejo as barras de classificação do Android há anos e não tenho certeza se o conteúdo desse link ainda é válido.
Farray

195

Como colar o código fornecido aqui ...

Passo 1. Você precisa de suas próprias estrelas de classificação em res/drawable...

Uma estrela cheia

Estrela vazia

Passo-2 Em res/drawablevocê precisa ratingstars.xmlcomo segue ...

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

Passo-3 Em res/valuesvocê precisa styles.xmlcomo segue ...

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

Etapa 4 no seu layout ...

<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
Não deve: <item android: id = "@ + android: id / secundárioProgress" android: drawable = "@ drawable / star_empty" /> ser "@ drawable / star_half" /> ou como você o chamou?
StackOverflowed

8
Muitíssimo obrigado. No entanto, apenas um pequeno comentário: você não precisa de uma imagem de meia estrela. Será gerado automaticamente com base no progresso.
Boris Strandjev

1
@ Vlad Leia a primeira linha de resposta que mencionei de onde recebo isso.
Vaibhav Jani

4
funciona perfeitamente :) mas eu tenho 2 problemas .. o numStars não funciona mais, e eu não posso ficar um pouco maior, mesmo se eu definir a largura máxima e mínima
Ahmad Dwaik 'Warlock'

1
Obrigado @PiedPiper - isso me salvou muito tempo !! Melhor explicação de sempre!
Edmond Tamas

70

Apenas use:

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

Mude o fator de escala de acordo com sua necessidade.

Para escalar sem criar um preenchimento à esquerda, adicione

android:transformPivotX="0dp"

scaleX scaleY são bons, mas deixam um preenchimento feio, se você pudesse se livrar desse preenchimento, seria a resposta perfeita mais fácil
Ahmad Dwaik 'Warlock'

Além disso, eles exigem Android 3.0 / API 11
averasko

6
I resolver o preenchimento feio (direita) por codeandroid:scaleX="0.75" android:scaleY="0.75" android:layout_marginRight="-25dp"
Hannes ach

1
Embora essa pareça a solução mais fácil, ela não funcionou para mim. Por alguma razão, não houve efeito. É porque eu estou no Android 5.x?
Nautilus

você pode remover alguma cobertura extra especificando altura da barra de classificação ex:android:layout_height="40dp"
Manohar Reddy

43

Não há necessidade de adicionar um ouvinte ao arquivo ?android:attr/ratingBarStyleSmall. Basta adicionar android:isIndicator=falsee ele capturará eventos de clique, por exemplo

<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 é a chave!
deadfish

19

o pequeno implementar pelo sistema operacional

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

2
A barra de classificação não é clicável ao fornecer o código acima.
Sharath

16

aplique isso.

<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
Embora visualmente seja ótimo. eventos de clique que não funcionam nesta solução. você tem alguma correção para isso?
Gökhan Barış Aker

4
se você quiser que os cliques uso de trabalho Android: isIndicator = "false"
D4rWiNS

15

Encontrei uma solução mais fácil do que acho que foi dada pelos mencionados acima e mais fácil do que criar a sua própria. Eu simplesmente criei uma pequena barra de classificação e adicionei um onTouchListener a ela. A partir daí, calculo a largura do clique e determino o número de estrelas a partir disso. Depois de usar isso várias vezes, a única peculiaridade que encontrei é que o desenho de uma pequena barra de classificação nem sempre fica certo em uma tabela, a menos que eu o inclua em um LinearLayout (parece correto no editor, mas não no dispositivo) . Enfim, no meu layout:

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

e dentro da minha atividade:

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

Espero que isto ajude alguém. Definitivamente mais fácil do que desenhar (embora eu tenha achado que isso também funciona, mas eu só queria um uso fácil das estrelas).


Funciona e é fácil ... mas as ratingBarStyleSmallestrelas são realmente pequenas demais para serem úteis. Acho que vou ter que rolar sozinho para conseguir estrelas de tamanho intermediário.
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>

// adicione estas linhas para uma pequena barra de classificação

style = "?android:attr/ratingBarStyleSmall"

Embora esse snippet de código possa ser a solução, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.
27719 Johan Johan

3

embora a resposta de Farry funcione, para dispositivos Samsung o RatingBar tomou a cor azul aleatória em vez da definida por mim. Então use

style="?attr/ratingBarStyleSmall"

em vez de.

Código completo de como usá-lo:

<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

A melhor resposta para a barra de classificação pequena

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

2

Use este código

<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

A melhor resposta que recebi

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

usuário como este

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

Aumente / diminua os tamanhos usando o valor scaleX e scaleY


1

use o código a seguir para uma barra de classificação pequena com o evento 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

Depois de muita pesquisa, encontrei a melhor solução para reduzir o tamanho das barras de classificação personalizadas: obter o tamanho do progresso desenhável em determinados tamanhos, conforme mencionado abaixo:

xxhdpi - 48 * 48 px

xhdpi - 36 * 36 px

hdpi - 24 * 24 px

E com estilo, coloque a minheight e maxheight como 16 dp para toda a resolução.

Informe-me se isso não ajudar a obter as melhores barras de classificação para tamanhos pequenos, pois achei esses tamanhos muito compatíveis e equivalentes ao atributo de estilo ratingbar.small.


0

Está funcionando para mim na barra de classificação xml style = "? Android: attr / ratingBarStyleSmall" adicione this.it funcionará.


-4

Resolvo esse problema da seguinte maneira: style = "? Android: attr / ratingBarStyleSmall"


Isso é o que o OP já tentou e outras respostas já mencionaram.
Pang
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.