RatingBar

Методы
Пример с RatingBar
Собственный вид

Компонент RatingBar показывает значение рейтинга в виде звёздочек. Можно установить рейтинг касанием пальца или с помощью клавиш курсора, используя заранее заданное количество звёздочек.

RatingBar находится в разделе Widgets.

Класс RatingBar наследуется от классов AbsSeekBar и ProgressBar.

Для установки количества звёзд в режиме дизайна используется атрибут android:numStars.

Методы

Для компонента RatingBar используются следующие методы:

• setNumStart(int) - устанавливает число звёздочек
• getRating() - возвращает значение рейтинга
• setRating(float) - устанавливает значение рейтинга
• isIndicator() - устанавливает в режим для чтения без возможности установить рейтинг пользователем
• setStepSize(float) - устанавливает шаг приращения рейтинга

Для отслеживания изменения рейтинга существует интерфейс OnRatingBarChangeListener.

У компонента есть два встроенных стиля ratingBarStyleSmall (маленькие звёздочки) и ratingBarStyleIndicator (большие звёзды), которые работают только в режиме индикатора, т.е. пользователь не может их изменять. Рассмотрим пример.

Пример с RatingBar

Расположим на экране три компонента RatingBar с разными стилями.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

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

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

</LinearLayout>

Переходим к программной части.

// Если этот код работает, его написал Александр Климов,
// а если нет, то не знаю, кто его писал.

package ru.alexanderklimov.ratingbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.RatingBar;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("RatingBar");

        final RatingBar smallRatingBar = (RatingBar) findViewById(R.id.ratingBar_small);
        final RatingBar indicatorRatingBar = (RatingBar) findViewById(R.id.ratingBar_indicator);
        final RatingBar defaultRatingBar = (RatingBar) findViewById(R.id.ratingBar_default);

        defaultRatingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {

            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating,
                                        boolean fromUser) {
                smallRatingBar.setRating(rating);
                indicatorRatingBar.setRating(rating);

                Toast.makeText(MainActivity.this, "рейтинг: " + String.valueOf(rating),
                        Toast.LENGTH_LONG).show();
            }
        });
    }
}

Запускаем приложение, тыкаем лапкой в звёздочки в третьем ряду. Обратите внимание, что если коснуться левой части звезды, то можно установить половинку рейтинга. Благодаря методу onRatingBarChanged(), мы можем отслеживать изменения рейтинга и устанавливать такое же значение у рейтингов-индикаторов.

Подобный элемент управления можно использовать в приложениях, где требуется оценка чего-либо: музыкального альбома, кулинарного рецепта, степень пушистости кота и т.д.

Внешний вид на разных устройствах может различаться. Можно применить стили для Material Design. Мы установим свои цвета для примера (styles.xml).

<style name="MyRatingBar" parent="Theme.AppCompat">
    <item name="colorControlNormal">@android:color/holo_green_light</item>
    <item name="colorControlActivated">@android:color/holo_orange_dark</item>
</style>

Присоединяем к компоненту через атрибут темы.

<RatingBar
    ...
    android:theme="@style/MyRatingBar" />

Первое свойство отвечает за цвет в нормальном режиме (зелёный), второй - во время нажатия (оранжевый).

Собственный вид

Если вы не хотите использовать звёздочки для оценки рейтинга, то можете нарисовать собственные картинки и внедрить их с помощью стилей. Например, коты предпочитают видеть в качестве рейтинга лапу. Давайте им поможем.

Подготовим две картинки (тёмную и светлую) для двух состояний и поместим их в папку res/drawable. На самом деле их должно быть больше, но мы упростим пример.

Поместим в папку res/values/ файл с описанием стиля.

res/values/stylebar.xml

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

    <style name="CustomRatingBar" parent="@android:style/Widget.RatingBar">
        <item name="android:progressDrawable">@drawable/custom_ratingbar</item>
        <item name="android:minHeight">32dip</item>
        <item name="android:maxHeight">32dip</item>
    </style>

</resources>

Далее в папке res/drawable разместим три xml-файла, которые будут отвечать за внешний вид нашего RatingBar.

res/drawable/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/custom_ratingbar_empty"/>
    <item
        android:id="@+android:id/secondaryProgress"
        android:drawable="@drawable/custom_ratingbar_empty"/>
    <item
        android:id="@+android:id/progress"
        android:drawable="@drawable/custom_ratingbar_filled"/>

</layer-list>

res/drawable/custom_ratingbar_empty.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/paw_off" android:state_pressed="true" android:state_window_focused="true"/>
    <item android:drawable="@drawable/paw_off" android:state_focused="true" android:state_window_focused="true"/>
    <item android:drawable="@drawable/paw_off" android:state_selected="true" android:state_window_focused="true"/>
    <item android:drawable="@drawable/paw_off"/>

</selector>

res/drawable/custom_ratingbar_filled.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/paw_on" android:state_pressed="true" android:state_window_focused="true"/>
    <item android:drawable="@drawable/paw_on" android:state_focused="true" android:state_window_focused="true"/>
    <item android:drawable="@drawable/paw_on" android:state_selected="true" android:state_window_focused="true"/>
    <item android:drawable="@drawable/paw_on"/>

</selector>

Осталось разместить лапочки на экране:

<RatingBar
    android:id="@+id/ratingbar"
    style="@style/CustomRatingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Запускаем проект и смотрим на результат:

Дополнительное чтение

AlertDialog с рейтингом

ome450901/SimpleRatingBar: A simple RatingBar that you can easier customized image and animations

Реклама