より小さな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"

しかし、結果は小さすぎ、このプロパティでレートを設定することは不可能です。

どうすればよいですか?

回答:


106

デフォルトのRatingBarウィジェットはsorta 'lameです。

ソースは?android:attr/ratingBarStyleIndicator?android:attr/ratingBarStyleSmall既に知っている" "に加えて、スタイル " "も参照しています。 ratingBarStyleIndicator少し小さいですが、それでもかなり醜いです。コメントはこれらのスタイルが「相互作用をサポートしていない」ことを示しています。

あなたはおそらく自分でロールオフするほうがいいでしょう。これを行う方法を示したhttp://kozyr.zydako.net/2010/05/23/pretty-ratingbar/にまともな見た目のガイドがあります。(私はまだ自分でやったことはありませんが、1日かそこらで試すつもりです。)

幸運を!

ps申し訳ありませんが、ソースへのリンクを投稿してあなたがぶらぶらするつもりでしたが、私は新しいユーザーであり、1つを超えるURLを投稿することはできません。ソースツリーを掘り下げる場合、それはframeworks / base / core / java / android / widget / RatingBar.javaにあります


?android:attr / ratingBarStyleSmallを使用してグローバル評価テーマを設定する方がはるかに優れていますが、正確なテーマ名は使用しないでください。ありがとうございます。)
Tsung Goh

7
我々セットインジケータープロパティがあればアンドロイド:isIndicator =「false」を、我々はそれと相互作用するよりも...
マユールR. Amipara

ドキュメントは ratingBarStyleSmallは、2の小さい暗示します。あなたのコメントは後ろ向きだと思います。
AdamMc331

5
リンクが壊れています。
Denny

@Denny Contentは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"    
/>  

7
これはありません:<item android:id = "@ + android:id / secondaryProgress" android:drawable = "@ drawable / star_empty" />は "@ drawable / star_half" />か、あなたがそれを何と呼んでもいいですか?
StackOverflowed、

8
本当にありがとう。ただし、ほんの小さなコメント:ハーフスターの画像は必要ありません。進行状況に基づいて自動的に生成されます。
Boris Strandjev

1
@Vlad私がこれを得たところから私が述べた回答の最初の行を読みます。
Vaibhav Jani 2013

4
完璧に動作します:)しかし、2つの問題が発生しました。numStarsが機能しなくなり、最大幅と最小幅を設定しても、少し大きくすることができません
Ahmad Dwaik 'Warlock'

1
@PiedPiperに感謝-これは私に多くの時間を節約してくれました!史上最高の説明!
Edmond Tamas 2014

70

ただ使用する:

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

必要に応じて倍率を変更します。

左側にパディングを作成せずにスケーリングするには、次も追加します

android:transformPivotX="0dp"

scaleX scaleYは良いですが、醜いパディングを残してください。そのパディングを取り除くことができれば、それが最も簡単な完璧な答えになります
Ahmad Dwaik 'Warlock'

また、Android 3.0 / API 11が必要です
averasko

6
私は醜い(右)パディングを解決します codeandroid:scaleX="0.75" android:scaleY="0.75" android:layout_marginRight="-25dp"
hannes ach

1
それは最も簡単な解決策のように見えますが、私にとってはうまくいきませんでした。何らかの理由で影響はありませんでした。Android 5.xを使っているからですか?
ノーチラス

あなたは評価バーの元の高さを指定することにより、いくつかの余分なパディングを削除することができますandroid:layout_height="40dp"
Manoharさんレディ

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

4
isIndicatorが鍵です!
デッドフィッシュ2015年

19

OSが実装する小さなもの

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

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

1
視覚的には素晴らしいですが。このソリューションでは機能しないクリックイベント。これに対する修正はありますか?
グーカンバリスアーカー

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

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

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"

このコードスニペットが解決策となる可能性がありますが、説明を含めると、投稿の品質を向上させるのに役立ちます。あなたは将来の読者のための質問に答えていることを覚えておいてください、そしてそれらの人々はあなたのコード提案の理由を知らないかもしれません。
ヨハン

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>

3

小さな評価バーのベストアンサー

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

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

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

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

scaleXscaleYの値を使用してサイズを増減する


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

0

多くの調査の結果、カスタムレーティングバーのサイズを小さくするための最良の解決策は、以下に説明するように、進行状況のサイズを特定のサイズで描画できるようにすることです。

xxhdpi-48 * 48ピクセル

xhdpi-36 * 36ピクセル

hdpi-24 * 24ピクセル

また、スタイルでは、すべての解像度で最小高さと最大高さを16 dpに設定します。

これらのサイズが非常に互換性があり、ratingbar.smallスタイル属性と同等であることがわかったので、これが最高の小さなサイズの評価バーを取得するのに役立つかどうかを教えてください。


0

評価バーxml style = "?android:attr / ratingBarStyleSmall"で機能しているthisを追加すると、機能します。


-4

この問題を次のように解決します。style= "?android:attr / ratingBarStyleSmall"


これはOPがすでに試みたものであり、他の回答はすでに述べています。
パン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.