Android Data Binding in RecyclerView
На Google IO 2015 анонсировали новую библиотеку Data Binding Library. Основная ее задача — вынесения взаимодействия модели и View в xml-файлы. Она значительно упрощает написание кода и избавляет от необходимости использования методов findByViewId(), добавления ссылок на view-элементы внутри Activity/Fragment’ов. Также она позволяет использовать кастомные атрибуты, привязывая их к статическим методам. Поскольку статьей просто по Data Binding уже достаточно, но по его использованию в RecycleView всего ничего, восполним этот пробел.
Настройка
Для начала заходим в файл build.gradle, который лежит в корневом каталоге проекта. В блоке dependencies выставляем:
buildscript {
repositories {
jcenter()
}
dependencies {
classpath "com.android.tools.build:gradle:1.3.0"
classpath "com.android.databinding:dataBinder:1.0-rc1"
}
}
allprojects {
repositories {
jcenter()
}
}
Далее подключим Data Binding плагин к проекту. Для этого в build.gradle добавляем строчку с плагином. Также проверяем, чтобы compileSdkVersion была 23.
apply plugin: 'com.android.application'
apply plugin: 'com.android.databinding'
Биндинг
Перейдем к созданию xml-файла. Он, как обычно, создается в паке res/layoyt. В качестве корневого тега используем layout. Android Studio может подсвечивать его красным или предлагать выставить ширину и высоту, но мы ее игнорируем.
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
</data>
<!-- Сюда добавляем свой layout -->
</layout>
Чтобы создался биндер-класс, который и будет привязывать модель к view, нужно привязать xml к модели. Для этого внутри тега указываем имя и путь к нашей модели. В качестве примера будет отображатьcя список фильмов.
public class Movie {
public boolean isWatched;
public String image;
public String description;
public String title;
public Movie(boolean isWatched, String image, String description, String title) {
this.isWatched = isWatched;
this.image = image;
this.description = description;
this.title = title;
}
}
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<variable
name="movie"
type="com.example.databinding.Movie" />
</data>
<!-- Сюда добавляем свой layout -->
</layout>
Осталось добавить свой layout и привязать к нему модель. Пусть у каждого фильма будет картинка, заголовок и краткое описание. Чтобы указать, что поле будет считываться из модели используем “@{*какое поле из модели использовать*}”.
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<variable
name="movie"
type="com.example.databinding.Movie" />
</data>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="8dp">
<RelativeLayout
android:id="@+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imageView"
...
app:imageUrl="@{movie.image}"/>
<TextView
android:id="@+id/textView"
...
android:text="@{movie.title}"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="@+id/textView2"
...
android:text="@{movie.description}"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</layout>
С android:text="@{movie.title}" и android:text="@{movie.description}" все понятно — просто в качестве текста будет показано соответствующее поле, но что на счет app:imageUrl="@{movie.image}"? Тут начинается реальная магия Data Binding. Вы можете добавлять сколько угодно кастомных атрибутов и даже не прописывать их в atts.xml, а аннотация @BindingAdapter() поможет вам их обработать. Ниже будет показано, как обрабатывать такие аннотации.
Перейдем к адаптеру. Напишем простой RecyclerView.Adapter. Начнем с ViewHolder. Как он выглядел раньше:
public static class MovieItemViewHolder extends RecyclerView.ViewHolder {
private TextView title, description;
private ImageView image;
public ViewHolder(View v) {
super(v);
title = (TextView) v.findViewById(R.id.textView);
description = (TextView) v.findViewById(R.id.textView2);
image = (ImageView) v.findViewById(R.id.imageView);
}
}
Как он выглядел после Butter Knife:
public static class MovieItemViewHolder extends RecyclerView.ViewHolder {
@Bind(R.id.textView) TextView title;
@Bind(R.id.textView2) TextView description;
@Bind(R.id.imageView) ImageView image;
public ViewHolder(View v) {
super(v);
ButterKnife.bind(v);
}
}
Как он выглядит после DataBinding:
public class MovieItemViewHolder extends RecyclerView.ViewHolder {
MovieItemBinding binding;
public MovieItemViewHolder(View v) {
super(v);
binding = DataBindingUtil.bind(v);
}
}
Далее нас интересуют два основных метода адаптера: onCreateViewHolder и onBindViewHolder. Созданием и биндигом будет заниматься MovieItemBinding. Он генерируется по названию xml, который мы написали выше. В данном случае файл xml назывался movie_item.xml.
@Override
public MovieItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
MovieItemBinding binding = MovieItemBinding.inflate(inflater, parent, false);
return new MovieItemViewHolder(binding.getRoot());
}
Теперь перейдем к onBindViewHolder, как он выглядел раньше:
@Override
public void onBindViewHolder(MovieItemViewHolder holder, int position) {
Movie movie = Movie.ITEMS[position];
holder.title.setText(movie.title);
holder.description.setText(movie.description);
Picasso.with(holder.image.getContext()).load(movie.image).into(holder.image);
}
Как он выглядит теперь:
@Override
public void onBindViewHolder(MovieItemViewHolder holder, int position) {
Movie movie = Movie.ITEMS[position];
holder.binding.setMovie(movie);
}
Но это еще не всё, как на счет кастомного app:imageUrl="@{movie.image}"?.. Опять же все просто: внутри адаптера делаем статический метод с аннотацией @BindingAdapter. Внутрь аннотации передаем наш аттрибут. В итоге получаем
@BindingAdapter("bind:imageUrl")
public static void loadImage(ImageView imageView, String v) {
Picasso.with(imageView.getContext()).load(v).into(imageView);
}
На вход поступит imageView и то, что передаст модель в качестве image. Теперь все заработает.
Остальные полезности
В модели Movie была переменная isWatched. Допустим, мы хотим, чтобы у просмотренных и новых фильмов были разные обработчики на клик. С DataBinding’ом теперь это проще простого. Напишем обработчик нажатия для фильма.
public interface MovieClickHandler{
void onNewClick(View view);
void onWatchedClick(View view);
}
Добавим его в xml-файл в тег data.
...
<data>
...
<variable name="click" type="com.example.databinding.MovieClickHandler" />
</data>
...
<ImageView
...
android:onClick="@{movie.isWatched ? click.onWatchedClick : click.onNewClick}"/>
...
Теперь в методе адаптера onBindViewHolder можно засетить наш лисенер. Как и в случае с биндером, название метода генерируется соотвественному названию переменной в xml-файле.
public void onBindViewHolder(MovieItemViewHolder holder, int position) {
Movie movie = Movie.ITEMS[position];
holder.binding.setMovie(movie);
holder.binding.setClick(new MovieClickHandler() {
@Override
public void onWatchedClick(View view) {
}
@Override
public void onOldClick(View view) {
}
});
}
Пусть по загрузке картинка у просмотренных фильмов будет черно-белая. Для преобразование картинки добавим новый атрибут.
<ImageView
...
app:filter='@{movie.isWatched ? "grey" : null}'
.../>
В адаптере через @BindingAdapter реализуем обработку
@BindingAdapter("bind:filter")
public static void applyFilter(ImageView imageView, String v) {
imageView.setColorFilter(null);
if("grey".equals(v)){
ColorMatrix matrix = new ColorMatrix();
matrix.setSaturation(0);
ColorMatrixColorFilter cf = new ColorMatrixColorFilter(matrix);
imageView.setColorFilter(cf);
}
}
Также очень удобно использовать стабовые значения, если одно из полей пустое.
<TextView
...
android:text='@{movie.title ?? "unknown"}'
... />
Стоит также отметить, что внутри MovieItemBinding содержатся ссылки на все view, у которых есть ID в xml-файле.
Итог
Библиотека очень упрощает работу с RecycleView, количество кода при написании теперь уменьшается в разы, при этом никаких if/else для колбеков и данных. С JavaRX можно еще больше упростить обновление данных, пока правда оно работает только в одну сторону: при изменении данных обновляется UI, но не наоборот.
Полезные ссылки:
Тестовый проект.
Официальная документация.
Быстрый старт Data Binding в Android.
