logo标签列表

如何设置Android评分条的描边颜色？（不是星星的颜色而是边框）

javaandroidxmldrawableratingbar
32

我是一名Android初学者，想要制作自定义评分条。

免责声明：这不是重复的问题。因为我读过的所有帖子都问如何改变星星的颜色和删除描边。这不是我想要的。我想要保留描边并能够改变边框的颜色。

当为空时，它具有透明和黄色的描边，半满和填充时具有黄色的背景和描边。

我不想使用png。我已经有自己的图片了，但它们太小了。如果我可以仅使用XML属性和可绘制对象来制作星星，我就不想要求设计人员制作新的图片。

<RatingBar
          android:id="@+id/thread_rating"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:isIndicator="true"
          android:numStars="5"
          android:progressBackgroundTint="@color/gray"
          android:progressTint="@color/gold"
          android:rating="2.5"
          android:secondaryProgressTint="@color/gray"
          android:stepSize="0.5"
          style="?android:attr/ratingBarStyleSmall"
          />

我与另一位工程师一起开发这个项目。他也在一个Java文件中编写了代码。

private void setRatingBarStart(RatingBar rating_bar) {
LayerDrawable stars = (LayerDrawable) rating_bar.getProgressDrawable();
stars.getDrawable(2)
    .setColorFilter(getResources().getColor(R.color.gold),
        PorterDuff.Mode.SRC_ATOP); // for filled stars
stars.getDrawable(1)
    .setColorFilter(getResources().getColor(R.color.light_gray),
        PorterDuff.Mode.SRC_ATOP); // for half filled stars
stars.getDrawable(0)
    .setColorFilter(getResources().getColor(R.color.light_gray),
        PorterDuff.Mode.SRC_ATOP); // for empty stars

现在它有一个灰色的背景，黄色填充，没有边框。

输入图像描述

我想让它具有透明的背景、黄色的边框和填充。

看起来像这样 输入图像描述

我已经知道如何将背景设置为透明并使其变成黄色。我只是不知道如何设置描边颜色。非常感谢！！！

1
可能是重复的问题：如何更改 Android RatingBar 的星星颜色？ - sathish kumar
看看这个帖子.. https://dev59.com/MG025IYBdhLWcg3wyJGV 只需设置三个不同的png文件来表示星星（空心、实心和半个实心），并加上描边和内部颜色，工作就完成了。 - Alessio Trecani
@AlessioTrecani 您好，感谢您的评论。我不想要 PNG 文件。我已经有它们了，但它们太小了。如果可以使用 XML 属性设置星级评分，我会尽量避免向设计师请求制作新的图片。 - husky love
@huskylove，请检查我的答案。 - KDeogharkar
我不理解PNG文件的问题，您可以设置所需的大小，如果您想要自定义评分栏，我认为这是唯一的解决方案。 - Yoann Hercouet
5个回答
18

将所有可绘制的颜色设置为黄色（在您的情况下，对于所有内容，请使用getResources().getColor(R.color.gold)）用于描边和背景。（对于背景、辅助进度和进度）

RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
        LayerDrawable stars = (LayerDrawable) ratingBar.getProgressDrawable();
        stars.getDrawable(2).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(0).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(1).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);

移除RatingBar中的progressBackgroundTint、progressTint和secondaryProgressTint属性，没有必要。

<RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:rating="2.5"/>

结果为::

image1

希望这会有所帮助（粉色只是背景颜色）

将可绘制物 1 和 0 设置为红色后：

RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
        LayerDrawable stars = (LayerDrawable) ratingBar.getProgressDrawable();
        stars.getDrawable(2).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(0).setColorFilter(Color.Red, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(1).setColorFilter(Color.Red, PorterDuff.Mode.SRC_ATOP);

image2

1
问题是：我如何仅更改描边颜色呢？例如，以您的示例中的星星为例，给它们添加一个红色的边框。 - vitorsdcs
你的意思是想改变边框的颜色，例如将黄色描边改为红色？这是你想要的吗？@vitorsdcs - KDeogharkar
我不明白。@vitorsdcs，为什么你的结果和我的不同？请看我的更新答案。我还将0和1的可绘制对象设置为红色。 - KDeogharkar
16
我是唯一一个收到填充色而不是描边的人吗？ - Leo DroidCoder
@LeoDroidcoder 我也得到了填充颜色而不是笔画，可能在不同的操作系统上会有所不同。我正在LG nexus 5上进行测试（操作系统：6.0.1，API：23），请更新您最近的经验。 - Farhan
显示剩余4条评论
9
不要使用任何库或样式。按照以下步骤操作即可获得结果。
在drawable文件夹中创建一个名为custom_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/star_empty" />
 <item android:id="@android:id/secondaryProgress"
android:drawable="@drawable/star_empty" />
 <item android:id="@android:id/progress"
android:drawable="@drawable/star_full" />
</layer-list>

然后在您的RatingBar中使用以下内容：

  <RatingBar
    android:id="@+id/ratingBarChef"
    style="?android:attr/ratingBarStyleSmall"
    android:numStars="5"
    android:stepSize="0.2"
    android:rating="3.0"
    android:progressDrawable="@drawable/custom_ratingbar"
    android:isIndicator="false"
    />
1
一切正常运作 - 但我只能看到一个星号，我的朋友。 - ehsan wwe
2
我知道我的问题了 - 我使用了向量，应该将其替换为PNG星形。 - ehsan wwe
5
我觉得我找到了你需要的东西。你需要创建一个自定义的 RatingBar，就像这个答案中所解释的那样，但是你需要使用矢量图标而不是标准图标。
你可以在这个网站上下载3个矢量图标（满星、半星和空星）： https://materialdesignicons.com/ 或者在 Android Studio 的 res 文件夹上右键单击：--> 新建 --> 矢量资产。
如果找不到它们，以下是这3个矢量图标的 XML 代码：
满星：
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#000" android:pathData="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />

半星：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#000" android:pathData="M12,15.89V6.59L13.71,10.63L18.09,11L14.77,13.88L15.76,18.16M22,9.74L14.81,9.13L12,2.5L9.19,9.13L2,9.74L7.45,14.47L5.82,21.5L12,17.77L18.18,21.5L16.54,14.47L22,9.74Z" />

空星号：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#000" android:pathData="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" />

要改变它们的大小，只需更新属性height和width。

要更改它们的颜色，只需更新属性fillColor并设置您的黄色。

1
SVG在评分栏中无法工作。有任何想法为什么？ - Johan
是的，由于某种原因，Vector XML 对于 ratingBar 不起作用，它只会显示一个拉伸的星星。如果在构建时使用 https://github.com/trello/victor 将 SVG 转换为 PNG，则可以使用 SVG。 - arberg
4
另一种方法是创建自定义评分栏，如果您没有任何图像，请按照以下步骤操作。所有文件都在drawable文件夹中创建。 < p >< strong > emptystar.xml < / strong >< / p > 
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#F1C332" android:pathData="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" />
</vector>

full_star.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#F1C332" android:pathData="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
</vector>

half_star.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#000" android:pathData="M12,15.89V6.59L13.71,10.63L18.09,11L14.77,13.88L15.76,18.16M22,9.74L14.81,9.13L12,2.5L9.19,9.13L2,9.74L7.45,14.47L5.82,21.5L12,17.77L18.18,21.5L16.54,14.47L22,9.74Z" >
</path>
</vector>

food_ratingbar_full_empty.xml

<?xml version="1.0" encoding="utf-8"?>


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

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

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

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

food_ratingbar_full_filled.xml

<?xml version="1.0" encoding="utf-8"?>


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

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

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

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

food_rating_bar.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background"
    android:drawable="@drawable/food_ratingbar_full_empty" />

<item android:id="@android:id/secondaryProgress"
    android:drawable="@drawable/food_ratingbar_full_empty" />
<item android:id="@android:id/progress"
    android:drawable="@drawable/food_ratingbar_full_filled" />

style.xml

   <style name="foodRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:progressDrawable">@drawable/food_rating_bar_full</item>
    <item name="android:minHeight">23dip</item>
    <item name="android:maxHeight">25dip</item>
   </style>

在你的布局中

<RatingBar
android:id="@+id/ratingBarDish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp10"
android:layout_marginStart="@dimen/dp10"
style="@style/foodRatingBar"
android:isIndicator="true" />
0

嗨，尝试使用这个并将边框图像作为星形https://github.com/ome450901/SimpleRatingBar，其中icon_starempty和icon_starfilled是您的相应图像

<com.willy.ratingbar.ScaleRatingBar xmlns:app="http://schemas.android.com/apk/res-auto"
                    android:id="@+id/deals_ratingbar"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="@dimen/_10dp"
                    android:layout_toRightOf="@+id/txt_newprice"
                    android:layout_weight=".4"
                    android:gravity="center|right"
                    android:outlineProvider="none"
                    app:srb_drawableEmpty="@drawable/icon_starempty"
                    app:srb_drawableFilled="@drawable/icon_starfilled"
                    app:srb_isIndicator="true"
                    app:srb_numStars="5"
                    app:srb_starHeight="@dimen/_10dp"
                    app:srb_starPadding="@dimen/_3dp"
                    app:srb_starWidth="@dimen/_10dp" />
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接