ฉันจะลดขนาดของ Ratingbar ได้อย่างไร


129

ในกิจกรรมของฉันฉันมีบาร์คะแนนบางส่วน แต่ขนาดของบาร์นี้ใหญ่มาก! ฉันจะทำให้มันเล็กลงได้อย่างไร

แก้ไข

ขอบคุณ Gabriel Negut ฉันทำมันด้วยรูปแบบต่อไปนี้:

<RatingBar
style = "?android:attr/ratingBarStyleSmall"
android:numStars = "5"
android:rating   = "4" />

ตอนนี้ขนาดลดลง แต่จำนวนดาวและเรทติ้งไม่มีผล !!! ทำไม? ฉันมี 7 ดาวที่เลือกไว้ 6 แห่ง


คุณหมายถึง Seekbar หรือเปล่า การตั้งค่าความสูงและความกว้างใช้งานได้ดีสำหรับฉัน คุณช่วยโพสต์โค้ดของคุณที่นี่ได้ไหม?
Shailendra Singh Rajawat

ฉันอยากจะแนะนำให้ลบ "แก้ไข" และทำให้มันเป็นคำตอบที่ยอมรับได้ นั่นหรือ @GabrielNegut สามารถแก้ไขคำตอบของเขาเพื่อรวมโซลูชันประเภทนั้น รวมถึงการแก้ปัญหาในรูปแบบของคำถามที่นำออกไปจากประสบการณ์ถาม - ตอบ
onebree

1
style="?android:attr/ratingBarStyleSmall"ทำงานได้สำหรับฉัน
มูฮัมหมัดชาห์ซาด

คำตอบ:


163

ลิงก์เดิมที่ฉันโพสต์เสียแล้ว (มีเหตุผลที่ดีว่าทำไมการโพสต์ลิงก์เท่านั้นไม่ใช่วิธีที่ดีที่สุดในการไป) คุณต้องเลือกสไตล์RatingBarด้วยratingBarStyleSmallสไตล์ที่กำหนดเองหรือสืบทอดมาWidget.Material.RatingBar.Small(สมมติว่าคุณใช้การออกแบบวัสดุในแอปของคุณ)

ตัวเลือกที่ 1:

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

ตัวเลือก 2:

// styles.xml
<style name="customRatingBar"   
    parent="android:style/Widget.Material.RatingBar.Small">
    ... // Additional customizations
</style>

// layout.xml
<RatingBar
    android:id="@+id/ratingBar"
    style="@style/customRatingBar"
    ... />

21
หรือใช้ style style = "? android: attr / ratingBarStyleSmall" จะลดขนาดลง
Mightian

1
แต่มีช่องว่างภายในเสริมที่ไร้ประโยชน์อยู่ทางด้านขวา! จะลบออกได้อย่างไร!
Dr.jacky

หมายเหตุ: make width = "wrap_content" เพื่อกำจัดดาวพิเศษ
hkchakladar

72

นี่เป็นวิธีแก้ปัญหาของฉันหลังจากพยายามดิ้นรนเพื่อลดเรตติ้งบาร์ในขนาดที่เล็กโดยไม่ต้องมีช่องว่างภายในที่น่าเกลียด

 <RatingBar
        android:id="@+id/listitemrating"
        style="@android:attr/ratingBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleX=".5"
        android:scaleY=".5"
        android:transformPivotX="0dp"
        android:transformPivotY="0dp"
        android:isIndicator="true"
        android:max="5" />

3
ฉันลงชื่อเข้าใช้เพื่ออัปเกรดคำตอบของคุณเกี่ยวกับการใช้ transformPivot เพื่อลดปัญหาช่องว่างภายในไม่สม่ำเสมอ ขอบคุณ!
imin

ในที่สุดไม่มีช่องว่างภายในเพิ่มเติม !!
Uday

คำตอบที่ยอดเยี่ยม! ขอบคุณ!
valerybodak

1
ปรับแนวการจัดแนวของมุมมองพี่น้องและความไม่สมดุลของระยะห่างและระยะห่าง
Prateek Gupta

63

หากคุณต้องการแสดงแถบเรตติ้งขนาดเล็กให้คัดลอกและวางรหัสนี้ในโครงการของคุณ

  <RatingBar
    android:id="@+id/MyRating"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/getRating"
    android:isIndicator="true"
    android:numStars="5"
    android:stepSize="0.1" />

3
android คืออะไร: stepSize = "0.1"?
ดาร์วิน


ตรวจสอบ asnwer ของฉันที่ส่วนท้ายของหน้านี้
พัฒนา

@ HammadTariqSahi เป็นเรื่องที่ดีรักษามันไว้ แต่มีปัญหาอะไรบ้างในรหัสของฉัน? แจ้งให้เราทราบหากมีสิ่งใดโปรด
Pir Fahim Shah

@PirFahimShah ขอขอบคุณคุณยังไม่ได้ตรวจสอบรหัสนี้ คุณสามารถปรับปรุงและจัดสไตล์บาร์การจัดอันดับหากคุณทำตามวิธีการนั้น
พัฒนา

42

คุณสามารถตั้งค่าในรหัส XML สำหรับRatingBar, ใช้scaleXและscaleYเพื่อปรับให้สอดคล้อง "1.0" จะเป็นขนาดปกติและทุกอย่างใน ".0" จะลดขนาดลงและสิ่งใดที่มากกว่า "1.0" จะเพิ่มขึ้น

<RatingBar
  android:id="@+id/ratingBar1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:scaleX="0.5"
  android:scaleY="0.5" />

14
ปัญหาเกี่ยวกับสิ่งนี้คือแถบการจัดอันดับยังคงใช้ความกว้างและความสูงเท่าเดิมแม้ว่าไอคอนจะเล็กกว่าก็ตาม สิ่งนี้ทำให้เกิดปัญหาการจัดตำแหน่งเนื่องจากมีช่องว่างภายในซ้ายและขวาถัดจากไอคอนแรกและไอคอนสุดท้าย ตัวอย่างเช่นหากคุณต้องการไอคอนของคุณเช่น "XXXXX" หลังจากปรับขนาดแล้วจะมีลักษณะเช่นนี้ "----- XXXXX -----" โดยที่ "-" เป็นพื้นที่ว่างและ "X" เป็นไอคอน . ดังนั้นแถบเรตติ้งของคุณจะดูเหมือนถูกผลักไปทางขวาเพราะพื้นที่ว่างเปล่า
theDazzler

1
ฉันเดาว่าคุณใช้เค้าโครงที่สัมพันธ์กัน มันเจ็บปวด แต่คุณสามารถปรับแต่งมันให้อยู่ในตำแหน่งที่ถูกต้องโดยใช้ android:layout_marginRight และชอบเพื่อให้ได้ตามที่คุณต้องการ
ZeWolfe15

4
เพื่อให้ได้ขนาดโดยไม่ต้องสร้างช่องว่างในการเพิ่มหุ่นยนต์ซ้าย: transformPivotX = "0dp"
ดาร์วิน

37

ตัวอย่างด้านล่างทำงานให้ฉันเพื่อปรับขนาดเรตติ้งบาร์

<RatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/ratingBar"
    style="?android:attr/ratingBarStyleIndicator"
    android:scaleX=".5"
    android:rating="3.5"
    android:scaleY=".5"
    android:transformPivotX="0dp"
    android:transformPivotY="0dp"
    android:max="5"/>

ป้อนคำอธิบายรูปภาพที่นี่


2
วิธีการเปลี่ยนสีแถบการให้คะแนนสำหรับการเติมแถบครึ่งนี้การเติมเต็มและสีที่ว่างเปล่า
Ganpat Kaliya

พารามิเตอร์การจัดเรตใช้เพื่อเติมแถบเรตติ้งใช่ไหม? ฉันใช้ android: rating = "3.5" ดังนั้นเต็มไป 3.5 ดาว คุณสามารถตั้งค่าได้ถึง 5 เพราะตั้งค่า max = 5 ใน xml หากคุณต้องการเปลี่ยนสีของแถบการให้คะแนนคุณต้องสร้างสไตล์ใน style.xml ดูที่ลิงค์นี้: stackoverflow.com/a/35914622/2915785
Ahmad

วิธีการ android: transformPivotX = "0dp" android: transformPivotY = "0dp" โดยทางโปรแกรม?
Salman Khakwani

1
@NaveedAhmad แต่มีช่องว่างภายในที่ไร้ประโยชน์! จะลบออกได้อย่างไร!
Dr.jacky

@ Mr.Hyde ตรวจสอบรูปแบบของ raringbar stackoverflow.com/a/24407907/2915785
อาเหม็ด Naveed

10

ตัวอย่างการทำงาน

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

และเพิ่มลงในไฟล์สไตล์ xml ของคุณ

<style name="RatingBar"   
parent="android:style/Widget.Material.RatingBar.Small">
<item name="colorControlNormal">@color/primary_light</item>
<item name="colorControlActivated">@color/primary_dark</item>
</style>

วิธีนี้คุณไม่จำเป็นต้องปรับแต่งเรทบาร์


9

ตรวจสอบคำตอบของฉันที่นี่ วิธีที่ดีที่สุดเพื่อให้บรรลุมัน

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

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

5
คุณช่วยอธิบายเกี่ยวกับวิธีการแก้ปัญหาได้ไหม?
onebree

สิ่งนี้ไม่อนุญาตให้มีRatingBarการเปลี่ยนแปลง
CopsOnRoad

3

หากคุณใช้แถบการให้คะแนนใน Linearlayout กับ weightSum โปรดตรวจสอบให้แน่ใจว่าคุณไม่ควรกำหนด layout_weight สำหรับแถบการให้คะแนน แต่ให้แถบอันดับนั้นวางไว้ภายในเค้าโครงที่สัมพันธ์กันและให้น้ำหนักกับเค้าโครงที่เกี่ยวข้องแทน ทำให้เนื้อหาตัดความกว้างของแถบการจัดอันดับ

<RelativeLayout
    android:layout_width="0dp"
    android:layout_weight="30"
    android:layout_gravity="center"
    android:layout_height="wrap_content">
        <RatingBar
            android:id="@+id/userRating"
            style="@style/Widget.AppCompat.RatingBar.Small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:stepSize="1" />
</RelativeLayout>

3

ใช้Widget.AppCompat.RatingBarคุณมี 2 รูปแบบที่จะใช้; IndicatorและSmallสำหรับขนาดใหญ่และขนาดเล็กตามลำดับ ดูตัวอย่างด้านล่าง

<RatingBar
    android:id="@+id/rating_star_value"
    style="@style/Widget.AppCompat.RatingBar.Small"
    ... />

2

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

android:layout_width="wrap_content"
android:layout_height="wrap_content"

1
ใช้สไตล์นี้ style = "? android: attr / ratingBarStyleSmall" จะลดขนาดลง
Mightian



0

สำหรับผู้ที่สร้างแถบเรตติ้งโดยทางโปรแกรมและต้องการตั้งค่าแถบเรตติ้งขนาดเล็กแทนแถบเรตติ้งขนาดใหญ่เริ่มต้น

    LinearLayout generateRatingView (ค่าลอยตัว) ส่วนตัว {
        LinearLayout linearLayoutRating = ใหม่ LinearLayout (getContext ());
        linearLayoutRating.setLayoutParams (TableRow.LayoutParams ใหม่ (TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT));
        linearLayoutRating.setGravity (Gravity.CENTER);
        RatingBar ratingBar = ใหม่ RatingBar (getContext (), null, android.R.attr.ratingBarStyleSmall);
        ratingBar.setEnabled (false);
        ratingBar.setStepSize (Float.parseFloat ("0.5")); // สำหรับการเปิดใช้งานครึ่งดาว
        ratingBar.setNumStars (5)
        ratingBar.setRating (คุ้มค่า);
        linearLayoutRating.addView (ratingBar);
        ส่งกลับ linearLayoutRating;
    }


0
 <RatingBar     android:id="@+id/id_tv_rating_bar"
                style="@style/Widget.AppCompat.RatingBar.Small"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/_20sdp"
                android:layout_marginLeft="@dimen/_80sdp"
                android:numStars="5"
                android:paddingTop="@dimen/_5sdp"
                android:rating="5" />

เพียงใช้style="@style/Widget.AppCompat.RatingBar.Small"มันจะได้ผลแน่นอน!


0

สิ่งนี้ได้ผลสำหรับฉัน
ตรวจสอบภาพนี้

            android:id="@+id/ratingBar"
            style="?android:attr/ratingBarStyleIndicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numStars="5"
            android:scaleX=".8"
            android:scaleY=".8"
            android:stepSize="0.5"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.543"
            app:layout_constraintStart_toEndOf="@+id/title"
            app:layout_constraintTop_toTopOf="parent" />
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.