Android personalizado RatingBar imagen de los artefactos

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

Introduzca aquí la descripción de la imagen

Aquí está star_on.png

enlazar

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

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

Intente dar la altura a RatingBar en la disposición del xml como esto:

 android:layout_height="30dp" 

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

Echa un vistazo a por qué está sucediendo esto ??

Tenía este problema, parecía el borde inferior de la imagen de encargo de la estrella que estiró. No es necesario que establezca el layout_height de la etiqueta de la barra de clasificación. Puede ajustar la altura min / max en la barra de calificación (igual a 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. 11 píxeles de alta imagen, por lo que el rating_bar_height se estableció en 11dp.

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 sucederá solamente cuando usted está intentando modificar las imágenes de la barra de la graduación para requisitos particulares.

Imagine que tenemos imagen personalizada con tamaño 72×72 píxeles y este es nuestro recurso para XXXHDPI – (es 4x).

  1. La misma imagen necesita tener 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 la siguiente:
    • Para la imagen de la copia del tamaño de XXHDPI necesita ser 54×54 (esto es 3x)
    • Para la imagen de la copia del tamaño de XHDPI necesita ser 36×36 (esto es 2x)
    • Para la imagen de la copia del tamaño de HDPI necesita ser 27×27 (esto es 1.5x)
    • Para la imagen de la copia del tamaño de MDPI necesita ser 18×18 (esto es 1x)
  3. Así que ahora en este escenario si su barra de clasificación tiene una altura mayor entonces 18 dp por ejemplo 30 dp, verá esta mala imagen de artefactos debajo de cada imagen estelar, PORQUE obviamente RatingBar está tratando de llenar el resto de su altura con algo 18 dp pero la altura de la barra es 30dp), así que resto 12dp se llenará con este artefactos.

Es por eso que si se establece la altura de la barra de clasificación para ser de tamaño fijo todo podría estar bien, pero también podría no estar bien. Todo depende de su tamaño de imagen personalizado.

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

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

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

EDIT: La otra forma posible es dejar un poco 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 RatingBar NO mostrará esos píxeles de artefactos, ya que se extraerán de la parte de relleno de la imagen personalizada, que en realidad es sólo píxeles vacíos (transparentes). Personalmente pienso, que esta no es la mejor manera, porque el relleno de la imagen creará un poco de espacio (relleno) entre RatingBar y las vistas del resto dentro del diseño. En ese caso, no tendrás un control absoluto del espacio Views, porque alguna pequeña parte se ha codificado en la imagen personalizada (los 2 px padding).

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 repetida o estirada de píxeles en la barra de calificación estaría vacía. Este enfoque resolvió mi problema.

He resuelto este problema de otra manera. Tomo mi png de la estrella de encargo, y en el redactor de la imagen agrego la línea transparente a la parte inferior de la imagen. El problema con las líneas verticales desapareció en todas las pantallas!

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 página en el que se encuentra.

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

Sólo 2 píxeles de relleno en estrella de la imagen en photoshop. El relleno en xml no trabaja, apenas rellenando la imagen de la estrella en photoshop. Su trabajo muy bueno.

Fijé mi mismo problema reduciendo "layout_height" puesto que la altura de mi imagen era menos que la altura que tenía en layout_height.

El mismo problema. En mi caso Ponga las imágenes de encargo de la estrella adentro / carpeta Drawable y fije "android:layout_height="30dip"

¡¡trabaja bien!!

  • Getmeasuredheight () y getmeasuredwidth () devuelve 0 después de View.measure ()
  • Android Studio no procesa formato WebP
  • En Android, ¿cómo configuro los márgenes en dp mediante programación?
  • Disposición de Android, cambiar el tamaño por porcentaje y mantener la proporción
  • La característica "include" de diseño no admite la propiedad layout_gravity?
  • Cómo acceder al botón dentro de "incluir" el diseño
  • Disposición relativa de Android con ancho de botón utilizando el peso
  • Stackoverflow: ¿Causado por vistas anidadas?
  • SetVisibility no funciona?
  • Disposiciones de Android en subcarpetas
  • Escala de ImageView al ancho del dispositivo
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.