在android中添加自定义图像时，评分栏变大并被切断

Question

我按照堆栈溢出的答案向 android 项目添加自定义评分栏，这里是：https://stackoverflow.com/a/32828726/5909396

以防万一我发布我的代码。

首先我在 drawable 文件夹中创建了 ratingBar.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/ratingbar_empty" />
    <item android:id="@android:id/secondaryProgress"
          android:drawable="@drawable/ratingbar_empty" />
    <item android:id="@android:id/progress"
          android:drawable="@drawable/ratingbar_filled" />

然后我也在 drawable 文件夹中创建了 ratingbar_empty.xml 和 ratingbar_filled.xml：

<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true"
    android:state_window_focused="true"
    android:drawable="@drawable/ic_emptyStar" />

<item android:state_focused="true"
    android:state_window_focused="true"
    android:drawable="@drawable/ic_emptyStar" />

<item android:state_selected="true"
    android:state_window_focused="true"
    android:drawable="@drawable/ic_emptyStar" />

<item android:drawable="@drawable/ic_emptyStar" />

<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true"
    android:state_window_focused="true"
    android:drawable="@drawable/ic_fullStar" />

<item android:state_focused="true"
    android:state_window_focused="true"
    android:drawable="@drawable/ic_fullStar" />

<item android:state_selected="true"
    android:state_window_focused="true"
    android:drawable="@drawable/ic_fullStar" />

<item android:drawable="@drawable/ic_fullStar" />

然后我在styles.xml 中创建了自定义样式

<style name="CustomRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:progressDrawable">@drawable/ratingbar</item>
    <item name="android:minHeight">50dp</item>
    <item name="android:maxHeight">50dp</item>
</style>

最后我在布局中添加了 ratingBar。我构造它的方式是评级栏位于相对布局内，并且在相对布局内还有一个文本视图，位于评级栏顶部（文本视图显示是否没有评级）；

 <RelativeLayout
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="0.4"
            android:orientation="vertical"
            android:layout_gravity="center">
            <RatingBar
                android:id="@+id/ratingRestaurant"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="@style/CustomRatingBar"
                android:numStars="5"
                android:stepSize="0.1"
                android:isIndicator="true"
                android:max="5"
                android:progress="3"
                android:layout_centerVertical="true"
                android:progressTint="#ffe4b331" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="No rating available"
                android:textColor="@android:color/white"
                android:textSize="11dp"
                android:id="@+id/textViewNoRatingAvailable" />
 </RelativeLayout>

当我在模拟器上运行应用程序时，星星真的很大并且像下面这样被截断：

应该有五颗星。我该如何解决这个问题？

Answer 1

我制作了一个带有可自定义评分栏的库。您可以设置完整和空图标及其大小。希望对您有所帮助。

这是一个用法示例，很简单：

<com.kabuki5.logicalratingbar.CustomRatingBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:clickable="true"
        app:iconSize="58dp"
        app:imageEmpty="@drawable/ic_heart_empty"
        app:imageFull="@drawable/ic_heart_full"
        app:initRating="5"
        app:maxItems="5" />

您还可以设置一个监听器来获取更改值回调。

Logical Rating Bar

Answer 2

设置

android:layout_width="wrap_content"
android:layout_height="0dp"