logo标签列表

如何缩小RatingBar？

androidandroid-widgetandroid-styles
140

我在布局中添加了一个评分栏（RatingBar）：

<RatingBar 
    android:id="@+id/ratingbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:numStars="5"
    android:stepSize="1.0"
    />

但是默认的评分条样式太大了。
我尝试通过添加android样式来更改它：style="?android:attr/ratingBarStyleSmall"

但结果太小了，使用此属性无法设置评分。

我该怎么做？

19个回答
196

如何使用这里提供的代码？

步骤1：在res/drawable中添加自己的评分星级...

一个实心星

一个空心星

步骤2：在res/drawable中添加ratingstars.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" />
</layer-list>

第3步，在res/values中，您需要像下面这样的styles.xml...

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="foodRatingBar" parent="@android:style/Widget.RatingBar">
        <item name="android:progressDrawable">@drawable/ratingstars</item>
        <item name="android:minHeight">22dip</item>
        <item name="android:maxHeight">22dip</item>
    </style>
</resources>

步骤4 在您的布局中...

<RatingBar 
      android:id="@+id/rtbProductRating"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:numStars="5"
      android:rating="3.5"
      android:isIndicator="false"
      style="@style/foodRatingBar"    
/>
7
这个应该不是应该这样写吗：<item android:id="@+android:id/secondaryProgress" android:drawable="@drawable/star_empty" />，改成 "@drawable/star_half" /> 或者你叫它什么就改成什么？ - StackOverflowed
8
非常感谢。只是有一个小建议：您不需要半星的图像，它会根据进度自动生成。 - Boris Strandjev
1
@Vlad 请阅读我回答中提到的第一行，那里是我获取这个信息的来源。 - Vaibhav Jani
4
完美运作 :) 但我遇到了两个问题... numStars不再起作用，即使我设置了最大和最小宽度，也不能让它变得更大。 - Ahmad Dwaik 'Warlock'
1
谢谢@PiedPiper - 这节省了我很多时间！最好的解释！ - Edmond Tamas
显示剩余10条评论
112

默认的RatingBar小部件有点乏味。

源代码中除了你已经熟悉的“?android:attr/ratingBarStyleSmall”之外，还提到了“?android:attr/ratingBarStyleIndicator”风格。ratingBarStyleIndicator略小一些，但仍然相当丑陋，注释指出这些样式“不支持交互”。

你最好自己撰写实现。在http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/上有一个看起来不错的指南，说明如何实现它。（我自己还没有做过，但大约在一天左右会尝试。）

p.s. 抱歉，本来想为您发布链接以供参考，但我是新用户，不能发布超过1个URL。如果您能找到源目录树，它位于frameworks/base/core/java/android/widget/RatingBar.java

最好使用?android:attr/ratingBarStyleSmall并设置全局评分主题，而不是使用确切的主题名称，非常感谢;) - Tsung Wu
8
如果我们将指示器属性 android:isIndicator="false" 设置为 false，那么我们就可以与它进行交互。 - Mayur R. Amipara
docs 表明 ratingBarStyleSmall 是两者中较小的那个。我认为你的评论是颠倒了。 - AdamMc331
5
链接已损坏。 - Denny
@Denny 内容可从Google缓存获取。我不会更新帖子的内容，因为我已经多年没有查看Android评分栏了，并且不确定该链接中的内容是否仍然有效。 - Farray
请使用style="?attr/ratingBarStyleSmall"代替。Farry的答案可以工作，但在三星手机上会出现一些随机颜色；* - murt
76

只需使用：

android:scaleX="0.5"
android:scaleY="0.5"

根据您的需求更改比例因子。

为了按比例缩放而不创建左侧填充，请添加：

android:transformPivotX="0dp"
scaleX scaleY很好，但留下了丑陋的填充。如果您能摆脱这个填充，那将是最简单完美的答案。 - Ahmad Dwaik 'Warlock'
同时，它们需要Android 3.0 / API 11。 - averasko
7
我通过使用以下代码解决了丑陋的（正确的）填充问题：codeandroid:scaleX="0.75" android:scaleY="0.75" android:layout_marginRight="-25dp" - hannes ach
1
虽然看起来这似乎是最简单的解决方案，但对我来说并没有用。因为某些原因它没有效果。难道是因为我使用的是Android 5.x系统？ - Nautilus
您可以通过指定评分栏的高度来去掉一些额外的填充，例如：android:layout_height="40dp"。 - Manohar
46
无需向?android:attr/ratingBarStyleSmall添加监听器，只需添加android:isIndicator=false即可捕获点击事件，例如：
<RatingBar
  android:id="@+id/myRatingBar"
  style="?android:attr/ratingBarStyleSmall"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:numStars="5"
  android:isIndicator="false" />
4
指标是关键！ - deadfish
20

操作系统实现的小型实体。

<RatingBar
    android:id="@+id/ratingBar"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    />
2
在使用上述代码时，评分条无法点击。 - Sharath
16

应用这个。

<RatingBar android:id="@+id/indicator_ratingbar"
    style="?android:attr/ratingBarStyleIndicator"
    android:layout_marginLeft="5dip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical" />
1
虽然视觉效果很好，但是在这个解决方案中点击事件无法工作。你有什么解决方法吗？ - Gökhan Barış Aker
4
如果您想让点击起作用，请使用 android:isIndicator="false"。 - D4rWiNS
15

我发现了一个比上面给出的更简单的解决方案，也比自己写的更容易。我只需要创建一个小的评分条，然后添加一个onTouchListener到它上面。从那里，我计算点击的宽度并确定星星的数量。在多次使用后，我唯一发现的怪异现象是，除非我将其放在LinearLayout中（编辑器中看起来正确，但在设备中不正确），否则绘制一个小的评分条不总是得到正确的结果。无论如何，在我的布局中：

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >
                <RatingBar
                    android:id="@+id/myRatingBar"
                    style="?android:attr/ratingBarStyleSmall"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:numStars="5" />
            </LinearLayout>

并且在我的活动中：

    final RatingBar minimumRating = (RatingBar)findViewById(R.id.myRatingBar);
    minimumRating.setOnTouchListener(new OnTouchListener()
    { 
        public boolean onTouch(View view, MotionEvent event)
        { 
            float touchPositionX = event.getX();
            float width = minimumRating.getWidth();
            float starsf = (touchPositionX / width) * 5.0f;
            int stars = (int)starsf + 1;
            minimumRating.setRating(stars);
            return true; 
        } 
    });

我希望这能帮助到其他人。明显比自己画要容易（虽然我发现那也行，但我只是想用星星方便一点）。

它能正常工作，而且容易操作......但是"ratingBarStyleSmall"的星星实在太小了，不够实用。我想我得自己创建一个以得到中等大小的星形。 - Beer Me
7
 <RatingBar
                    android:rating="3.5"
                    android:stepSize="0.5"
                    android:numStars="5"
                    style = "?android:attr/ratingBarStyleSmall"
                    android:theme="@style/RatingBar"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>

// if you want to style 

 <style name="RatingBar" parent="Theme.AppCompat">
        <item name="colorControlNormal">@color/colorPrimary</item>
        <item name="colorControlActivated">@color/colorAccent</item>
    </style>

// 为小型评分栏添加以下行

style = "?android:attr/ratingBarStyleSmall"
虽然这段代码片段可能是解决方案，但包括解释真的有助于提高您的帖子质量。请记住，您正在回答未来读者的问题，而这些人可能不知道您的代码建议原因。 - Johan
5
<RatingBar
    android:id="@+id/rating_bar"
    style="@style/Widget.AppCompat.RatingBar.Small"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
3
我得到的最好答案
  <style name="MyRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:minHeight">15dp</item>
    <item name="android:maxHeight">15dp</item>
    <item name="colorControlNormal">@color/white</item>
    <item name="colorControlActivated">@color/home_add</item>
</style>

用户喜欢这个

<RatingBar
                style="?android:attr/ratingBarStyleIndicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:isIndicator="false"
                android:max="5"
                android:rating="3"
                android:scaleX=".8"
                android:scaleY=".8"
                android:theme="@style/MyRatingBar" />

通过使用scaleX和scaleY值来增加/减小尺寸

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接