Пользовательские графические артефакты

Я реализовал пользовательский RatingBar в приложении на моих элементах ListView. Пользовательский стиль 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>

Здесь часть раскладки 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>

Это работает, но когда рейтинг установлен, я получаю некоторые странные артефакты изображения; На моем видении появляются две вертикальные линии ниже розовых звезд:

enter image description here

Здесь star_on.png

link

star_off.png выглядит нормально, а если рейтинг == 0, строки не отображаются.

Я начинаю андроид и не понимаю, в чем проблема.

Ответы

Ответ 2

У меня была эта проблема, похоже, что нижний край пользовательского изображения звезды растягивается. Вам не нужно устанавливать layout_height метки метки оценки. Вы можете установить минимальную/максимальную высоту в баре оценки (так же, как высота изображения).

Пример из моих стилей 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>

Значение должно соответствовать значению используемого метода. 11 пикселей, поэтому рейтинг_bar_height был установлен в 11dp.

Ответ 3

Еще одно простое решение - оставить строку пустых пикселей в изображении звезды с помощью редактора изображений, такого как Photoshop. Тогда повторяющийся или растянутый ряд пикселей в баре оценки будет пустым. Этот вопрос решил мою проблему.

Ответ 4

Я решил эту проблему по-другому. Я беру свои собственные звездные png, а в редакторе изображений добавляет прозрачную строку в нижнюю часть изображения. Проблема с вертикальными линиями исчезла на всех экранах!

Ответ 5

Это проблема с дизайном Icon. Проблема здесь в дополнении вокруг значка. Если вы создаете пользовательский значок звездочки, убедитесь, что вы оставили пробел между звездой и границей страницы, на которой она находится.

Если вы не знаете, как это сделать, попробуйте Android Asset Studio. Вы можете увидеть что-то наподобие "Прокладка вокруг оптической иконки", чтобы она не опускалась до нуля.

Ответ 6

Каждое тело предлагает что-то, но ни одно тело не пытается объяснить, почему это происходит. Я попытаюсь объяснить это сейчас. Конечно, это произойдет только тогда, когда вы пытаетесь настроить изображения баров рейтинга.

Представьте, что у нас есть пользовательское изображение размером 72x72 пикселя, и это наш ресурс для XXXHDPI - (4x).

  • Такое же изображение должно иметь копию внутри XXHDPI, XHDPI, HDPI, MDPI и LDPI. На данный момент я пропущу последний каталог ресурсов.
  • В разных каталогах это изображение должно быть следующим:
    • для изображения копии размера XXHDPI должно быть 54x54 (это 3x)
    • для изображения с копией XHDPI должно быть 36x36 (это 2x)
    • для изображения формата HDPI должно быть 27x27 (это 1.5x)
    • для размера копии MDPI должно быть 18x18 (это 1x)
  • Итак, теперь в этом случае, если ваша панель рейтинга имеет высоту больше, чем 18 dp, например 30 дп, вы увидите это плохое изображение артефактов ниже каждого изображения звезды, ПОТОМУ ЧТО, очевидно, RatingBar пытается заполнить остальная часть высоты с чем-то (ваше изображение 18 dp, но высота бара 30dp), так что 12dp отдыха будет заполнен этими артефактами.

Вот почему, если вы устанавливаете высоту баров рейтинга, чтобы быть фиксированным размером, все МОЖЕТ быть ОК, но также НЕ МОЖЕТ БЫТЬ ОК. Все это зависит от размера вашего пользовательского изображения.

Я думаю, что есть одно решение, которое будет работать во всех возможных сценариях, и это:

  • Создайте объект изображения для всех экранов устройств, которые ваше приложение будет поддерживать XXXHDPI, XXHDPI или что угодно.
  • Убедитесь, что если ваше изображение (MDPI, которое является 1x) имеет, например, высоту 20 пикселей, ваша высота RatingBar не будет больше 20 дп, и все будет в порядке.

ПРИМЕЧАНИЕ. Во всем этом разговоре мы говорим о dp (пикселей плотности) не в px, потому что, если мы предоставим все эти ресурсы изображения в каждой отдельной папке res, у нас будет возможность работать с dp не с px. Надеюсь, последнее предложение ясно и понятно.

EDIT: Другой возможный способ - оставить небольшое заполнение (пустое пространство), возможно, 1px или 2px внизу вашего пользовательского изображения. В этом случае в представлении RatingBar НЕ будут отображаться эти пиксели артефактов, потому что они будут взяты из части заполнения вашего пользовательского изображения, что на самом деле является просто пустыми (прозрачными) пикселями. Я лично думаю, что это не лучший способ, потому что дополнение к изображениям создаст некоторое пространство (дополнение) между RatingBar и остальными видами внутри макета. В этом случае у вас не будет абсолютно полного контроля над пространством Views, потому что небольшая часть была жестко закодирована внутри пользовательского изображения (эти 2 px padding).

Ответ 7

Только 2 пиксельных отступов в звезде изображения в Photoshop. padding in xml не работает, просто добавьте звездное изображение в Photoshop. он работает очень хорошо.

Ответ 8

Я исправил одну и ту же проблему, уменьшив "layout_height", так как высота моего изображения была меньше высоты, чем у меня в layout_height.

Ответ 9

Такая же проблема. В моем случае Поместить пользовательские звездообразные изображения в папку /Drawable и установите "android:layout_height="30dip"

отлично работает!!

Ответ 10

Я наблюдал за проблемой из-за векторной прорисовки. Как только я добавил соответствующие изображения в формате png, он начал работать. Добавил это как ответ, так как это может быть полезно для тех, кто сталкивается с той же проблемой.