Bagaimana cara membuat RatingBar yang lebih kecil?


134

Saya telah menambahkan RatingBar dalam tata letak:

<RatingBar 
    android:id="@+id/ratingbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:numStars="5"
    android:stepSize="1.0"
    />  

Tetapi gaya default untuk bilah peringkat terlalu besar.
Saya mencoba mengubahnya dengan menambahkan gaya android:style="?android:attr/ratingBarStyleSmall"

Tetapi hasilnya terlalu kecil dan tidak mungkin untuk menetapkan tarif dengan properti ini.

Bagaimana saya bisa melakukannya?

Jawaban:


106

Widget RatingBar default agak payah.

Sumber merujuk pada gaya " ?android:attr/ratingBarStyleIndicator" selain " ?android:attr/ratingBarStyleSmall" yang sudah Anda kenal. ratingBarStyleIndicatorsedikit lebih kecil tetapi masih cukup jelek dan komentar mencatat bahwa gaya ini "tidak mendukung interaksi".

Anda mungkin lebih baik melakukannya sendiri. Ada panduan yang tampak lumayan di http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/ menunjukkan bagaimana melakukan ini. (Saya belum melakukannya sendiri, tetapi akan mencoba dalam satu atau dua hari.)

Semoga berhasil!

ps Maaf, saya akan memposting link ke sumber untuk Anda lihat-lihat, tetapi saya adalah pengguna baru dan tidak dapat memposting lebih dari 1 URL. Jika Anda menggali jalan Anda melalui pohon sumber, itu terletak di frameworks / base / core / java / android / widget / RatingBar.java


Jauh lebih baik untuk menggunakan? Android: attr / ratingBarStyleSmall dan setel tema peringkat global tetapi tidak menggunakan nama tema yang tepat, terima kasih banyak;)
Tsung Goh

7
jika kita menyetel properti indikator android: isIndicator = "false" maka kita akan berinteraksi dengannya ..
Mayur R. Amipara

The docs menyiratkan ratingBarStyleSmall adalah lebih kecil dari dua. Saya pikir komentar Anda mundur.
AdamMc331

5
Tautan rusak.
Denny

Konten @Denny tersedia dari Google Cache . Saya tidak memperbarui postingan dengan konten karena saya sudah bertahun-tahun tidak melihat bilah peringkat Android, dan saya tidak yakin apakah konten di tautan itu masih valid.
Farray

195

Cara merekatkan kode yang diberikan di sini ...

Langkah 1. Anda membutuhkan bintang peringkat Anda sendiri di res/drawable...

Bintang penuh

Bintang kosong

Langkah-2 Dalam res/drawableAnda perlu ratingstars.xmlsebagai berikut ...

<?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>

Langkah-3 Dalam res/valuesAnda perlu styles.xmlsebagai berikut ...

<?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>

Langkah-4 Dalam tata letak Anda ...

<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
Bukankah ini: <item android: id = "@ + android: id / secondaryProgress" android: drawable = "@ drawable / star_empty" /> be "@ drawable / star_half" /> atau apa pun namanya?
StackOverflowed

8
Terima kasih banyak. Namun, hanya komentar kecil: Anda tidak perlu gambar setengah bintang. Ini akan dibuat secara otomatis berdasarkan kemajuan.
Boris Strandjev

1
@Vlad Baca baris pertama jawaban yang saya sebutkan dari mana saya mendapatkan ini.
Vaibhav Jani

4
berfungsi dengan sempurna :) tetapi saya mendapat 2 masalah .. numStars tidak berfungsi lagi, dan saya tidak bisa membuatnya sedikit lebih besar meskipun saya menyetel lebar maks dan min
Ahmad Dwaik 'Warlock'

1
Terima kasih @PiedPiper - ini menghemat banyak waktu saya !! Penjelasan terbaik yang pernah ada!
Edmond Tamas

70

Gunakan saja:

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

Ubah faktor skala sesuai kebutuhan Anda.

Untuk menskalakan tanpa membuat padding di sebelah kiri juga tambahkan

android:transformPivotX="0dp"

scaleX scaleY bagus tapi meninggalkan padding yang jelek, jika Anda bisa menghilangkan padding itu akan menjadi jawaban sempurna termudah
Ahmad Dwaik 'Warlock'

juga, mereka membutuhkan Android 3.0 / API 11
averasko

6
Saya menyelesaikan padding jelek (kanan) dengan codeandroid:scaleX="0.75" android:scaleY="0.75" android:layout_marginRight="-25dp"
hannes ach

1
Meskipun itu terlihat seperti solusi termudah, itu tidak berhasil untuk saya. Untuk beberapa alasan tidak ada efek. Apakah karena saya menggunakan Android 5.x?
Nautilus

Anda dapat menghapus beberapa bantalan tambahan dengan menentukan tinggi bilah peringkat, misalnya:android:layout_height="40dp"
Manohar Reddy

43

Tidak perlu menambahkan pendengar ke ?android:attr/ratingBarStyleSmall. Cukup tambahkan android:isIndicator=falsedan itu akan menangkap peristiwa klik, misalnya

<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 adalah kuncinya!
ikan mati

19

yang kecil diterapkan oleh OS

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

2
Bilah peringkat tidak dapat diklik saat memberikan kode di atas.
Sharath

16

terapkan ini.

<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
Meski secara visual bagus. klik acara yang tidak bekerja pada solusi ini. apakah Anda punya perbaikan untuk ini?
Gökhan Barış Aker

4
jika Anda ingin klik berfungsi, gunakan android: isIndicator = "false"
D4rWiNS

15

Saya menemukan solusi yang lebih mudah daripada yang saya pikirkan diberikan oleh yang di atas dan lebih mudah daripada menggulung solusi Anda sendiri. Saya hanya membuat bar peringkat kecil, lalu menambahkan onTouchListener padanya. Dari sana saya menghitung lebar klik dan menentukan jumlah bintang dari itu. Setelah menggunakan ini beberapa kali, satu-satunya kekhasan yang saya temukan adalah bahwa gambar bilah peringkat kecil tidak selalu muncul tepat di tabel kecuali saya melampirkannya dalam LinearLayout (terlihat tepat di editor, tetapi tidak perangkatnya) . Bagaimanapun, dalam tata letak saya:

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

dan dalam aktivitas saya:

    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; 
        } 
    });

Saya harap ini membantu orang lain. Jelas lebih mudah daripada menggambar sendiri (meskipun saya telah menemukan itu juga berfungsi, tetapi saya hanya ingin penggunaan bintang yang mudah).


Ini berhasil, dan mudah ... tetapi ratingBarStyleSmallbintang-bintangnya terlalu kecil untuk bisa berguna. Saya pikir saya harus menggulung sendiri untuk mendapatkan bintang berukuran sedang.
Beer Me

6
 <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>

// tambahkan baris ini untuk bilah peringkat kecil

style = "?android:attr/ratingBarStyleSmall"

Meskipun potongan kode ini dapat menjadi solusinya, menyertakan penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa mendatang, dan orang-orang itu mungkin tidak tahu alasan saran kode Anda.
Johan

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

3

meskipun jawaban Farry berfungsi, untuk perangkat Samsung RatingBar mengambil warna biru acak alih-alih yang saya tentukan. Jadi gunakan

style="?attr/ratingBarStyleSmall"

sebagai gantinya.

Kode lengkap cara menggunakannya:

<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

Jawaban terbaik yang saya dapat

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

pengguna seperti ini

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

Kenaikan / Penurunan ukuran dengan menggunakan scaleX dan ScaleY nilai


3

Jawaban Terbaik untuk ratingbar kecil

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

2

Gunakan Kode Ini

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

1

gunakan kode berikut untuk bar peringkat kecil dengan acara 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

Setelah banyak penelitian, saya menemukan solusi terbaik untuk mengurangi ukuran bilah peringkat khusus adalah dengan mendapatkan ukuran kemajuan yang dapat digambar dalam ukuran tertentu seperti yang disebutkan di bawah ini:

xxhdpi - 48 * 48 piksel

xhdpi - 36 * 36 px

hdpi - 24 * 24 piksel

Dan dengan gaya, letakkan minheight dan maxheight sebagai 16 dp untuk semua Resolusi.

Beri tahu saya jika ini tidak membantu Anda mendapatkan rating bar ukuran kecil terbaik karena ukuran ini menurut saya sangat kompatibel dan setara dengan atribut gaya ratingbar.small.


0

Ini bekerja untuk saya di bar peringkat xml style = "? Android: attr / ratingBarStyleSmall" tambahkan this.it akan berhasil.


-4

Saya memecahkan masalah ini sebagai berikut: style = "? Android: attr / ratingBarStyleSmall"


Inilah yang telah dicoba oleh OP dan jawaban lain telah disebutkan.
Pang
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.