web-dev-qa-db-ja.com

より小さなRatingBarを作成する方法は？

レイアウトに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"

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

どうすればいいですか？

androidandroid-widgetandroid-styles
128
Clem

デフォルトのRatingBarウィジェットは、ややラメです。

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

おそらく、自分で転がしたほうがいいでしょう。 http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/ にまともなガイドがあり、これを行う方法を示しています。 （私はまだ自分でやっていませんが、1日かそこらで試みます。）

幸運を！

追伸申し訳ありませんが、ソースへのリンクを投稿するつもりでしたが、私は新しいユーザーであり、複数のURLを投稿することはできません。ソースツリーを調べてみると、frameworks/base/core/Java/Android/widget/RatingBar.Javaにあります。

104
Farray

与えられたコードを接着する方法 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"    
/>
193
Vaibhav Jani

使用するだけ：

Android:scaleX="0.5"
Android:scaleY="0.5"

必要に応じてスケール係数を変更します。

左側にパディングを作成せずにスケーリングするために、追加も

Android:transformPivotX="0dp"
68
Loolooii

?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" />
41
zyamys

小さいものはOSによって実装されます

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

これを適用します。

<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" />
15
Azhar Shaikh

上記の方法よりも簡単で、独自の方法よりも簡単な解決策を見つけました。単純に小さな評価バーを作成し、それに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; 
        } 
    });

これが他の人の助けになることを願っています。自分で描くよりも間違いなく簡単です（それでも機能することがわかりましたが、星を簡単に使用したかっただけです）。

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

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

<RatingBar
                    Android:layout_width="wrap_content"
                    style = "?android:attr/ratingBarStyleSmall"
                    Android:layout_height="wrap_content" />
2
Arun Prajapati

このコードを使用

<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
Dharmendra Mishra
<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
M D P

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>
2
murt

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" />
1
arunkrishna
 <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"
1
indrajeet jyoti

多くの調査の結果、カスタム評価バーのサイズを小さくするための最良の解決策は、以下で説明するように特定のサイズで描画可能な進行状況のサイズを取得することです。

xxhdpi-48 * 48 px

xhdpi-36 * 36 px

hdpi-24 * 24 px

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

これらのサイズが非常に互換性があり、ratingbar.smallスタイル属性と同等であることがわかったため、これが最適な小さなサイズの評価バーを取得するのに役立たない場合はお知らせください。

0
praveen dewangan

評価バーxml style = "？android：attr/ratingBarStyleSmall"での作業はthis.itを追加します。

0
S HemaNandhini

私が得た最高の答え

  <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の値を使用してサイズを増減する

0
AMAN SINGH