Android RatingBar เปลี่ยนสีดาว [ปิด]


141

ฉันจะเปลี่ยนสีและขนาดของดาวได้อย่างไร


ฉันคิดว่าคุณต้องสร้างแถบการให้คะแนนที่กำหนดเองของคุณเองหากคุณต้องการทำเช่นนั้น
Donal Rafferty

ฉันเขียนบทความในบล็อกซึ่งอธิบายวิธีการเปลี่ยนภาพ RatingBar: kozyr.zydako.net/2010/05/23/pretty-ratingbarนอกจากนี้ยังแสดงตำแหน่งที่คุณสามารถระบุขนาดภาพ ...
kozyr

ฉันหวังว่าคำถามนี้มีไว้สำหรับแถบการให้คะแนนแบบหลายสีดังที่แสดงในเว็บไซต์ไม่สามารถหาได้ด้วยตนเอง สร้างการดำเนินงานที่เรียบง่ายตัวเองgithub.com/codebreaker/coloredratingbar-android หวังว่านี่จะช่วยให้ใครบางคนที่นั่น
jaga

คำตอบ:


26

ขั้นตอนที่ # 1: สร้างสไตล์ของคุณเองโดยการโคลนหนึ่งในสไตล์ที่มีอยู่ (จาก$ANDROID_HOME/platforms/$SDK/data/res/values/styles.xml) วางไว้ในโปรเจ็กต์ของคุณเองstyles.xmlและอ้างอิงเมื่อคุณเพิ่มวิดเจ็ตในเค้าโครง

ขั้นตอนที่ # 2: สร้างLayerDrawableทรัพยากร XML ของคุณเองRatingBarโดยชี้ไปที่รูปภาพที่เหมาะสมเพื่อใช้กับแถบ สไตล์ดั้งเดิมจะนำคุณไปสู่ทรัพยากรที่มีอยู่ที่คุณสามารถเปรียบเทียบได้ จากนั้นปรับสไตล์ของคุณเพื่อใช้LayerDrawableทรัพยากรของคุณเองแทนที่จะเป็นแบบในตัว


1
ตามขั้นตอน # 2 สิ่งนี้ไม่ได้ผลกับอุปกรณ์ Samsung 3 หรืออุปกรณ์อื่น ๆ นี่ไม่จำเป็นต้องเป็น LayerDrawable ดูที่นี่สำหรับข้อมูล: stackoverflow.com/questions/30266334/…
Kenny

6
ใช้ android: progressTint = "@ color / yellow" ดูคำตอบของ @superpuccio
Vincent

2
progressTint รองรับเฉพาะเหนือระดับ 21 api
Yogesh Rathi

นี่เป็นทางออกที่ดีที่สุด: stackoverflow.com/a/36297738/1935135
André Luiz Reis

120

มันซับซ้อนเล็กน้อยในบล็อกที่กล่าวถึงฉันใช้วิธีที่คล้ายกัน แต่เรียบง่ายกว่า คุณต้องมีภาพ 3 ดาว (red_star_full.png, red_star_half.png และ red_star_empty.png) และหนึ่ง xml นั่นคือทั้งหมด

วางภาพทั้งสามนี้ที่ res / drawable

วางไว้ที่นั่น ratingbar_red.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/red_star_empty" />
    <item android:id="@android:id/secondaryProgress" android:drawable="@drawable/red_star_half" />
    <item android:id="@android:id/progress" android:drawable="@drawable/red_star_full" />
</layer-list>

และสุดท้ายบอกความหมายของแถบบอกคะแนนเพื่อใช้สิ่งนี้เช่น

<RatingBar android:progressDrawable="@drawable/ratingbar_red"/>

แค่นั้นแหละ.


3
สวัสดีอเล็กซ์ฉันได้ลองใช้วิธีแก้ไขปัญหานี้ แต่เมื่อฉันพยายามตั้งค่าระดับเป็น 1.1, 1.2 และอื่น ๆ ... มันแสดงเป็น 1.5 ฉันถ่ายภาพ 3 ดาวแล้วหนึ่งอันว่างเปล่าครึ่งหนึ่งเต็มและเต็มหนึ่ง ฉันคิดว่ามันควรจะสอดแทรกระหว่างพวกเขาเพื่อให้ได้ชิ้นส่วนที่เป็นเศษส่วนฉันแค่สงสัยว่ามีคนอื่นที่มีปัญหาเดียวกันหรือฉันกำลังทำสิ่งผิดปกติอย่างเห็นได้ชัดหรือไม่?
Graham Baitson

คุณช่วยโทรหาฉันเกี่ยวกับภาพที่เราควรใช้สภาพอากาศเป็นภาพสีและขนาดของภาพที่ฉันไม่สามารถแก้ปัญหานี้ได้ ...
Prithviraj Shiroor

1
ทุกคนเห็นว่าคำตอบอัพเดท 2015 ด้านล่าง! มันง่ายกว่าและง่ายกว่ามาก!
ธี่

คำตอบนี้ยังให้ความยืดหยุ่นมากกว่าในสถานะที่แตกต่างกันของดวงดาว
Tom Brinkkemper

ทำไมฉันถึงได้เส้นแนวตั้งด้านล่างดาว ฉันพยายามกำหนดสไตล์ที่กำหนดเองโดยระบุความสูง แต่ยังมีเส้นแนวตั้งด้านล่างดาวบน AVD ของฉัน
Aleksandar

93

ลองนี้ถ้าคุณต้องการเปลี่ยนสี:

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

1
ไม่ว่าสิ่งที่PorterDuff.Mode.SRC_ATOPมีค่าเฉลี่ยหรือทำอย่างไร
Zapnologica

5
ใช้งานไม่ได้กับ API 5.0 ขึ้นไป ความต้องการ:Drawable stars = rb.getProgressDrawable(); stars.setTint( Color.YELLOW );
zyamys

@zyamys นี่แย่จริง ๆ = (วิธีการสำหรับ "รุ่นที่สูงกว่า" และวิธีอื่นสำหรับรุ่นที่เก่ากว่าเป็นสิ่งจำเป็นหรือไม่
Daniela Morais

1
ใช้งานได้กับความแม่นยำ 0.5 เท่านั้น มิฉะนั้น (ความแม่นยำ <0.5) โอเวอร์เลย์จะแปลกและดูเหมือนว่าสีฟ้าจะยังคงมีความแม่นยำ 0.5 ในขณะที่สีเหลืองแม่นยำ
Teo Inke

1
คำเตือน: เกิดปัญหากับอุปกรณ์ pre-lolipop ไปกับคำตอบที่ยอมรับ
blockwala

70

วิธีที่ง่ายที่สุดสำหรับฉัน ... หากคุณกำลังขยาย AppCompat Activity

ใน build.gradle ของคุณเพิ่มไลบรารี appcompat ล่าสุด

dependencies {  
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version
}

ทำให้กิจกรรมของคุณขยาย android.support.v7.app.AppCompatActivity

public class MainActivity extends AppCompatActivity {  
    ...
}

ประกาศสไตล์ที่กำหนดเองในไฟล์ styles.xml ของคุณ

<style name="RatingBar" parent="Theme.AppCompat">  
    <item name="colorControlNormal">@color/indigo</item>
    <item name="colorControlActivated">@color/pink</item>
</style>  

ใช้สไตล์นี้กับ RatingBar ของคุณผ่านทาง Android: คุณสมบัติของชุดรูปแบบ

<RatingBar  
    android:theme="@style/RatingBar"
    android:rating="3"
    android:stepSize="0.5"
    android:numStars="5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

3
ขอบคุณ @Vishal Kumar ฉันลองใช้ Kitkat 4.4.4 (Samsung S3 neo) และ Marshmallow 6.0.1 (Samsung Galaxy On Nxt) ใช้งานได้ แต่ไม่ประสบความสำเร็จกับ Lollipop 5.1 (Micromax) สำหรับ Lollipop ฉันใช้แอตทริบิวต์ "android: progressTint" ใน RatingBar และใช้งานได้
Prashant

นั่นเป็นทางออกที่ดีที่สุด
Arhat Baid

นี่ควรเป็นคำตอบที่ถูกต้องที่เลือกไว้
Hampel Előd

1
นี่คือทางออกที่ดีที่สุด หากคุณต้องการเปลี่ยนขนาดดาวคุณสามารถใช้style="?android:ratingBarStyleSmall"ร่วมกันได้
André Luiz Reis

@ AndréLuizReis <style name="RatingBarSmallTheme" parent="Theme.AppCompat"> <item name="colorControlNormal">@color/colorOrangeNormal</item> <item name="colorControlActivated">@color/colorOrangeActivated</item> <item name="ratingBarStyle">@style/Widget.AppCompat.RatingBar.Small</item> </style> และการให้คะแนนของคุณบาร์ android:theme="@style/RatingBarSmallTheme"
Zakhar Rodionov

47

อัปเดตปี 2558

ตอนนี้คุณสามารถใช้DrawableCompatเพื่อแต้มสี drawable ทุกชนิด ตัวอย่างเช่น:

Drawable progress = ratingBar.getProgressDrawable();
DrawableCompat.setTint(progress, Color.WHITE);

เข้ากันได้ย้อนหลังได้ถึง API 4


อย่าลืมตั้งค่า drawable กลับไปที่เรทบาร์
squeeish

15
สิ่งนี้จะทำให้สีที่วาดได้ทั้งหมดเป็นสีเดียวซึ่งทำให้ดาวว่างเปล่านั้นแยกแยะได้ยากมาก
blueice

สิ่งนี้ใช้ได้กับห้องสมุดสนับสนุน android> = 22 เท่านั้นและไม่สามารถใช้ได้กับห้องสมุดสนับสนุน <22
Raghav Sharma

2
มันดึงดูด 5 ดาวสีไม่ใช่ 3.5
CoolMind

1
ฉันจะล้อมรอบด้วยแค่นั้นif(Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP_MR1) {}เพราะมันคือการทำงานโดยเริ่มต้นจาก API 22
Yoann Hercouet

38

จาก API 21ในการเปลี่ยนสีของดาวได้ง่ายด้วยรหัสสามบรรทัดนี้:

android:progressTint="@android:color/holo_red_dark"
android:progressBackgroundTint="@android:color/holo_red_dark"
android:secondaryProgressTint="@android:color/holo_red_dark" 

การทำเช่นนี้คุณจะเปลี่ยน:

  • สีของดวงดาวที่ถูกเติมเต็ม (progressTint)
  • สีของดาวที่ไม่ได้บรรจุ (progressBackgroundTint)
  • และสีเส้นขอบ (SecondaryProgressTint) ของดวงดาว

แทนที่จะเป็น 3.5 จะใช้สี 4 ดาว
CoolMind

@CoolMind ตั้งค่า android: stepSize: 1 แทน 0.5
eLemEnt

4
วิธีการเปลี่ยนสีของดาวว่างเปล่า?
winklerrr

@winklerrr คุณพบวิธีแก้ปัญหาวิธีเปลี่ยนสีของดาวว่างเปล่า
Tarun Kumar

ไม่ได้ทำการตรวจสอบเพิ่มเติมเพื่อค้นหาวิธีแก้ปัญหา
winklerrr

36

หากคุณต้องการเปลี่ยนสีสำหรับดาวทั้งหมดระบุว่าคุณใช้ของฉัน:

LayerDrawable stars = (LayerDrawable) ratingBar.getProgressDrawable();
stars.getDrawable(2).setColorFilter(getResources().getColor(R.color.starFullySelected), PorterDuff.Mode.SRC_ATOP);
stars.getDrawable(1).setColorFilter(getResources().getColor(R.color.starPartiallySelected), PorterDuff.Mode.SRC_ATOP);
stars.getDrawable(0).setColorFilter(getResources().getColor(R.color.starNotSelected), PorterDuff.Mode.SRC_ATOP);

มีวิธีใดบ้างในการตั้งค่าสีของดาวตามข้อมูลที่ดึงมาจากฐานข้อมูล สมมติว่าฉันได้ 5 ดาวและข้อมูลที่ส่งคืนจากฐานข้อมูลคือ 4 ดังนั้นแทนที่จะเปลี่ยนทั้ง 5 ฉันเปลี่ยนเพียง 4 ครั้งแรกเท่านั้น

1
getColor เลิกใช้แล้วตอนนี้มีทางเลือกอื่นอีกไหม?
Manohar Reddy

2
คุณอาจจะได้รับคำตอบที่นี่stackoverflow.com/a/32202256/2513291สำหรับตัวอย่างนี้ ContextCompat.getColor วิธี (บริบท R.color.color_name)
Yuriy Vinogradov

ทำงานได้ดี แต่โปรดสังเกตว่าด้วยเหตุผลบางอย่างคำสั่งซื้อนั้นสำคัญ (2 จากนั้น 1 จากนั้น 0) ฉันลองย้อนกลับและทำให้ UI บางอย่างบกพร่องในครั้งแรกที่มีการเปลี่ยนแปลงสี
Simon Ninon

25

โซลูชั่นที่ Alex และ CommonsWares โพสต์นั้นถูกต้อง สิ่งหนึ่งที่ Android ไม่เคยพูดถึงคือขนาดพิกเซลที่เหมาะสมสำหรับความหนาแน่นที่แตกต่างกัน นี่คือขนาดที่ต้องการสำหรับแต่ละความหนาแน่นตามแสงรัศมี

ดาวดวงเล็ก

mdpi: 16px
hdpi: 24px
xhdpi: 32px
xxhdpi: 48px

ดาวระดับกลาง

mdpi: 24px
hdpi: 36px
xhdpi: 48px
xxhdpi: 72px

ดาวดวงใหญ่

mdpi: 35px
hdpi: 52px
xhdpi: 69px
xxhdpi: 105px

ฉันสามารถใช้ vectordrawble กับดาวได้ไหม
Mina Fawzy

24

ดังนั้นฉันจึงต้องดิ้นรนกับปัญหานี้เป็นเวลาสองชั่วโมงและฉันได้คิดหาวิธีแก้ปัญหาที่ใช้งานได้สำหรับ API ทุกรุ่นที่แสดงเรทติ้งดาวครึ่ง

private void setRatingStarColor(Drawable drawable, @ColorInt int color)
{
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
    {
        DrawableCompat.setTint(drawable, color);
    }
    else
    {
        drawable.setColorFilter(color, PorterDuff.Mode.SRC_IN);
    }
}

คุณเรียกเมธอดด้วยลำดับของ drawable นี้:

    LayerDrawable stars = (LayerDrawable) ratingBar.getProgressDrawable();
    // Filled stars
    setRatingStarColor(stars.getDrawable(2), ContextCompat.getColor(getContext(), R.color.foreground));
    // Half filled stars
    setRatingStarColor(stars.getDrawable(1), ContextCompat.getColor(getContext(), R.color.background));
    // Empty stars
    setRatingStarColor(stars.getDrawable(0), ContextCompat.getColor(getContext(), R.color.background));

หมายเหตุ: นอกจากนี้คุณต้องระบุแอตทริบิวต์ "max" และ "numStars" ใน XML มิฉะนั้นจะไม่แสดงดาวครึ่งดวง


วิธีเดียวที่เหมาะกับฉันใน API19 แต่ฉันยังไม่ยอมแพ้ที่จะหาวิธีทำสิ่งนี้จาก xml เฉพาะ T_T
Beeing Jk

@BeeingJk หากคุณสร้างมุมมองที่กำหนดเองที่ขยาย RatingBar คุณสามารถสร้างแอตทริบิวต์ xml ของคุณเองเพื่อระบุสีอ่อน จากนั้นคุณมีจุดควบคุมเดียวสำหรับการตั้งค่าสีและสามารถระบุสีใน xml หวังว่าจะช่วย! สามารถอธิบายเพิ่มเติมได้ถ้าต้องการ
Forrest Bice

Mode.SRC_INหรือMode.MULTIPLY?
Dr.jacky

12

ตอนนี้คุณสามารถใช้DrawableCompatจาก AppCompat v22.1.0 เป็นต้นไปเพื่อกรองสีทุกชนิดของ drawable แบบไดนามิกซึ่งมีประโยชน์เมื่อคุณรองรับหลายธีมด้วยชุดของ drawable ชุดเดียว ตัวอย่างเช่น:

LayerDrawable layerDrawable = (LayerDrawable) ratingBar.getProgressDrawable();
DrawableCompat.setTint(DrawableCompat.wrap(layerDrawable.getDrawable(0)), Color.RED);   // Empty star
DrawableCompat.setTint(DrawableCompat.wrap(layerDrawable.getDrawable(1)), Color.GREEN); // Partial star
DrawableCompat.setTint(DrawableCompat.wrap(layerDrawable.getDrawable(2)), Color.BLUE);  // Full star

สิ่งนี้สามารถใช้งานร่วมกับ API 4 แบบย้อนหลังได้เช่นกันดูโพสต์บล็อกของ Chris Banes บนSupport Libraries v22.1.0

สำหรับขนาดและรูปร่างที่แท้จริงคุณจะต้องกำหนดสไตล์และเลเยอร์ใหม่ของรายการเลเยอร์สำหรับขนาดที่เหมาะสมตามที่คนอื่นได้ตอบไปแล้วข้างต้น


Drawables ไม่ใช่อาร์เรย์คุณเป็นอย่างไรในการเข้าถึงความคืบหน้า
blueice

@blueice คุณขอโทษถูกต้อง Drawable ควรเป็น LayerDrawable ได้รับการแก้ไขแล้วขอบคุณ
Dan Dar3

ยังดูเหมือนจะไม่ได้ผลสำหรับฉันฉันลงเอยกับสิ่งที่ Yuriy Vinogradov ใส่ไว้ในการตอบสนองที่แตกต่างจากคำถามนี้และดูเหมือนว่าจะได้ผล
blueice

วิธีเปลี่ยน Drawable แทน Change color
Iman Marashi

@ImanMarashi ดูคำตอบที่อิงกับ XML ของ Alex ข้างต้นLayerDrawable.setDrawable (ดัชนี drawable)มีให้บริการเฉพาะจาก API23 เป็นต้นไป
Dan Dar3

10

ใช้android:themeคุณลักษณะ:

styles.xml

<style name="Theme.Rating" parent="Theme.AppCompat.Light">
    <item name="colorAccent">@color/rating</item>
</style>

layout.xml

<android.support.v7.widget.AppCompatRatingBar
    android:theme="@style/Theme.Rating"
    android:numStars="5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

9

เพียงแค่เปลี่ยนสีแถบเรตติ้งจาก xml: -

android:progressTint="@color/your_color"
android:backgroundTint="@color/your_color"
android:secondaryProgressTint="@color/your_color"

มันไม่เปลี่ยนสีดาวว่างเปล่า
Nainal

7

หากต้องการเปลี่ยนสีคุณเพียงแค่ใส่พารามิเตอร์ android: progressTint

 <RatingBar
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginTop="15dp"
        android:numStars="5"
        android:rating="1"
        android:progressTint="@android:/color/black"
        android:layout_gravity="center"
       />

สำหรับขนาดคุณสมบัติสไตล์


ใช้งานได้กับ API 21 หรือสูงกว่าเท่านั้นขอบคุณ
Junaid

5

วิธีที่ง่ายที่สุด:

android:progressTint="@color/color"

1
โปรดทราบว่านี่ใช้ได้กับ api 21+ เท่านั้น
Ixx

4

คำตอบของ Building @ lgvalle

อัปเดตปี 2558

ตอนนี้คุณสามารถใช้ DrawableCompat เพื่อแต้มสี drawable ทุกชนิด ตัวอย่างเช่น:

ความคืบหน้า Drawable = ratingBar.getProgressDrawable (); DrawableCompat.setTint (ความคืบหน้า, Color.WHITE); เข้ากันได้ย้อนหลังได้ถึง API 4

LayerDrawable drawable = (LayerDrawable) getProgressDrawable();
Drawable progress = drawable.getDrawable(2);
DrawableCompat.setTint(progress, getResources().getColor(COLOR1));
progress = drawable.getDrawable(1);
DrawableCompat.setTintMode(progress, PorterDuff.Mode.DST_ATOP);
DrawableCompat.setTint(progress, getResources().getColor(COLOR1));
DrawableCompat.setTintMode(progress, PorterDuff.Mode.SRC_ATOP);
DrawableCompat.setTint(progress, getResources().getColor(COLOR2));
progress = drawable.getDrawable(0);
DrawableCompat.setTint(progress, getResources().getColor(COLOR2));

วิธีนี้จะทำให้สีของขั้นตอนเศษส่วน


4
<!--For rating bar -->
    <style name="RatingBarfeed" parent="Theme.AppCompat">
        <item name="colorControlNormal">@color/colorPrimary</item>
        <item name="colorControlActivated">@color/colorPrimary</item>
    </style>

ใช้สีของคุณเอง


4

โดยไม่ต้องเพิ่มสไตล์ใหม่คุณสามารถใช้สีอ่อนภายใน RatingBar

             <RatingBar
                    android:id="@+id/ratingBar"
                    style="@android:style/Widget.Holo.RatingBar.Small"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:numStars="5"
                    android:rating="4.5"
                    android:stepSize="0.5"
                    android:progressTint="@color/colorPrimary"/>

3

ใช้งานได้กับ Android ด้านล่างและสูงกว่ารุ่น 21

หลังจากการวิจัยบางอย่างฉันได้ค้นพบวิธีการนี้เพื่อตั้งค่าโทนสีพื้นหลังสีของช่องว่าง (เช่นดาวครึ่งดวง) และสีอ่อนดาว

LayerDrawable layers = (LayerDrawable) ratingBar.getProgressDrawable();
DrawableCompat.setTint(layers.getDrawable(0), 0x33000000); // The background tint
DrawableCompat.setTint(layers.getDrawable(1), 0x00000000); // The gap tint (Transparent in this case so the gap doesnt seem darker than the background)
DrawableCompat.setTint(layers.getDrawable(2), 0xffFED80A); // The star tint

3

วิธีแก้ปัญหาง่ายๆใช้AppCompatRatingBarและวิธีsetProgressTintListเพื่อให้บรรลุสิ่งนี้ดูคำตอบนี้สำหรับการอ้างอิง


สิ่งนี้ใช้ได้กับฉันใน API 28 โดยใช้ com.google.android.material: material: 1.1.0-alpha02
Mark Lapasa

2

ฉันแก้ปัญหานี้ต่อไปนี้:

LayerDrawable layerDrawable = (LayerDrawable) ratingBar.getProgressDrawable();

DrawableCompat.setTint(DrawableCompat.wrap(layerDrawable.getDrawable(0)),
                       Color.WHITE);  // Empty star
DrawableCompat.setTint(DrawableCompat.wrap(layerDrawable.getDrawable(1)),
                       Color.YELLOW); // Partial star
DrawableCompat.setTint(DrawableCompat.wrap(layerDrawable.getDrawable(2)),
                       Color.YELLOW);

ขอบคุณมันใช้งานได้ แต่สำหรับดาวคะแนนบางส่วนจะถูกทาสีทั้งหมด
CoolMind

2
RatingBar mRating=(RatingBar)findViewById(R.id.rating);
 LayerDrawable layerDrawable=(LayerDrawable)mRating.getProgressDrawable();
 layerDrawable.getDrawable(2).setColorFilter(Color.parseColor
 ("#32CD32"),    PorterDuff.Mode.SRC_ATOP);

สำหรับฉันมันทำงาน ....


1

ฉันพบวิธีง่ายๆในการเปลี่ยนสีของดาวตามธีมของคุณ

ไปที่เว็บไซต์นี้: http://android-holo-colors.com/

เลือกสีชุดรูปแบบของคุณและสร้างภาพดาวของคุณ


1

เมื่อใช้คำตอบข้างต้นฉันสร้างวิธีการคงที่อย่างรวดเร็วซึ่งสามารถนำกลับมาใช้ใหม่ได้อย่างง่ายดาย มันมีจุดมุ่งหมายที่การแต้มสีความก้าวหน้าของดาวฤกษ์ที่เปิดใช้ ดาวที่ไม่ได้เปิดใช้งานจะเป็นสีเทา

    public static RatingBar tintRatingBar (RatingBar ratingBar, int progressColor)if (ratingBar.getProgressDrawable() instanceof LayerDrawable) {
        LayerDrawable progressDrawable = (LayerDrawable) ratingBar.getProgressDrawable();
        Drawable drawable = progressDrawable.getDrawable(2);
        Drawable compat = DrawableCompat.wrap(drawable);
        DrawableCompat.setTint(compat, progressColor);
        Drawable[] drawables = new Drawable[3];
        drawables[2] = compat;

        drawables[0] = progressDrawable.getDrawable(0);
        drawables[1] = progressDrawable.getDrawable(1);

        LayerDrawable layerDrawable = new LayerDrawable(drawables);

        ratingBar.setProgressDrawable(layerDrawable);

        return ratingBar;
    }
    else {
        Drawable progressDrawable =  ratingBar.getProgressDrawable();
        Drawable compat = DrawableCompat.wrap(progressDrawable);
        DrawableCompat.setTint(compat, progressColor);
        ratingBar.setProgressDrawable(compat);
        return ratingBar;
    }
}

เพียงผ่านแถบการให้คะแนนและสีของคุณโดยใช้ getResources().getColor(R.color.my_rating_color)

อย่างที่คุณเห็นฉันใช้ DrawableCompat ดังนั้นจึงเข้ากันได้แบบย้อนหลัง

แก้ไข: วิธีนี้ไม่ทำงานบน API21 (ไปคิดว่าทำไม) คุณท้ายด้วย NullPointerException เมื่อเรียกใช้ setProgressBar ฉันปิดการใช้งานวิธีการทั้งหมดใน API> = 21

สำหรับ API> = 21 ฉันใช้โซลูชัน SupperPuccio


java.lang.ClassCastException: android.support.v4.graphics.drawableDrawableWrapperHoneycomb ไม่สามารถส่งไปยัง android.graphics.drawable.LayerDrawable บน pre-lollipop
Ishaan Garg

1
@IshaanGarg คุณพูดถูก ฉันพบปัญหาเดียวกันและอัปเดตวิธีการของฉัน ฉันอัปเดตรหัสเพื่อจัดการกรณีและปัญหา ฉันไม่คิดว่ามันเป็นเรื่องของรุ่น Android หากคุณใช้แถบเรตติ้งขนาดเล็กกว่า (พร้อม style = "? android: attr / ratingBarStyleSmall") แสดงว่า drawable ที่ส่งคืนจะยังเป็น LayoutDrawable
JDenais

ใช่สิ่งที่ฉันนำมาใช้ให้แน่ใจว่าใช้ AppCompatRatingBar แม้ว่าฉันจะไม่ได้ดาวครึ่งเมื่อตั้งค่าการให้คะแนนจาก XML / java ล่วงหน้า เช่น setRating (3.5) แสดง 4 ดาวเต็ม
Ishaan Garg

1

แถบการให้คะแนนจะถูกใช้โดยอัตโนมัติในเวลาทำงานเพื่อเปลี่ยนสีของทัชสตาร์

เพิ่มสไตล์ครั้งแรกในไฟล์ app \ src \ main \ res \ values ​​\ styles.xml:

<style name="RatingBar" parent="Theme.AppCompat">
    <item name="colorControlNormal">@android:color/darker_gray</item>
    <item name="colorControlActivated">@color/com_facebook_blue</item>
</style>

จากนั้นแถบคะแนนของคุณจะเพิ่มธีมดังนี้:

<RatingBar
   android:id="@+id/rating"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:numStars="5"
   android:stepSize="1"
   android:theme="@style/RatingBar"/>

0

1) ประกาศ xml นี้

<LinearLayout 
             android:layout_width="match_parent"
        android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:orientation="horizontal"
         android:paddingLeft="20dp"
         android:paddingRight="20dp"
         android:layout_marginBottom="20dp"
         android:background="#323232"
         android:gravity="center_horizontal">

       <com.example.android.custom_ratingbar.CustomRatingBar
        android:id="@+id/coloredRatingBar5"
        style="@style/coloredRatingBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"

         />
       </LinearLayout>

2) ใน style.xml

<style name="coloredRatingBarStyleSmall">
        <item name="indicator">false</item>
        <item name="type">small</item>
    </style>

3)

import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CustomRatingBar extends View{

    private static final String TAG="ColoredRatingBar";
    private static final int NORMAL = 0;
    private static final int SMALL = 1;

    Bitmap[] drawables;
    Bitmap progressBackground;
    Context mContext;
    private int mNumStars =9;
    private float mRating =0;
    private boolean mIndicator;
    private float slidePosition;
    private int mType;

    /**
     * A callback that notifies clients when the rating has been changed. This
     * includes changes that were initiated by the user through a touch gesture
     * or arrow key/trackball as well as changes that were initiated
     * programmatically.
     */
    public interface OnRatingBarChangeListener {

        /**
         * Notification that the rating has changed. Clients can use the
         * fromUser parameter to distinguish user-initiated changes from those
         * that occurred programmatically. This will not be called continuously
         * while the user is dragging, only when the user finalizes a rating by
         * lifting the touch.
         *
         * @param ratingBar The RatingBar whose rating has changed.
         * @param rating The current rating. This will be in the range
         *            0..numStars.
         * @param fromUser True if the rating change was initiated by a user's
         *            touch gesture or arrow key/horizontal trackbell movement.
         */
        void onRatingChanged(CustomRatingBar ratingBar, float rating, boolean fromUser);

    }

    private OnRatingBarChangeListener mOnRatingBarChangeListener;

    public CustomRatingBar(Context context) {
        this(context, null);
    }
    public CustomRatingBar(Context context, AttributeSet attrs) {
        this(context, attrs,0);//R.attr.coloredRatingBarStyle
    }

    public CustomRatingBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CustomRatingBar,defStyle, 0);
        final boolean indicator = a.getBoolean(R.styleable.CustomRatingBar_indicator, false);
        final float rating = a.getFloat(R.styleable.CustomRatingBar_setrating, -1);
        final int type = a.getInt(R.styleable.CustomRatingBar_type, 0);
        a.recycle();

        setIndicator(indicator);
        setRating(rating);
        setType(type);
        init(context);
    }

    public int getType() {
        return mType;
    }

    public void setType(int type) {
        this.mType = type;
    }

    private void init(Context context) {
        mContext = context;
        Resources res = getResources();
        if(mType==SMALL){
            drawables = new Bitmap[]{BitmapFactory.decodeResource(res, R.drawable.rating_inactive),BitmapFactory.decodeResource(res, R.drawable.rating_active)};
            progressBackground = BitmapFactory.decodeResource(res, R.drawable.rating_inactive);
        }else{
            drawables = new Bitmap[]{BitmapFactory.decodeResource(res, R.drawable.rating_inactive),BitmapFactory.decodeResource(res, R.drawable.rating_active)};
            progressBackground = BitmapFactory.decodeResource(res, R.drawable.rating_inactive);
        }

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //draw empty stars bg
        for(int i=0;i< mNumStars;i++){
            drawStar(canvas,i);
        }

    }


    private void drawStar(Canvas canvas, int position) {
        float fraction = mRating -(position);
        Bitmap ratedStar1 = getRatedStar();
        Paint paint=getPaint(position);
        int division=getSize();
        Bitmap ratedStar=null;
        Bitmap emptyStar=null;
       if(!isInEditMode()){
        ratedStar=Bitmap.createScaledBitmap(ratedStar1, division, division, false);
        emptyStar=Bitmap.createScaledBitmap(progressBackground, division, division, false);
       }
        if((position)< mRating){
            if(!isInEditMode()){
           canvas.drawBitmap(ratedStar,(position* division),0,paint);
            }

        } else{

                if(!isInEditMode()){
              canvas.drawBitmap(emptyStar,(position*division),0,null);

            }
        }


    }
    private int getSize(){
        return (getWidth()/mNumStars);
    }

    private Bitmap getRatedStar() {

        if(mRating==0){
            return drawables[0];
        }
        else{
            return drawables[1];
        }
    }

    private Paint getPaint(int position){
        int value=(255*(position+1))/mNumStars;
        String hexString=Integer.toHexString(value).equals("0")?"00":Integer.toHexString(value);
        String hexvalue="#"+hexString+"000000";//FEE98E
        //Log.e("TAG", position+"/"+value+"/"+hexvalue);

        Paint paint=new Paint();

        paint.setColor(Color.parseColor(hexvalue));

        return paint;
    }

    public int getNumStars() {
        return mNumStars;
    }

    public void setNumStars(int numStars) {
        this.mNumStars = numStars;
    }

    public float getRating() {
        return mRating;
    }

    public void setRating(float rating) {
        setRating(rating,false);
    }

    void setRating(float rating,boolean fromUser) {
        if(rating>mNumStars){
            this.mRating = mNumStars;
        }
        this.mRating = rating;
        invalidate();
        dispatchRatingChange(fromUser);
    }

    public boolean isIndicator() {
        return mIndicator;
    }

    public void setIndicator(boolean indicator) {
        this.mIndicator = indicator;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (progressBackground != null) {

            final int width = progressBackground.getWidth() * mNumStars;
            final int height = progressBackground.getHeight();

            int widthSize = MeasureSpec.getSize(widthMeasureSpec);
            Bitmap emptyStar=Bitmap.createScaledBitmap(progressBackground, widthSize/mNumStars, widthSize/mNumStars, false);
            int heightSize = emptyStar.getHeight();

            setMeasuredDimension(resolveSizeAndState(widthSize, widthMeasureSpec, 0),
                    resolveSizeAndState(heightSize, heightMeasureSpec, 0));
        }
        else{
              int desiredWidth = 100;
            int desiredHeight = 50;

            int widthMode = MeasureSpec.getMode(widthMeasureSpec);
            int widthSize = MeasureSpec.getSize(widthMeasureSpec);
            int heightMode = MeasureSpec.getMode(heightMeasureSpec);
            int heightSize = MeasureSpec.getSize(heightMeasureSpec);

            int width;
            int height;

            //Measure Width
            if (widthMode == MeasureSpec.EXACTLY) {
                //Must be this size
                width = widthSize;
            } else if (widthMode == MeasureSpec.AT_MOST) {
                //Can't be bigger than...
                width = Math.min(desiredWidth, widthSize);
            } else {
                //Be whatever you want
                width = desiredWidth;
            }

            //Measure Height
            if (heightMode == MeasureSpec.EXACTLY) {
                //Must be this size
                height = heightSize;
            } else if (heightMode == MeasureSpec.AT_MOST) {
                //Can't be bigger than...
                height = Math.min(desiredHeight, heightSize);
            } else {
                //Be whatever you want
                height = desiredHeight;
            }

            //MUST CALL THIS
          setMeasuredDimension(resolveSizeAndState(width, widthMeasureSpec, 0),resolveSizeAndState(height, heightMeasureSpec, 0));
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if(mIndicator){
            return false;
        }

        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                break;
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_UP:
                slidePosition = getRelativePosition(event.getX());

                int newRating = (int)(slidePosition>0?slidePosition+1:0) ;
                if(newRating>mNumStars){
                    newRating=mNumStars;
                }

             //   Log.e("TAG", ""+newRating);
                if (newRating != mRating) {
                    setRating(newRating,true);
                }
                break;
            case MotionEvent.ACTION_CANCEL:
                break;
            default:
                break;
        }

        return true;
    }

    private float getRelativePosition(float x) {
        Bitmap emptyStar=Bitmap.createScaledBitmap(progressBackground, getWidth()/mNumStars, getWidth()/mNumStars, false);
        int widthSize = emptyStar.getWidth();
      //  Log.e("TAG", widthSize+"/"+x);
         float position = x / widthSize;
       position = Math.max(position, 0);
       return Math.min(position, mNumStars);
    }

    /**
     * Sets the listener to be called when the rating changes.
     *
     * @param listener The listener.
     */
    public void setOnRatingBarChangeListener(OnRatingBarChangeListener listener) {
        mOnRatingBarChangeListener = listener;
    }

    /**
     * @return The listener (may be null) that is listening for rating change
     *         events.
     */
    public OnRatingBarChangeListener getOnRatingBarChangeListener() {
        return mOnRatingBarChangeListener;
    }

    void dispatchRatingChange(boolean fromUser) {
        if (mOnRatingBarChangeListener != null) {
            mOnRatingBarChangeListener.onRatingChanged(this, getRating(),
                    fromUser);
        }
    }
}


5) then in calling activity---

CustomRatingBar coloredRatingBar5=(CustomRatingBar)findViewById(R.id.coloredRatingBar5);
        coloredRatingBar5.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {

            @Override
            public void onRatingChanged(CustomRatingBar ratingBar, float rating,boolean fromUser) {
                // TODO Auto-generated method stub
                Log.e("RATING", ""+rating);

            }
        });

6) การให้คะแนนใช้งาน --- ถ่ายภาพที่มีสีเข้มเพราะมันจะถูกใช้เป็นสีโปร่งใสสำหรับการให้คะแนนที่แตกต่างกัน

rating_inactive - ถ่ายภาพที่มีขนาดเท่ากันของภาพด้านบนที่มีพื้นหลังสีอ่อน .. จะใช้เมื่อไม่มีการเลือกระดับความสำคัญ


0

วิธีที่ง่ายมากในการเปลี่ยนสีเส้นขอบของดวงดาวคือการใช้พารามิเตอร์ xml:

android:progressBackgroundTint=""

ในมุมมอง ratingBar ค่าควรเป็นรหัสเลขฐานสิบหกสำหรับสี


ฉันไม่รู้ว่าทำไม แต่ดูเหมือนว่าวิธีการของคุณมีผลเฉพาะกับขอบของดาว (สีเติมยังคงเป็นสีเริ่มต้น)
superpuccio

ตกลงคุณพลาด xml params บางตัว ตรวจสอบคำตอบของฉันที่นี่ด้านล่าง
superpuccio

1
คุณถูก. ฉันไม่รู้ว่าทำไมฉันจึงคิดว่าเขามีปัญหาในการเปลี่ยนสีเส้นขอบของดาว (อาจเป็นเพราะถ้าฉันมีปัญหา) คำตอบของคุณสมบูรณ์มากขึ้น
โปอาร์แลนดิสมาร์ติเนซ

0

ฉันกำลังมองหาวิธีที่เชื่อถือได้ในการทำเช่นนี้ไปจนถึง API 9 อย่างน้อย การแก้ปัญหา "แคสติ้งสู่ LayerDrawble" ดูเหมือนจะเป็นวิธีที่มีความเสี่ยงสำหรับฉันและเมื่อฉันทดสอบบนโทรศัพท์ Android บน 2.3 มันใช้งานได้สำเร็จ แต่การเรียกใช้ DrawableCompat.setTint (... ) ไม่มีผลใด ๆ

ความจำเป็นในการโหลดสินทรัพย์ที่เบิกได้ไม่ได้เป็นวิธีแก้ปัญหาที่ดีสำหรับฉันเช่นกัน

ฉันตัดสินใจเขียนโค้ดโซลูชันของตัวเองซึ่งเป็นคลาสที่ขยาย AppCompatRatingBar โดยใช้ Drawable ที่กำหนดเองเพื่อดูแลการวาดดาวโดยทางโปรแกรม มันทำงานได้อย่างสมบูรณ์แบบสำหรับความต้องการของฉันฉันจะโพสต์ไว้ในกรณีที่ช่วยได้:

https://gist.github.com/androidseb/2b8044c90a07c7a52b4bbff3453c8460

ลิงค์นั้นง่ายกว่าเพราะคุณสามารถรับไฟล์ได้โดยตรง แต่นี่เป็นรหัสเต็มในกรณี:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.graphics.PointF;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.AppCompatRatingBar;
import android.util.AttributeSet;

/**
 * @author androidseb
 *         <p/>
 *         Extends AppCompatRatingBar with the ability to tint the drawn stars when selected, pressed and un-selected.
 *         Limitation: Only draws full stars.
 */
public class TintableRatingBar extends AppCompatRatingBar {
    private TintableRatingBarProgressDrawable progressDrawable;

    public TintableRatingBar(final Context context) {
        super(context);
        init();
    }

    public TintableRatingBar(final Context context, final AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public TintableRatingBar(final Context context, final AttributeSet attrs, final int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        progressDrawable = new TintableRatingBarProgressDrawable();
        setProgressDrawable(progressDrawable);
    }

    public void setCustomTintColors(final int _uncheckedColor, final int _pressedColor, final int _checkedColor) {
        progressDrawable.setRatingMaxLevelValue(getMax() * 1000);
        progressDrawable.setUnCheckedColor(_uncheckedColor);
        progressDrawable.setPressedColor(_pressedColor);
        progressDrawable.setCheckedColor(_checkedColor);
        invalidate();
    }

    public class TintableRatingBarProgressDrawable extends Drawable {
        private static final int STAR_COUNT = 5;
        private static final int STAR_BRANCHES_COUNT = 5;

        /** Sets the max level value: if the level is at the max, then all stars are selected. */
        private int ratingMaxLevelValue = 10000;
        /** Color to be painted for unselected stars */
        private int uncheckedColor = Color.GRAY;
        /** Color to be painted for unselected stars when the ratingbar is pressed */
        private int pressedColor = Color.CYAN;
        /** Color to be painted for selected stars */
        private int checkedColor = Color.BLUE;

        @Override
        public void setAlpha(final int _i) {
        }

        @Override
        public void setColorFilter(final ColorFilter _colorFilter) {
        }

        @Override
        public boolean isStateful() {
            return true;
        }

        @Override
        public boolean setState(final int[] stateSet) {
            final boolean res = super.setState(stateSet);
            invalidateSelf();
            return res;
        }

        @Override
        public int getOpacity() {
            return 255;
        }

        public void setRatingMaxLevelValue(final int _ratingMaxLevelValue) {
            ratingMaxLevelValue = _ratingMaxLevelValue;
        }

        public void setUnCheckedColor(final int _uncheckedColor) {
            uncheckedColor = _uncheckedColor;
        }

        public void setPressedColor(final int _pressedColor) {
            pressedColor = _pressedColor;
        }

        public void setCheckedColor(final int _checkedColor) {
            checkedColor = _checkedColor;
        }

        @Override
        public void draw(final Canvas _canvas) {
            boolean pressed = false;
            for (int i : getState()) {
                if (i == android.R.attr.state_pressed) {
                    pressed = true;
                }
            }

            final int level = (int) Math.ceil(getLevel() / (double) ratingMaxLevelValue * STAR_COUNT);
            final int starRadius = Math.min(getBounds().bottom / 2, getBounds().right / STAR_COUNT / 2);

            for (int i = 0; i < STAR_COUNT; i++) {
                final int usedColor;
                if (level >= i + 1) {
                    usedColor = checkedColor;
                } else if (pressed) {
                    usedColor = pressedColor;
                } else {
                    usedColor = uncheckedColor;
                }
                drawStar(_canvas, usedColor, (i * 2 + 1) * starRadius, getBounds().bottom / 2, starRadius,
                    STAR_BRANCHES_COUNT);
            }
        }

        private void drawStar(final Canvas _canvas, final int _color, final float _centerX, final float _centerY,
            final float _radius, final int _branchesCount) {
            final double rotationAngle = Math.PI * 2 / _branchesCount;
            final double rotationAngleComplement = Math.PI / 2 - rotationAngle;
            //Calculating how much space is left between the bottom of the star and the bottom of the circle
            //In order to be able to center the star visually relatively to the square when drawn
            final float bottomOffset = (float) (_radius - _radius * Math.sin(rotationAngle / 2) / Math.tan(
                rotationAngle / 2));
            final float actualCenterY = _centerY + (bottomOffset / 2);
            final Paint paint = new Paint();
            paint.setColor(_color);
            paint.setStyle(Style.FILL);
            final Path path = new Path();
            final float relativeY = (float) (_radius - _radius * (1 - Math.sin(rotationAngleComplement)));
            final float relativeX = (float) (Math.tan(rotationAngle / 2) * relativeY);
            final PointF a = new PointF(-relativeX, -relativeY);
            final PointF b = new PointF(0, -_radius);
            final PointF c = new PointF(relativeX, -relativeY);
            path.moveTo(_centerX + a.x, actualCenterY + a.y);
            _canvas.save();
            for (int i = 0; i < _branchesCount; i++) {
                path.lineTo(_centerX + b.x, actualCenterY + b.y);
                path.lineTo(_centerX + c.x, actualCenterY + c.y);
                rotationToCenter(b, rotationAngle);
                rotationToCenter(c, rotationAngle);
            }
            _canvas.drawPath(path, paint);
            _canvas.restore();
        }

        private void rotationToCenter(final PointF _point, final double _angleRadian) {
            final float x = (float) (_point.x * Math.cos(_angleRadian) - _point.y * Math.sin(_angleRadian));
            final float y = (float) (_point.x * Math.sin(_angleRadian) + _point.y * Math.cos(_angleRadian));
            _point.x = x;
            _point.y = y;
        }
    }
}

0

คำตอบช้าไปหน่อย แต่ฉันหวังว่ามันจะช่วยให้คนบางคน

<RatingBar
         android:id="@+id/rating"
         style="@style/Base.Widget.AppCompat.RatingBar.Small"
         android:theme="@style/WhiteRatingStar"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@+id/profil_name"
         android:layout_centerHorizontal="true"
         android:layout_marginLeft="@dimen/dimen_4"
         android:rating="3" />

และนี่คือลักษณะของ WhiteRatingStar

<style name="WhiteRatingStar" parent="Base.Widget.AppCompat.RatingBar.Small">
     <item name="colorAccent">@android:color/white</item>
</style>

ด้วยสิ่งนี้ดาวจะมีสีขาวเช่น



-1

ดังที่คำตอบก่อนหน้าบ่งบอกถึงมันไม่ใช่เรื่องง่ายที่จะเปลี่ยนสีของแถบคะแนน ดวงดาวไม่ได้ถูกวาดโดยโปรแกรม แต่เป็นภาพที่มีขนาดคงที่และการไล่ระดับสีเฉพาะ หากต้องการเปลี่ยนสีคุณต้องสร้างภาพดาวของคุณเองด้วยสีที่แตกต่างกันจากนั้นดำเนินการสร้างทรัพยากร XML ที่คุณสามารถวาดได้เองและส่งไปยังคลาส RatingsBar โดยใช้ setProgressDrawable (Drawable d) หรือ XML แอตทริบิวต์ android: progressDrawable

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.