Artéfacts de l'image de la RatingBar personnalisée d'Android

Question

J'ai mis en place un RatingBar dans une application sur mon ListView articles. Style personnalisé barre d'évaluation_rouge.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>

Voici une partie de la disposition 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>

Cela fonctionne, mais lorsque le classement est défini, j'obtiens des artefacts d'image étranges ; 2 lignes verticales sous les étoiles roses apparaissent sur ma vue :

Voici star_on.png

star_off.png semble correct, et si rating == 0, les lignes n'apparaissent pas.

Je suis un débutant Android, et je n'arrive pas à comprendre quel est le problème.

Answer 1

Essayez de donner de la hauteur à RatingBar en format xml comme ceci :

android:layout_height="30dp" 

30dp ou ce qui vous convient..

Vérifiez pourquoi cela se produit-il ?

Answer 2

J'ai eu le même problème, on aurait dit que le bord inférieur de l'image de l'étoile personnalisée était étiré. Il n'est pas nécessaire de définir le paramètre layout_height de la balise de la barre d'évaluation. Vous pouvez définir la hauteur minimale/maximale de la barre d'évaluation (de la même manière que la hauteur de l'image).

Exemple de mes styles 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>

La valeur doit correspondre à celle de la table de dessin utilisée. Une image de 11 pixels de haut, donc le rating_bar_height a été défini à 11dp.

Answer 3

Une autre solution simple serait de laisser une rangée de pixels vides dans l'image de l'étoile en utilisant un éditeur d'images comme Photoshop. Ainsi, la rangée de pixels répétée ou étirée dans la barre d'évaluation serait vide. Cette approche a résolu mon problème.

Answer 4

J'ai résolu ce problème d'une autre manière. J'ai pris mes png's d'étoiles personnalisées, et dans l'éditeur d'images j'ai ajouté une ligne transparente au bas de l'image. Le problème des lignes verticales a disparu sur tous les écrans !

Answer 5

C'est un problème de conception de l'icône. Le problème ici est le rembourrage autour de l'icône. Si vous créez une icône d'étoile personnalisée, veillez à laisser un espace de remplissage entre l'étoile et la limite de la page sur laquelle elle se trouve.

Si vous n'êtes pas sûr de savoir comment procéder, essayez de Android Asset Studio . Vous pouvez voir quelque chose comme "Padding around Optical Icon" ne le gardez pas à 0 dip.