如何制作较小的RatingBar？

134

我在布局中添加了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"

但是结果太小，无法使用此属性设置费率。

我该怎么办？

android  android-widget  android-styles 
— 克莱姆
source

Answers:

106

默认的RatingBar小部件是sorta'lame。

?android:attr/ratingBarStyleIndicator除了?android:attr/ratingBarStyleSmall您已经熟悉的“ ” 之外，该资源还引用了样式“ ” 。 ratingBarStyleIndicator略小一些，但仍然很丑陋，评论指出这些样式“不支持交互”。

您可能最好自己滚动一下。http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/上有一个外观不错的指南，介绍了如何执行此操作。（我自己还没有做过，但是会在一天内左右尝试。）

祝好运！

ps抱歉，本来要发布指向源的链接供您浏览，但我是新用户，并且不能发布多个URL。如果您通过源代码树进行挖掘，它位于frameworks / base / core / java / android / widget / RatingBar.java

— 数组
source
最好使用？android：attr / ratingBarStyleSmall并设置全局评级主题，但不要使用确切的主题名称，非常感谢；）
— Tsung Goh 2014年
7
如果我们设定的指标属性的Android版本：isIndicator =“假”不是，我们将与它进行交互..
— MAYUR R. Amipara
该文档暗示ratingBarStyleSmall是两者中的较小者。我认为您的评论是落后的。
— AdamMc331
5
链接断开。
— 丹尼
@Denny内容可从Google Cache获得。我多年来没有看过Android评分栏，因此并未更新内容，也不确定该链接中的内容是否仍然有效。
— Farray
195

如何粘贴此处 给出的代码...

第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"    
/>
— 韦巴贾尼
source
7
不应该这样：<item android：id =“ @ + android：id / secondaryProgress” android：drawable =“ @ drawable / star_empty” />是“ @ drawable / star_half” />还是您所说的任何东西？
— StackOverflowed 2012年
8
谢谢你 但是，只需发表一点评论：您就不需要半颗星的图像。它会根据进度自动生成。
— 鲍里斯·斯特兰杰夫
1
@Vlad阅读我从哪里得到的答案的第一行。
— Vaibhav Jani
4
完美地工作:)，但是我有2个问题.. numStars不再工作了，即使我设置了最大和最小宽度，我也无法使它更大一点
— Ahmad Dwaik'Warlock'13
1
谢谢@PiedPiper-这节省了我很多时间！有史以来最好的解释！
— Edmond Tamas
70

只需使用：

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

根据需要更改比例因子。

为了缩放而不在左侧创建填充，请添加

android:transformPivotX="0dp"
— 洛鲁瓦伊
source
scaleX scaleY很好，但是保留了难看的填充，如果您可以摆脱该填充，那将是最简单的完美答案
— Ahmad Dwaik'Warlock'14
此外，他们还需要Android 3.0 / API 11
— averasko 2014年
6
我解决了codeandroid:scaleX="0.75" android:scaleY="0.75" android:layout_marginRight="-25dp"
— 汉尼斯·阿赫
1
尽管这似乎是最简单的解决方案，但它对我没有用。由于某些原因，没有任何效果。是因为我使用的是Android 5.x吗？
— 鹦鹉螺
您可以通过指定评级栏的高度来删除一些多余的填充，例如：android:layout_height="40dp"
— Manohar Reddy
43

无需将侦听器添加到中?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" />
— 酵母菌
source
4
isIndicator是关键！
— 死鱼2015年
19

OS的一个小工具

<RatingBar
    android:id="@+id/ratingBar"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    />
— Bouchehboun Saad
source
2
提供上面的代码时，等级栏不可单击。
— Sharath 2015年
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" />
— 穆罕默德·阿扎鲁丁·谢赫（Mohammed Azharuddin Shaikh）
source
1
尽管在视觉上它很棒。点击事件不适用于此解决方案。你有什么解决办法吗？
— 格克汗阿克尔巴里斯
4
如果您希望点击有效，请使用android：isIndicator =“ false”
— D4rWiNS 2015年
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; 
        } 
    });

我希望这可以帮助其他人。绝对比自己画画容易（尽管我发现这也可行，但我只想轻松使用星星）。

— 用户名
source
它可以工作，而且很容易...但是ratingBarStyleSmall星星真的太小而无法使用。我想我必须自己动手才能获得中等大小的恒星。
— Beer Me
5 
<RatingBar
    android:id="@+id/rating_bar"
    style="@style/Widget.AppCompat.RatingBar.Small"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
— ry
source
5 
 <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"
— 因德拉耶特乔蒂
source
尽管此代码段可能是解决方案，但包括说明确实有助于提高您的帖子质量。请记住，您将来会为读者回答这个问题，而这些人可能不知道您提出代码建议的原因。
— 约翰，
3

尽管Farry的答案有效，但对于Samsung设备，RatingBar随机采用蓝色，而不是我定义的蓝色。所以用

style="?attr/ratingBarStyleSmall"

代替。

完整的代码如何使用它：

<android.support.v7.widget.AppCompatRatingBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="?attr/ratingBarStyleSmall" // use smaller version of icons
                android:theme="@style/RatingBar"
                android:rating="0"
                tools:rating="5"/>

<style name="RatingBar" parent="Theme.AppCompat">
        <item name="colorControlNormal">@color/grey</item>
        <item name="colorControlActivated">@color/yellow</item>
        <item name="android:numStars">5</item>
        <item name="android:stepSize">1</item>
    </style>
— rt
source
2

使用此代码

<RatingBar
    android:id="@+id/ratingBarSmalloverall"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="30dp"
    android:isIndicator="false"
    android:numStars="5" />
— Dharmendra Mishra
source
2 
<RatingBar
    android:id="@+id/ratingBar1"
    android:numStars="5"
    android:stepSize=".5"
    android:rating="3.5"
    style="@android:style/Widget.DeviceDefault.RatingBar.Small"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
— MDP
source
2

我得到的最好的答案 

  <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值增加/减小大小

— 阿曼·辛格
source
1

将以下代码用于带有onTouch事件的小型评分栏

enter code here


<RatingBar
            android:id="@+id/ratingBar"
            style="?android:ratingBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:isIndicator="false"
            android:rating="4"
            android:stepSize="0.5" />
— Arunkrishna
source
0

经过大量研究，我发现减小自定义等级栏的最佳解决方案是获得某些尺寸的可绘制进度条，如下所述：

xxhdpi-48 * 48像素

xhdpi-36 * 36像素

hdpi-24 * 24像素

在样式上，将所有分辨率的minheight和maxheight设置为16 dp。

让我知道这是否不能帮助您获得最佳的小尺寸等级栏，因为我发现这些尺寸非常兼容并且等同于ratingbar.small样式属性。

— Praveen Dewangan
source
0

它适用于我在评级栏xml style =“？android：attr / ratingBarStyleSmall”中添加this.it的作品。

— 赫马·南迪尼
source
-4

我通过以下方法解决此问题：style =“？android：attr / ratingBarStyleSmall”

— 海隆
source
这是OP已经尝试过的，并且已经提到了其他答案。
— 庞
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.