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填充）。