Реализовываем MVVM в Android

Автор: Александр
Реализовываем MVVM в Android

Пришло время научиться делать гибкую архитектуру для Android, используя DataBinding!

Привет всем! Прежде всего хотелось бы извиниться за 9 месяцев затишья с момента публикации статьи о DataBinding. Все никак не хватало времени написать обещанное продолжение. Но в этом есть и плюсы - за это время мы успели “обкатать” некоторые решения и сделать их еще лучше ;)

Что такое MVVM?

Для начала давайте рассмотрим классическое описание этого шаблона и разберем каждый из его компонентов. Итак, Model-View-ViewModel (т.е. MVVM) - это шаблон архитектуры клиентских приложений, который был предложен Джоном Госсманом (John Gossman) как альтернатива шаблонам MVC и MVP при использовании технологии связывания данных (Data Binding). Его концепция заключается в отделении логики представления данных от бизнес-логики путем вынесения её в отдельный класс для более четкого разграничения.


Теперь давайте разберемся, что же значит каждая из трех частей в названии:

  • Model - это логика, которая связанная с данными приложения.
  • Другими словами - это POJO, классы работы с API, базой данных и пр.
  • View - собственно, это и есть layout экрана, в котором располагаются все необходимые виджеты для отображения информации.
  • ViewModel - объект, в котором описывается логика поведения View в зависимости от результата работы Model. Можно назвать его моделью поведения View. Это может быть как форматирование текста, так и логика управления видимостью компонентов или отображения состояний, таких как загрузка, ошибка, пустые экраны и т.д. Также в ней описывается поведение, которое было инициировано пользователем (ввод текста, нажатие на кнопку, свайп и т.п.)


Что же это дает нам в конечном итоге?

  • Гибкость разработки. Этот подход повышает удобство работы в команде, т.к. пока один член команды работает над компоновкой и стилизацией экрана - другой, в это время, описывает логику получения данных и их обработки;
  • Тестирование. Такая структура упрощает написание тестов и процесс создания mock-объектов. Также, в большинстве случаев отпадает потребность в автоматизированном UI-тестировании, т.к. можно обернуть unit-тестами сам ViewModel;
  • Разграничение логики. За счет большего разграничения код становится более гибким и простым в поддержке, не говоря о его читабельности. Каждый модуль отвечает за свою конкретную функцию и только.


Так как ничего идеального не бывает, есть и недостатки:

  • Для небольших проектов этот подход может быть неоправданным.
  • Если логика привязки данных слишком сложная - отлаживать приложение будет немного труднее.

И все же - кто есть кто?

Изначально, в Android этот паттерн нуждается в небольшой модификации. Точнее сказать, нужно пересмотреть сами компоненты и их привычное восприятие.

Рассмотрим, к примеру, Activity. У нее есть layout-файл (XML) и связанный с ней Java-класс, в котором мы описываем все, что касается её работы. Получается, что xml-файл - это View, а java-класс, соответственно, ViewModel? Похоже на то, но как бы не так. А что, если я скажу, что наш класс - это тоже View? Ведь у custom view тоже есть xml и класс-обработчик, но он считается одним целым? Более того, как в активности, так и в custom view и вовсе можно обойтись без xml-файла, при этом создавая все необходимые виджеты из кода. Вот так и получается, что в нашей архитектуре View == Activity (т.е. XML + Java-class).

Но что же тогда ViewModel и, самое главное, где его размещать? Как мы могли видеть в одном из разделов предыдущей статьи, это совершенно отдельный объект. И именно его мы передавали в xml-файл используя binding.setViewModel(). В нем-то и будут поля и методы, которые нужны нам для связывания моделей с View.

Model же у нас никак не отличается от традиционного её понимания. Единственное, что хотелось бы добавить от себя - не делайте обращения к базе или API прямо во ViewModel. Вместо этого для каждого VM лучше создавать Repository - тогда код будет чище и менее громоздкий.

Таким образом мы получаем следующее: класс активности «обслуживает» только ту логику, которая относится непосредственно к View, но никоим образом не касается его поведения. К таким случаям можно отнести установку Toolbar или надстройки над TabLayout и Viewpager. Немаловажно, что только из View можно обращаться к виджетам напрямую по id (binding.myView.doSomething()), т.к. VM не должна знать совершенно ничего о View - коммуникация между ними реализовывается только посредством Binding. Самой же логикой загрузки данных и их отображения занимается ViewModel, а алгоритм получения данных описывается, соответственно, в Model.

MVVM в Android

Наш дизайнер ушел в отпуск, поэтому схема будет с элементами новогоднего настроения :)

Делать - так наверняка

Давайте перейдем непосредственно к реализации. Посмотрев на схему выше можно заметить, что View передает ViewModel не только команды (действия пользователя), но и её жизненный цикл. Почему? Потому что, отчасти, это тоже своего рода действия, которые инициируются пользователем. Ведь именно из-за его действий окно меняет свои состояния. А нам, в свою очередь, необходимо на это реагировать для корректной работы приложения. Решение напрашивается само собой - необходимо делегировать нужные нам колбэки на VM.

Представим, что нужно загружать информацию каждый раз, когда пользователь возвращается на активность. Для этого нам нужно вызывать метод загрузки данных в onResume().
Изменим ProfileActivity:

private ProfileViewModel viewModel;
 
@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   ActivityProfileBinding binding = DataBindingUtil.setContentView(this, LAYOUT_ACTIVITY);
 
   viewModel = new ProfileViewModel(this);
   binding.setViewModel(viewModel);
}
 
@Override
protected void onResume() {
   super.onResume();
   viewModel.onResume();
}

И определим этот же метод в ProfileViewModel:

public void onResume() {
   isLoading.set(this.user.get() == null);
   userRepo.getUser(this::onUserLoaded);
}

Теперь данные будут обновляться каждый раз, когда пользователь будет возвращаться на окно. К тому же, если информация еще не была получена до этого - покажется соответствующее состояние. Все очень просто :)

В точности делаем и с остальными нужными нам методами. Естественно, определять это каждый раз при создании VM нецелесообразно, поэтому вынесем эту логику в базовые классы. Назовем их BindingActivity и ActivityViewModel: 

public abstract class BindingActivity extends AppCompatActivity {
   …
 
   @Override
   protected void onStart() {
      super.onStart();
      viewModel.onStart();
   }
 
   @Override
   protected void onActivityResult(int requestCode, int resultCode, Intent data) {
      super.onActivityResult(requestCode, resultCode, data);
      viewModel.onActivityResult(requestCode, resultCode, data);
   }
 
   @Override
   protected void onResume() {
      super.onResume();
      viewModel.onResume();
   }
 
   @Override
   public void onBackPressed() {
      if (!viewModel.onBackKeyPress()) {
          super.onBackPressed();
      }
   }
   //….other methods
}
 
public abstract class ActivityViewModel extends BaseObservable {
   …
 
   public void onStart() {
      //Override me!
   }
 
   public void onActivityResult(int requestCode, int resultCode, Intent data) {
      //Override me!
   }
 
   public void onResume() {
      //Override me!
   }
 
   public void onBackPressed() {
      //Override me!
   }
   //….other methods
}

Теперь по аналогии со стандартным поведением Activity для того, чтобы реагировать на интересующие нас изменения, нам нужно просто переопределить нужный метод.

Как по мне, так нет никакой необходимости каждый раз при создании активности описывать создание биндинга и подвязку к нему VM. Эту логику также можно вынести в базовый класс, но немного изменив привычный нам метод onCreate(). Адаптируем его для получения VM при создании активности и добавим еще пару абстрактных методов для необходимых параметров:

private AppCompatActivity binding;
private ActivityViewModel viewModel;
 
public abstract ActivityViewModel onCreate();
public abstract @IdRes int getVariable();
public abstract @LayoutRes int getLayoutId();
 
@Override
public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   bind();
}
 
public void bind() {
   binding = DataBindingUtil.setContentView(this, getLayoutId());
   this.viewModel = viewModel == null ? onCreate() : viewModel;
   binding.setVariable(getVariable(), viewModel);
   binding.executePendingBindings();
}

Осталось еще сделать базовый класс для ActivityViewModel. Здесь все проще - добавим в него только экземпляр Activity. Он пригодится нам для создания интентов а также подойдет в качестве контекста:

public abstract class ActivityViewModel extends BaseObservable {
 
   protected Activity activity;
 
   public ActivityViewModel(Activity activity) {
       this.activity = activity;
   }
 
   public Activity getActivity() {
       return activity;
   }
   //...lifecycle methods
}

На этом с активностями всё - у нас есть все необходимые инструменты для описания логики, за исключением одной неприятной мелочи. Такие поля как “viewModel” и “binding” в базовой активности явно типизированы, что усложнит работу с ними, вынуждая каждый раз приводить типы. Поэтому обобщим наши классы следующим образом:

public abstract class BindingActivity<B extends ViewDataBinding, VM extends ActivityViewModel> extends AppCompatActivity {
 
   private B binding;
   private VM viewModel;
 
   public B getBinding() {
       return binding;
   }
}
 
 
public abstract class ActivityViewModel<A extends AppCompatActivity>
       extends BaseObservable {
 
   protected A activity;
 
   public ActivityViewModel(A activity) {
       this.activity = activity;
   }
 
   public A getActivity() {
       return activity;
   }
}

Готово! В конечном итоге мы получили такой вот класс активности:

public class ProfileActivity
       extends BindingActivity<ActivityProfileBinding, ProfileViewModel> {
 
   @Override
   public ProfileViewModel onCreate() {
       return new ProfileViewModel(this);
   }
 
   @Override
   public int getVariable() {
       return BR.viewModel;
   }
 
   @Override
   public int getLayoutResources() {
       return R.layout.activity_profile;
   }
 
}

getVariable() - должен возвращать название переменной, которое указано в тэге data->variable xml-файла активности, а getLayoutId() - должен вернуть тот самый xml. При этом также стоить отметить, что ProfileViewModel должен наследовать ActivityViewModel.

В реализации подобных классов для фрагментов есть небольшие отличия, но подробно рассматривать реализацию в рамках статьи мы не будем, т.к. концепция у них всё же схожа. Готовый класс можно будет увидеть ниже.

Несколько полезных примеров

С момента нашей последней статьи о DataBinding библиотека не только потеряла статус “бета”, но и обросла некоторыми очень полезными нововведениями. Одним из таких является двустороннее связывание (two-way binding). Это когда не только данные влияют на UI, но и наоборот. К примеру, когда пользователь вводит свое имя в EditText, значение сразу обновляется и в переменной. Ранее мы уже делали подобную фичу, однако для этого привлекались TextWatcher и BindingAdapter. Теперь же достичь этого можно намного проще (я бы даже сказал проще некуда). Все, что для этого нужно - изменить
android:text="@{viewModel.text}" на android:text="@={viewModel.text}" (внимание на знак равенства после “@”). И всего-то :) Но такие трюки работают только с полями семейства Observable (ObservableInt, ObservableBoolean, ObservableField и т.п.). Вот как теперь выглядит диалог, в котором мы меняем статус Марка:

<layout
   xmlns:android="https://schemas.android.com/apk/res/android">
 
   <data>
       <variable
           name="viewModel"
           type="com.stfalcon.androidmvvmexample.features.dialogs.input.InputDialogVM"/>
   </data>
 
   <EditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:hint="@string/dialog_status_text"
       android:text="@={viewModel.text}"
       android:textColor="@color/primary_text"
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
 
</layout>

Мы добавили здесь ViewModel для view в диалоге, т.к. передача ObservableField напрямую в variable не работает корректно (не знаю, баг это или фича, но то, что это не очевидно - факт). Точно также можно привязываться и к другим атрибутам, таким как checked у CheckBox и RadioButton, enabled и пр.

Если вам нужно как-то реагировать или менять данные во время их ввода/вывода - вы можете переопределить методы get() и/или set() у Observable-поля и там производить нужные манипуляции.

public final ObservableField<String> field = new ObservableField<String>() {
   @Override
   public String get() {
       // TODO: your logic
       return super.get();
   }
 
   @Override
   public void set(String value) {
       // TODO: your logic
       super.set(value);
   }
};

А если задача стоит только в отслеживании изменений - можно добавить OnPropertyChangedCallback:

field.addOnPropertyChangedCallback(new OnPropertyChangedCallback() {
   @Override
   public void onPropertyChanged(Observable sender, int propertyId) {
      // TODO: your logic
   }
});

Еще одна фича - это возможность использовать сеттеры как атрибуты в разметке. Допустим, у нас есть метод setAdapter() у того же RecyclerView. Для того, чтобы установить его, нам нужно обращаться непосредственно к экземпляру виджета и вызывать его метод прямо из кода, что противоречит нашему подходу. Для решения этой проблемы можно создавать BidningAdapter, или вообще CustomView, который будет расширять RecyclerView и в нем добавлять свои атрибуты. Но, согласитесь, это не лучший вариант.
К счастью, все намного проще - благодаря кодогенерации мы можем указывать в xml название сеттера при этом просто опуская “set”. Таким образом, задать адаптер можно вот так:

bind:adapter="@{viewModel.adapter}"

Префикс “bind” - этот все тот же “appliaction namespace”, и, если он уже объявлен, их лучше попросту дублировать для того, чтобы не путать объявленные кастомные атрибуты с атрибутами, сгенерированными с помощью биндинга:

<layout
   xmlns:android="https://schemas.android.com/apk/res/android"
   xmlns:app="https://schemas.android.com/apk/res-auto"
   xmlns:bind="https://schemas.android.com/apk/res-auto">
   ...
   <android.support.v7.widget.RecyclerView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:reverseLayout="true"
       bind:adapter="@{viewModel.adapter}"/>
 
</layout>

Тем не менее, идея с CustomView имеет право на жизнь в случае, если нужного сеттера в виджете нет (или он назван по неподходящему нам формату).

Возможно кто-то из вас уже задался вопросом о том, как в при такой архитектуре передавать параметры во ViewModel? Здесь все также применяется подход с делегированием, но для удобства мы создаем статический метод open (или openForResult) в котором перечисляем все необходимые параметры. Дальше достаем их и передаем во ViewModel, в котором есть соответствующий конструктор. Например, передадим нашей активности статус как параметр:

private static final String KEY_STATUS = "STATUS";
 
public static void open(Context context, String status) {
   Intent intent = new Intent(context, ProfileActivity.class);
   intent.putExtra(KEY_STATUS, status);
   context.startActivity(intent);
}
 
@Override
public ProfileActivityVM onCreate() {
   return new ProfileActivityVM(this, getIntent().getStringExtra(KEY_STATUS));
}

Еще одна небольшая наработка, которой хотелось бы поделиться - это вынесение полей “isLoading” и “isError” в базовый класс ViewModel. Эти поля публичные и относятся к типу ObservabeBoolean - благодаря этому нет необходимости дублировать логику состояний загрузки и ошибки, а реагировать на их изменение можно простым include:

<include
   layout="@layout/part_loading_state"
   bind:visible="@{viewModel.isLoading}"/>

При необходимости можно вынести сообщения и иконки для разных кейсов (например, разные причины ошибки) в отдельные variable и таким образом получить гибкий компонент, который применяется парой строк в любом лэйауте.

Забудем о boilerplate!

За время использования MVVM в разработке мы столкнулись с тем, что нам приходилось писать много надоедливого кода: модификация Activtiy/Fragment под базовые классы, прописывание длинных названий Binding-классов в дженериках, создание и связывание ViewModel, а на ранних стадиях и вовсе приходилось копировать базовые классы из проекта в проект, что также занимало драгоценное время. Именно поэтому мы создали библиотеку и плагин для Android Studio, с помощью которых эта рутина стала занимать всего 2-3 клика.

Библиотека AndroidMvvmHelper - это набор базовых классов для удобной работы с MVVM. В этот перечень входят классы как для работы с Activity (BindingActivity и ActivityViewModel), так и с Fragment (BindingFragment и FragmentViewModel), в которых уже реализована логика связывания, а также определены необходимые методы для получения callback-ов. Для того, чтобы начать ее использовать - необходимо просто определить зависимость в grdale-файле:

dependencies {
   ...
   compile 'com.github.stfalcon:androidmvvmhelper:X.X'
}

Хотя решение с библиотекой и упрощает жизнь, создание классов все еще достаточно трудоемкий процесс. Для решения этой задачи мы разработали плагин для IntelliJ IDEA и Android Studio - MVVM Generator. Он позволяет в один клик создать класс BindingActivity (или BindingFragment), его ViewModel, подготовленный xml-файл для разметки и зарегистрировать компонент в AndroidManifest (в случае активности, конечно же). Кроме того, если плагин не обнаружит зависимости библиотеки MVVMHelper, она будет автоматически добавлена.

Чтобы его установить, нужно зайти в раздел управления плагинами:

MVVM в Android MVVM в Android

В нем нажать кнопку “Browse repositories” для поиска доступных плагинов в сети:

MVVM в Android

В поле поиска вводим “MVVM Generator”, выбираем найденный плагин и жмем “Install”:

MVVM в Android

По окончанию установки необходимо перезапустить IDE. После этого плагин готов к работе.

Теперь давайте создадим фрагмент профиля. В случае, как и при создании обычного класса, вызываем контекстное меню на нужном пакете и выбираем “Create Binding Fragment”

MVVM в Android

После того, как мы введем название фрагмента (в нашем случае это “ProfileFragment”) мы получим следующее:

MVVM в Android

Заглянув внутрь, мы увидим готовые к работе классы:

public class ProfileFragment
       extends BindingFragment<ProfileFragmentVM, FragmentProfileBinding> {
 
   public ProfileFragment() {
       // Required empty public constructor
   }
 
   public static ProfileFragment getInstance() {
       return new ProfileFragment();
   }
 
   @Override
   protected ProfileFragmentVM onCreateViewModel(FragmentProfileBinding binding) {
       return new ProfileFragmentVM(this);
   }
 
   @Override
   public int getVariable() {
       return BR.viewModel;
   }
 
   @Override
   public int getLayoutId() {
       return R.layout.fragment_profile;
   }
}
 
public class ProfileFragmentVM
       extends FragmentViewModel<ProfileFragment> {
 
   public ProfileFragmentVM(ProfileFragment fragment) {
       super(fragment);
   }
}

Помимо этого у нас сразу готов xml:

<layout xmlns:android="https://schemas.android.com/apk/res/android"
       xmlns:app="https://schemas.android.com/apk/res-auto"
       xmlns:tools="https://schemas.android.com/tools">
 
   <data>
 
       <variable
           name="viewModel"
           type="com.stfalcon.androidmvvmexample.features.profile.ProfileFragmentVM"/>
   </data>
 
   <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent">
 
   </RelativeLayout>
 
</layout>

И все это буквально за пару секунд! Итак...

Резюмируя

На сегодняшний день плагин очень простой и решает только главную задачу - генерацию файлов. В планах присутствуют добавление проверки на наличие биндинга, более гибкая валидация названий, конфигурация расширенных шаблонов активностей и фрагментов и много другое, но пока - имеем то, что имеем.

С момента выхода стабильной версии DataBinding наша команда уже успела реализовать несколько проектов с помощью этого подхода. Из собственного опыта могу лишь сказать, что мне не хочется возвращаться к более традиционным способам написания приложений, а когда все же приходится это делать - чувствуешь себя человеком из будущего. В целом рутинной работы стало меньше, а потому и процесс разработки стал интересней. К тому же, ребята из Google активно работают над адекватной поддержкой этой технологии в Android Studio, что значительно минимизирует неудобства при разработке. Теперь же - это основной подход, который используется нами при создании приложений.

Надеемся, что наш опыт поможет упростить жизнь при создании MVVM-архитектуры в Ваших приложениях так же, как это помогает нам :)

Happy Holidays!

P.S. Обновленный код примера с предыдущей статьи можно посмотреть здесь.