Освой Android играючи
/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей - и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000
Методы
Пример с RatingBar
Собственный вид
Компонент RatingBar показывает значение рейтинга в виде звёздочек. Можно установить рейтинг касанием пальца или с помощью клавиш курсора, используя заранее заданное количество звёздочек.
RatingBar находится в разделе Widgets.
Класс RatingBar наследуется от классов AbsSeekBar и ProgressBar.
Для установки количества звёзд в режиме дизайна используется атрибут android:numStars.
Для компонента RatingBar используются следующие методы:
Для отслеживания изменения рейтинга существует интерфейс OnRatingBarChangeListener.
У компонента есть два встроенных стиля ratingBarStyleSmall (маленькие звёздочки) и ratingBarStyleIndicator (большие звёзды), которые работают только в режиме индикатора, т.е. пользователь не может их изменять. Рассмотрим пример.
Расположим на экране три компонента 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/ файл с описанием стиля.
<?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.
<?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>
<?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>
<?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" />
Запускаем проект и смотрим на результат:
ome450901/SimpleRatingBar: A simple RatingBar that you can easier customized image and animations