web-dev-qa-db-ja.com

Android評価バーのストロークの色を設定するにはどうすればよいですか？（星の色ではなく境界線）

私はAndroid初心者で、カスタムratingBarを作りたいです。

免責事項：重複ではありません。私が読んだすべての投稿は、星の色を変更する方法とストロークを削除する方法について尋ねているためです。それは私が欲しいものではありません。ストロークを持ち、境界線の色を変更できるようにします。

空のときは透明で黄色のストローク、黄色の背景と半分は塗りつぶされます。

Pngを使いたくありません。私はすでに自分のものを持っていますが、それらは小さすぎます。 XML属性とドロアブルのみを使用してスターを作成できる場合、デザイナーに新しいものを作成するように依頼したくありません。

<RatingBar
          Android:id="@+id/thread_rating"
          Android:layout_width="wrap_content"
          Android:layout_height="wrap_content"
          Android:isIndicator="true"
          Android:numStars="5"
          Android:progressBackgroundTint="@color/gray"
          Android:progressTint="@color/gold"
          Android:rating="2.5"
          Android:secondaryProgressTint="@color/gray"
          Android:stepSize="0.5"
          style="?android:attr/ratingBarStyleSmall"
          />

私はこれに別のエンジニアと取り組んでいます。彼はJavaファイルにコードを書いた

private void setRatingBarStart(RatingBar rating_bar) {
LayerDrawable stars = (LayerDrawable) rating_bar.getProgressDrawable();
stars.getDrawable(2)
    .setColorFilter(getResources().getColor(R.color.gold),
        PorterDuff.Mode.SRC_ATOP); // for filled stars
stars.getDrawable(1)
    .setColorFilter(getResources().getColor(R.color.light_gray),
        PorterDuff.Mode.SRC_ATOP); // for half filled stars
stars.getDrawable(0)
    .setColorFilter(getResources().getColor(R.color.light_gray),
        PorterDuff.Mode.SRC_ATOP); // for empty stars

[つまり、灰色の背景、黄色の塗りつぶし、およびストロークなしになりました。

enter image description here

そして、透明な背景、黄色のストローク、塗りつぶしの黄色が必要です。このように見えます enter image description here

背景を透明に設定し、黄色にする方法はすでに知っています。ストロークの色の設定方法がわかりません。どうもありがとう！！！！

javaandroidxmldrawableratingbar
29
husky love

ストロークと背景を設定するために、すべての描画可能な色を黄色（あなたの場合getResources().getColor(R.color.gold) for all）にします。 （バックグラウンド、二次進行および進行の場合）

RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
        LayerDrawable stars = (LayerDrawable) ratingBar.getProgressDrawable();
        stars.getDrawable(2).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(0).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(1).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);

progressBackgroundTintからprogressTint、secondaryProgressTint、RatingBar属性を削除する必要はありません。

<RatingBar
        Android:id="@+id/ratingBar"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:numStars="5"
        Android:rating="2.5"/>

そして結果は::

image1

これが役立つことを願っています（ピンク色は単なる背景色です）

ドロアブル1と0を赤に設定した後：

RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
        LayerDrawable stars = (LayerDrawable) ratingBar.getProgressDrawable();
        stars.getDrawable(2).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(0).setColorFilter(Color.Red, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(1).setColorFilter(Color.Red, PorterDuff.Mode.SRC_ATOP);

image2

19
KDeogharkar

そのためにライブラリやスタイルを使用しないでください。次のステップを使用して、結果を取得します。

描画可能フォルダーにcustom_ratingbar.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_full" />
</layer-list>

ratingBarで次を使用します。

  <RatingBar
    Android:id="@+id/ratingBarChef"
    style="?android:attr/ratingBarStyleSmall"
    Android:numStars="5"
    Android:stepSize="0.2"
    Android:rating="3.0"
    Android:progressDrawable="@drawable/custom_ratingbar"
    Android:isIndicator="false"
    />
7
Daxesh Vekariya

もう1つの方法は、以下の手順に従って画像がない場合にカスタム評価バーを作成することです。このすべてのファイルは、描画可能なフォルダーに作成されます。

emptystar.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:height="24dp"
Android:width="24dp"
Android:viewportWidth="24"
Android:viewportHeight="24">
<path Android:fillColor="#F1C332" Android:pathData="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" />
</vector>

full_star.xml

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:height="24dp"
Android:width="24dp"
Android:viewportWidth="24"
Android:viewportHeight="24">
<path Android:fillColor="#F1C332" Android:pathData="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
</vector>

half_star.xml

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:height="24dp"
Android:width="24dp"
Android:viewportWidth="24"
Android:viewportHeight="24">
<path Android:fillColor="#000" Android:pathData="M12,15.89V6.59L13.71,10.63L18.09,11L14.77,13.88L15.76,18.16M22,9.74L14.81,9.13L12,2.5L9.19,9.13L2,9.74L7.45,14.47L5.82,21.5L12,17.77L18.18,21.5L16.54,14.47L22,9.74Z" >
</path>
</vector>

food_ratingbar_full_empty.xml

<?xml version="1.0" encoding="utf-8"?>

<item Android:state_pressed="true"
    Android:state_window_focused="true"
    Android:drawable="@drawable/empty_star" />

<item Android:state_focused="true"
    Android:state_window_focused="true"
    Android:drawable="@drawable/empty_star" />

<item Android:state_selected="true"
    Android:state_window_focused="true"
    Android:drawable="@drawable/empty_star" />

<item Android:drawable="@drawable/empty_star" />

food_ratingbar_full_filled.xml

<?xml version="1.0" encoding="utf-8"?>

<item Android:state_pressed="true"
    Android:state_window_focused="true"
    Android:drawable="@drawable/full_star" />

<item Android:state_focused="true"
    Android:state_window_focused="true"
    Android:drawable="@drawable/full_star" />

<item Android:state_selected="true"
    Android:state_window_focused="true"
    Android:drawable="@drawable/full_star" />

<item Android:drawable="@drawable/full_star" />

food_rating_bar.xml

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:id="@Android:id/background"
    Android:drawable="@drawable/food_ratingbar_full_empty" />

<item Android:id="@Android:id/secondaryProgress"
    Android:drawable="@drawable/food_ratingbar_full_empty" />
<item Android:id="@Android:id/progress"
    Android:drawable="@drawable/food_ratingbar_full_filled" />

style.xml

   <style name="foodRatingBar" parent="@Android:style/Widget.RatingBar">
    <item name="Android:progressDrawable">@drawable/food_rating_bar_full</item>
    <item name="Android:minHeight">23dip</item>
    <item name="Android:maxHeight">25dip</item>
   </style>

レイアウト内

<RatingBar
Android:id="@+id/ratingBarDish"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_marginLeft="@dimen/dp10"
Android:layout_marginStart="@dimen/dp10"
style="@style/foodRatingBar"
Android:isIndicator="true" />
3
Daxesh Vekariya

私は実際にあなたが必要なものを見つけたと思います。これで説明されているように、カスタムRatingBarを作成する必要があります answer ただし、標準のドローアブルではなく、ベクトルドローアブルを使用する必要があります。

このWebサイトで3つのドローアブル（フル、ハーフ、および空）をダウンロードできます。

https://materialdesignicons.com/

または、resフォルダーを右クリックして、-> New-> Vector asset on Android Studio。

見つからない場合の3つのドロウアブルXMLは次のとおりです。

完全な星：

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:height="24dp"
Android:width="24dp"
Android:viewportWidth="24"
Android:viewportHeight="24">
<path Android:fillColor="#000" Android:pathData="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />

半星：

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:height="24dp"
Android:width="24dp"
Android:viewportWidth="24"
Android:viewportHeight="24">
<path Android:fillColor="#000" Android:pathData="M12,15.89V6.59L13.71,10.63L18.09,11L14.77,13.88L15.76,18.16M22,9.74L14.81,9.13L12,2.5L9.19,9.13L2,9.74L7.45,14.47L5.82,21.5L12,17.77L18.18,21.5L16.54,14.47L22,9.74Z" />

空の星：

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:height="24dp"
Android:width="24dp"
Android:viewportWidth="24"
Android:viewportHeight="24">
<path Android:fillColor="#000" Android:pathData="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" />

サイズを変更するには、属性heightおよびwidthを更新するだけです。

色を変更するには、属性fillColorを更新し、黄色を設定します。

3
Yoann Hercouet

こんにちはこれを使用して、境界線画像をスターとして使用してみてください https://github.com/ome450901/SimpleRatingBar icon_staremptyとicon_starfilledはそれぞれの画像です

<com.willy.ratingbar.ScaleRatingBar xmlns:app="http://schemas.Android.com/apk/res-auto"
                    Android:id="@+id/deals_ratingbar"
                    Android:layout_width="0dp"
                    Android:layout_height="wrap_content"
                    Android:layout_gravity="center"
                    Android:layout_marginLeft="@dimen/_10dp"
                    Android:layout_toRightOf="@+id/txt_newprice"
                    Android:layout_weight=".4"
                    Android:gravity="center|right"
                    Android:outlineProvider="none"
                    app:srb_drawableEmpty="@drawable/icon_starempty"
                    app:srb_drawableFilled="@drawable/icon_starfilled"
                    app:srb_isIndicator="true"
                    app:srb_numStars="5"
                    app:srb_starHeight="@dimen/_10dp"
                    app:srb_starPadding="@dimen/_3dp"
                    app:srb_starWidth="@dimen/_10dp" />
0
Muhammad Haroon