如何制作更小的RatingBar?

时间:2010-05-20 14:14:49

标签: android android-widget android-styles

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

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

我该怎么办?

18 个答案:

答案 0 :(得分:193)

如何粘贴给定here ...

的代码

<强>步骤1。您需要在res/drawable ...

中拥有自己的评级星标

A full star

Empty star

步骤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"    
/>  

答案 1 :(得分:103)

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

除了您已熟悉的“?android:attr/ratingBarStyleIndicator”之外,来源还会引用样式“?android:attr/ratingBarStyleSmall”。 ratingBarStyleIndicator略小,但仍然非常难看,评论指出这些风格“不支持互动”。

你可能会更好地自己动手。 http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/有一个体面的指南,展示了如何做到这一点。 (我自己还没有这样做,但会在一天左右的时间里尝试。)

祝你好运!

P.S。对不起,我要发布一个链接到你的来源,但我是一个新用户,不能发布超过1个URL。如果你通过源代码树挖掘它,它位于frameworks / base / core / java / android / widget / RatingBar.java

答案 2 :(得分:66)

只需使用:

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

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

为了在不创建左侧填充的情况下进行缩放,还要添加

android:transformPivotX="0dp"

答案 3 :(得分:40)

无需向?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 :(得分:19)

操作系统的小工具

<RatingBar
    android:id="@+id/ratingBar"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    />

答案 5 :(得分: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; 
        } 
    });

我希望这有助于其他人。绝对比绘制自己的更容易(尽管我发现它也有效,但我只想轻松使用星星)。

答案 6 :(得分:14)

申请。

<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" />

答案 7 :(得分:5)

<RatingBar
    android:id="@+id/rating_bar"
    style="@style/Widget.AppCompat.RatingBar.Small"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

答案 8 :(得分: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" />

答案 9 :(得分:2)

小型评级栏的最佳答案

<RatingBar
                    android:layout_width="wrap_content"
                    style = "?android:attr/ratingBarStyleSmall"
                    android:layout_height="wrap_content" />

答案 10 :(得分:2)

虽然Farry的回答有效,但对于三星设备,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>

答案 11 :(得分: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" />

答案 12 :(得分:1)

使用以下代码进行onTouch事件的小评级栏

verify() {
  this.setState({
    pressed: true
  });

  var self = this;
  var theURL = "<URL>"; //Removed for question

  fetch(theURL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      uidOrEmail: this.state.email,
      code: this.state.value
    })
  })
.then(res => res.json())
.then(function(data) {
  console.log(data); //PROBLEM: This doesn't execute immediately
}

答案 13 :(得分:0)

经过大量研究后,我发现减少自定义评级栏尺寸的最佳解决方案是获得某些尺寸的可绘制尺寸,如下所述:

xxhdpi - 48 * 48 px

xhdpi - 36 * 36 px

hdpi - 24 * 24 px

并且在风格上将所有分辨率的最小高度和最大高度设为16 dp。

请告诉我这是否有助于您获得最佳的小尺寸评级栏,因为我发现这些尺寸非常兼容并且等同于ratingbar.small样式属性。

答案 14 :(得分:0)

我得到的最佳答案

  <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 值增加/减少尺寸

答案 15 :(得分:0)

它为我工作 评级栏xml style =“?android:attr / ratingBarStyleSmall”添加this.it将起作用。

答案 16 :(得分:0)

 <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"

答案 17 :(得分:-4)

我解决了以下问题: 风格= “机器人:ATTR / ratingBarStyleSmall”