Android自定义RatingBar图像工件

Question

我在我的ListView项目的应用程序中实现了自定义RatingBar。 自定义样式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> 

这里的列表项布局的一部分：

<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> 

它的工作原理，但是当等级设置，我得到一些奇怪的图像失真; 2条垂直线的粉色星星下面出现在我的观点：

下面是star_on.png

star_off.png看起来不错，如果等级== 0，线条不会出现。

我是android初学者，无法理解问题是什么。

Answer 1

尝试在XML布局像这样给高度RatingBar：

android:layout_height="30dp" 

30DP或任何适合你..

Check out why is this happening ??

Answer 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像素高的图像，所以rating_bar_height被设置为11dp。

Answer 3

另一个简单的解决方案是使用像Photoshop这样的图像编辑器在星形图像中留下一排空像素。然后，评分栏中重复或拉伸的像素行将为空。这个问题解决了我的问题。

Answer 4

我以另一种方式解决了这个问题。我把我的自定义星形PNG，并在图像编辑器添加透明线到图像的底部。垂直线的问题在所有屏幕上都消失了！

Answer 5

它是一个图标设计问题。这里的问题是图标周围的填充。如果您要创建自定义星形图标，请确保在星形和它所在的页面边界之间留有一些填充空间。

如果您不确定如何操作，请尝试Android Asset Studio。你可以看到类似于“光学图标周围的填充”的东西，不要让它保持为0。

Answer 6

我通过减少“layout_height”解决了同样的问题，因为我的图像的高度小于layout_height中的高度。

Answer 7

同样的问题。在我的情况下 把自定义星形图像放在/可绘制文件夹中 并设置"android:layout_height="30dip"

工作正常！

Answer 8

只有2个像素填充图像明星在Photoshop中。 在xml中填充不起作用，只是在photoshop中填充星形图像。 它的工作非常好。

Answer 9

每个人都在暗示一些东西，但没有人试图解释为什么会发生这种情况。我现在要尝试解释它。当然，这只会在您试图自定义评级栏图像时才会发生。

想象一下，我们有大小为72x72像素的自定义图像，这是我们的XXXHDPI资源 - （它是4x）。

1. 同样的图像需要在XXHDPI，XHDPI，HDPI，MDPI和LDPI内部进行复制。我现在会错过最后一个资源目录。
2. 里面不同的目录此图片都需要具有如下：
   • 为XXHDPI尺寸复印图像必须是54x54（这是3倍）
   • 为XHDPI尺寸复印图像必须是36X36（这是2个）
   • 对华电国际的尺寸复印图像必须是27x27（这是1.5倍）
   • 为MDPI尺寸复印图像必须是18×18（此为1x）
3. 所以现在在这种情况下，如果你的等级吧有高度大于18 dp例如30 dp，您会在每个星图下方看到这个不好的图像文物，因为很明显RatingBar正在试图用其他东西来填充它的高度（您的图像是18 dp，但是酒吧的高度是30dp），所以剩下的12dp将会填满这个文物。

这就是为什么如果您将评级栏高度设置为固定大小，一切都可以，但也可以不行。所有这些取决于您的自定义图像大小。

我认为有一个解决方案，将在所有可能的情况下工作，这就是：

1. 为您的应用程序将支持XXXHDPI，XXHDPI或者你什么都想要的所有设备屏幕上创建图像资源。
2. 确保如果您的（MDPI是1x）图像的高度为20像素，则您的RatingBar高度不会超过20 dp，并且一切都会正常。

注：在我们谈论这个DP整个会话（像素密度）不是在PX，因为如果我们在每一个res文件夹提供所有图像资源，我们将有机会与DP不起作用与PX。我希望最后一句话是清楚明白的。

编辑：另一种可能的方法是在您的自定义图像的底部留下一些小的填充（空白空间），可能是1px或2px。在这种情况下，RatingBar视图将不会显示这些假象像素，因为它们将从自定义图像的填充部分中取出，实际上它只是空的（透明）像素。我个人认为，这不是最好的方法，因为图像填充将在RatingBar和布局中的其余Views之间创建一些空格（填充）。在这种情况下，你不会完全控制视图空间，因为一些小部分已经被硬编码到自定义图像中（那些2 px填充）。