Автор: Александр К.

Реализовываем 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
protectedvoid onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);
   ActivityProfileBinding binding = DataBindingUtil.setContentView(this, LAYOUT_ACTIVITY);
 
   viewModel =new ProfileViewModel(this);
   binding.setViewModel(viewModel);}
 
@Override
protectedvoid onResume(){super.onResume();
   viewModel.onResume();}

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

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

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

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

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

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

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

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

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

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

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

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

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

publicclass ProfileActivity
       extends BindingActivity<ActivityProfileBinding, ProfileViewModel>{
 
   @Override
   public ProfileViewModel onCreate(){returnnew ProfileViewModel(this);}
 
   @Override
   publicint getVariable(){return BR.viewModel;}
 
   @Override
   publicint 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-поля и там производить нужные манипуляции.

publicfinal ObservableField<String> field =new ObservableField<String>(){
   @Override
   publicString get(){// TODO: your logicreturnsuper.get();}
 
   @Override
   publicvoid set(String value){// TODO: your logicsuper.set(value);}};

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

field.addOnPropertyChangedCallback(new OnPropertyChangedCallback(){
   @Override
   publicvoid 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, в котором есть соответствующий конструктор. Например, передадим нашей активности статус как параметр:

privatestaticfinalString KEY_STATUS ="STATUS";
 
publicstaticvoid open(Context context, String status){
   Intent intent =new Intent(context, ProfileActivity.class);
   intent.putExtra(KEY_STATUS, status);
   context.startActivity(intent);}
 
@Override
public ProfileActivityVM onCreate(){returnnew 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 в AndroidMVVM в Android

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

MVVM в Android

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

MVVM в Android

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

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

MVVM в Android

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

MVVM в Android

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

publicclass ProfileFragment
       extends BindingFragment<ProfileFragmentVM, FragmentProfileBinding>{
 
   public ProfileFragment(){// Required empty public constructor}
 
   publicstatic ProfileFragment getInstance(){returnnew ProfileFragment();}
 
   @Override
   protected ProfileFragmentVM onCreateViewModel(FragmentProfileBinding binding){returnnew ProfileFragmentVM(this);}
 
   @Override
   publicint getVariable(){return BR.viewModel;}
 
   @Override
   publicint getLayoutId(){return R.layout.fragment_profile;}}
 
publicclass 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. Обновленный код примера с предыдущей статьи можно посмотреть здесь.