Android arte personalizado de la imagen de la barra de calificación

Question

Implementé una RatingBar personalizada en una aplicación en mis artículos ListView. estilo personalizado ratingbar_red.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_off" /> 
    <item android:id="@android:id/secondaryProgress" android:drawable="@drawable/star_on" /> 
    <item android:id="@android:id/progress" android:drawable="@drawable/star_on" /> 
</layer-list> 

Aquí está parte de la disposición ListItem:

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    android:paddingLeft="15dp" > 

    <RatingBar 
     android:id="@+id/li_company_rating" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="15dp" 
     android:layout_marginBottom="1dp" 
     android:isIndicator="true" 
     android:numStars="5" 
     android:progressDrawable="@drawable/ratingbar_red" 
     android:stepSize="1" /> 

    <Button 
     android:id="@+id/li_company_callbtn" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="0dp" 
     android:layout_marginLeft="40dp" 
     android:contentDescription="@string/ContentDescription" 
     android:drawableLeft="@drawable/phone_icon" 
     android:drawablePadding="5dp" 
     android:onClick="callbtn_Click" 
     android:text="@string/CallButton" 
     android:focusable="false" 
     android:focusableInTouchMode="false" > 
    </Button> 

</LinearLayout> 

Funciona, pero cuando la calificación se establece, consigo algunos artefactos de la imagen extrañas; 2 líneas verticales por debajo de las estrellas de color rosa de aparecer en mi punto de vista:

Aquí se star_on.png

star_off.png se ve bien, y si la calificación == 0, las líneas no aparecen.

Soy androide principiante, y no puedo entender cuál es el problema.

Answer 1

tratar de darle a la altura de RatingBar en diseño xml de la siguiente manera:

android:layout_height="30dp" 

30DP o lo que más le convenga ..

Check out why is this happening ??

Answer 2

tuve este problema a, parecía que el borde inferior de imagen de estrella personalizada que se estira. No es necesario configurar el layout_height de la etiqueta de la barra de calificación. Puede establecer la altura mínima/máxima en la barra de clasificación (al igual que la altura de la imagen).

Ejemplo de mis estilos xml.

<style name="GoldRatingBar" parent="@android:style/Widget.RatingBar"> 
    <item name="android:minHeight">@dimen/rating_bar_height</item> 
    <item name="android:maxHeight">@dimen/rating_bar_height</item> 
</style> 

Dimens.xml

<dimen name="rating_bar_height">11dp</dimen> 

El valor debe coincidir con el de la estirable utilizado. Imagen de 11 píxeles de alto, por lo que el rating_bar_height se configuró en 11dp.

Answer 3

Otra solución simple sería dejar una fila de píxeles vacíos en la imagen de la estrella usando un editor de imágenes como photoshop. Entonces, la fila de píxeles repetidos o estirados en la barra de calificación estaría vacía. Este enfoque resolvió mi problema.

Answer 4

He resuelto este problema de otra manera. Tomo el png de estrella personalizado, y en el editor de imágenes agrego una línea transparente a la parte inferior de la imagen. ¡El problema con las líneas verticales desapareció en todas las pantallas!

Answer 5

Es un problema de diseño de iconos. El problema aquí es el relleno alrededor del ícono. Si está creando un icono de estrella personalizado, asegúrese de dejar un espacio de relleno entre la estrella y el límite de página en el que se encuentra.

Si no está seguro de cómo hacerlo, intente Android Asset Studio. Puede ver algo como "Relleno alrededor del icono óptico", no lo mantenga a 0 inmersión.

Answer 6

He solucionado el mismo problema al reducir "layout_height" ya que la altura de mi imagen era menor que la altura que tenía en layout_height.

Answer 7

Mismo problema. En mi caso Ponga imágenes de estrellas personalizadas en la carpeta/Drawable y configure "android:layout_height="30dip"

work fine !!

Answer 8

Solo 2 píxeles de relleno en una estrella de imagen en photoshop. relleno en xml no funciona, solo relleno de imagen de estrella en photoshop. es un trabajo muy bueno.

Answer 9

Cada cuerpo sugiere algo pero ningún cuerpo está tratando de explicar por qué sucede esto. Voy a tratar de explicarlo ahora. Por supuesto, esto sucederá solo cuando intente personalizar las imágenes de la barra de clasificación.

Imagine que tenemos una imagen personalizada con un tamaño de 72x72 píxeles y este es nuestro recurso para XXXHDPI - (es 4x).

1. La misma imagen necesita tener una copia dentro de XXHDPI, XHDPI, HDPI, MDPI y LDPI también. Extrañaré el último directorio de recursos por ahora.
2. Dentro diferentes directorios esta imagen tiene por qué ser de la siguiente manera:
   • imagen de copia de tamaño XXHDPI para la necesidad de ser 54x54 (esto es 3x)
   • imagen de copia de tamaño xhdpi para la necesidad de ser 36x36 (esto es 2x)
   • imagen de copia de tamaño IPAP para necesitar ser 27x27 (esto es 1,5 veces)
   • imagen de copia tamaño de MDPI necesidad de estar 18x18 (esto es 1X)
3. Así que ahora, en este escenario, si la barra de Clasificación tiene altura más grande que 18 dp por ejemplo 30 dp, verá estos artefactos de mala imagen debajo de cada imagen de estrella, PORQUE obviamente, RatingBar está tratando de llenar el resto de su altura con algo (su Imagen es 18 dp pero la altura de la barra es 30dp), entonces el resto 12dp se llenará con estos artefactos.

Es por eso que si configura la altura de la barra de clasificación para que sea de tamaño fijo todo PODRÍA estar bien pero también PODRÍA NO ESTAR BIEN. Todo esto depende de tu tamaño de imagen personalizado.

creo que tiene una solución que funcione en todos los escenarios posibles y esto es:

1. Crear activo de imagen para todas las pantallas de los dispositivos que su aplicación va a apoyar XXXHDPI, XXHDPI o cualquier cosa que quiera.
2. Asegúrese de que si su imagen (MDPI que es 1x) tiene, por ejemplo, 20 píxeles de altura, su altura de la barra de clasificación no será mayor que 20 dp y todo estará bien.

NOTA: En esta conversación hablamos de dp (píxeles de densidad) no en px porque si proporcionamos todos esos recursos de imágenes en cada carpeta de res tendremos la oportunidad de trabajar con dp no con px. Espero que la última oración sea clara y tenga sentido.

EDITAR: La otra forma posible es dejar algo de relleno pequeño (espacio vacío), tal vez 1px o 2px en la parte inferior de la imagen personalizada.En ese caso, la vista de la barra de calificación NO mostrará esos píxeles de artefactos, ya que se tomarán de la parte de relleno de su imagen personalizada, que en realidad son solo píxeles vacíos (transparentes). Personalmente, creo que esta no es la mejor manera, porque el relleno de la imagen creará un espacio (relleno) entre la barra de calificación y el resto de vistas dentro del diseño. En ese caso, no tendrá un control total del espacio de Vistas, ya que se ha codificado una parte pequeña dentro de la imagen personalizada (esos 2 píxeles de relleno).