stars - Artefactos de imagen de Android RatingBar

ratingbar android color

Question

Implementé un RatingBar personalizado en una aplicación en mis elementos de 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í hay parte del diseño de 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 se establece la clasificación, obtengo algunos artefactos de imagen extraños; 2 líneas verticales debajo de las estrellas rosadas aparecen en mi vista:

Aquí está star_on.png

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

Soy un principiante de Android, y no puedo entender cuál es el problema.

Answer 1

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

Imagina 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 debe tener una copia dentro de XXHDPI, XHDPI, HDPI, MDPI y LDPI también. Voy a perder el último directorio de recursos por ahora.
2. Dentro de diferentes directorios esta imagen debe ser como sigue:
   • para XXHDPI tamaño imagen de copia debe ser 54x54 (esto es 3x)
   • para XHDPI tamaño imagen de copia debe ser 36x36 (esto es 2x)
   • para una imagen de copia de tamaño HDPI debe ser 27x27 (esto es 1.5x)
   • para la imagen de copia de tamaño MDPI debe ser 18x18 (esto es 1x)
3. Así que ahora, en este escenario, si la barra de Clasificación tiene una altura mayor a 18 dp, por ejemplo, 30 dp, verá esta imagen defectuosa debajo de cada imagen de estrella, ya que, obviamente, RatingBar está tratando de llenar el resto de su altura con algo 18 dp, pero la altura de la barra es de 30dp), por lo que el resto 12dp se rellenará con estos artefactos.

Es por eso que si configura la altura de la barra de clasificación para que tenga un tamaño fijo, todo PODRÍA estar bien pero NO PODRÍA estar bien. Todo esto depende de su tamaño de imagen personalizado.

Creo que hay una solución que funcionará en todos los escenarios posibles y esto es:

1. Cree recursos de imagen para todas las pantallas de dispositivos que su aplicación admita XXXHDPI, XXHDPI o lo que quiera.
2. Asegúrese de que si su (MDPI que es 1x) tiene, por ejemplo, una altura de 20 píxeles, la altura de su RatingBar no será mayor a 20 dp y todo estará bien.

NOTA: En toda esta conversación, hablamos de dp (píxeles de densidad) no en px porque si proporcionamos todos esos recursos de imagen en cada carpeta de resolución única, tendremos la oportunidad de trabajar con dp no con px. Espero que la última frase sea clara y tenga sentido.

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

Answer 2

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

Si no estás seguro de cómo hacerlo, prueba Android Asset Studio . Puedes ver algo como "Relleno alrededor del ícono óptico", no lo mantengas a 0 dip.

Answer 3

Intenta darle altura a RatingBar en un diseño xml como este:

android:layout_height="30dp" 

30dp o lo que te convenga ..

Echa un vistazo por qué está sucediendo esto?

Answer 4

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

¡¡trabaja bien!!

Answer 5

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

Answer 6

Resolví este problema de otra manera. Tomo mis png estrella personalizados 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 7

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

Answer 8

Solucioné mi 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 9

Tenía este problema, parecía que el borde inferior de la imagen de la estrella personalizada se estiraba. No es necesario que establezca la etiqueta layout_height de la barra de clasificació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 del dibujable utilizado. Imagen de 11 píxeles de alto, por lo que el rating_bar_height se estableció en 11dp.