Для чего нужен класс ViewModel из Architecture Components?
ViewModel – абстрактный класс, упрощающий реализацию паттерна MVVM в Android-приложении.
В общем случае ViewModel используется следующим образом:
1. Создается наследник класса ViewModel , который реализует VM-логику в MVVM компоненте.
2. Объект ViewModel инстанциируется во View-слое (активити или фрагменте) с помощью delegated property viewModels() :
val viewModel: MyViewModel by viewModels()
3. Активити или фрагмент использует объект viewModel для получения обновлений UI.
Объект, созданный с помощью by viewModels() переживает пересоздание активити и фрагмента при изменении конфигурации (например при повороте экрана).
Объект ViewModel уничтожается только в случае, если соответсвующий View-класс не пересоздается. Для активити это происходит, когда вызывается onDestroy() после вызова метода finish() . В случае фрагмента – после вызова onDetach() .
При уничтожении объекта ViewModel вызывается метод onCleared() .
Краткое руководство по MVVM: ключевые моменты и примеры
MVVM (Model-View-ViewModel) — способ организации кода. Он помогает отделить пользовательский интерфейс от логики.
Ефективний курс від laba: Фінансовий менеджер.
Оптимізуйте фінансовий розвиток компанії.
- View содержит только код пользовательского интерфейса. Он отображает экран (текстовые поля, ярлыки, кнопки) и пользовательский ввод. Например, в Windows Forms это обычно Form или Control . В Windows Presentation Foundation (WPF) — это класс Window: файлы XAML и xaml.cs.
- Model — это классы. Это «вещи» в вашей программе. Например, в программе ввода заказов вашими классами моделей могут быть: Customer, Order, InventoryItem. Эти классы будут содержать логику, необходимую для выполнения функций.
Как работает паттерн MVVM ?
Как работает паттерн MVVM можно разобрать на примере из реального мира. Представьте, что у нас есть владелец интернет-магазина, веб-мастер и контент-менеджер:
Професійний курс від mate.academy: Java.
Погрузьтеся у світ програмування.
- владелец интернет-магазина (Model) — занимается своей работой, ни на что не отвлекаясь. Если начинается важная акция, он передает веб-мастеру, что нужно добавить новость о ней в блог;
- веб-мастер (ViewModel) – получает информацию от владельца интернет-магазина и передает ее контент-менеджеру;
- контент-менеджер (View) — пишет новость в блог, основываясь на данных, которые предоставил веб-мастер, и публикует ее.
Примеры использования MVVM
Основным примером использования MVVM является программирование графического интерфейса пользователя (GUI). Он используется для простого событийно-управляемого программирования пользовательских интерфейсов путем отделения View от логики бэкенда, управляющей данными.
В WPF View проектируется с помощью языка разметки XAML. Файлы XAML привязываются к ViewModel. Таким образом View отвечает только за представление, а ViewModel — только за управление состоянием приложения.
MVVM очень широко используется в JavaScript-библиотеке Knockout.js.
Реализация паттерна MVVM
Рассмотрим следующую реализацию MVVM с использованием C#, .NET и WPF.
У нас есть класс Model под названием Animals, класс View, реализованный в XAML, и модель ViewModel под названием AnimalViewModel. Обратите внимание, что Model ни о чем не знает, ViewModel знает только о модели, а View знает только о ViewModel.
Событие OnNotifyPropertyChanged-event позволяет обновлять и Model, и View так, что когда вы вводите что-то в текстовое поле во View, Model обновляется. И если что-то обновляет Model, то обновляется и View:
Інтенсівний курс від laba: Фінансовий директор.
Ефективне фінансове управління компанією.
/*Model class*/ public class Animal < public string Name < get; set; >public string Gender < get; set; >> /*ViewModel class*/ public class AnimalViewModel : INotifyPropertyChanged < private Animal _model; public AnimalViewModel() < _model = new Animal ; > public string AnimalName < get < return _model.Name; >set < _model.Name = value; OnPropertyChanged("AnimalName"); >> public string AnimalGender < get < return _model.Gender; >set < _model.Gender = value; OnPropertyChanged("AnimalGender"); >> //Event binds view to ViewModel. public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) < if (this.PropertyChanged != null) < var e = new PropertyChangedEventArgs(propertyName); this.PropertyChanged(this, e); >> > " Width="120" /> " Width="120" />
Изменение кода с помощью MVVM
Давайте посмотрим на код, написанный без использования MVVM . Проблема в том, что единственный способ проверить логику — это вручную запустить программу и ввести значения для каждого сценария:
using System.Linq; using System.Windows; namespace WorkbenchWPF.MVVMPattern.NonPatternVersion < public partial class AccountCreationView : Window < public AccountCreationView() < InitializeComponent(); >private void OnClick_ValidatePassword(object sender, RoutedEventArgs e) < if(txtPassword.Text.Trim().Length < 8) < lblErrorMessage.Text = "Password must be at least eight characters long"; >else if(txtPassword.Text.Trim().Length > 20) < lblErrorMessage.Text = "Password cannot be more than twenty characters long"; >else if(!txtPassword.Text.Any(char.IsUpper)) < lblErrorMessage.Text = "Password must contain at least one upper-case character"; >else if(!txtPassword.Text.Any(char.IsLower)) < lblErrorMessage.Text = "Password must contain at least one lower-case character"; >else if(!txtPassword.Text.Any(char.IsNumber)) < lblErrorMessage.Text = "Password must contain at least one number"; >else < lblErrorMessage.Text = "Password is secure"; >> > >
Теперь обратите внимание на код, написанный с использованием паттерна MVVM . Когда код разделен с помощью MVVM, можно написать автоматизированные тесты, которые могут проверить все возможные значения за считанные минуты:
using System.Windows; using Engine.MVVMPattern.PatternVersion.ViewModels; namespace WorkbenchWPF.MVVMPattern.PatternVersion < public partial class AccountCreationView : Window < private readonly AccountCreationViewModel _viewModel = new AccountCreationViewModel(); public AccountCreationView() < InitializeComponent(); DataContext = _viewModel; >private void OnClick_ValidatePassword(object sender, RoutedEventArgs e) < _viewModel.ValidatePassword(); >> >
Ключевые моменты паттерна MVVM
- Пользователь взаимодействует с View.
- View имеет ссылку на ViewModel, но View Model не имеет информации о View.
Базовый класс Android ViewModel за 5 минут
Если взглянуть на исходный код паттерна MVVM (Model-View-ViewModel), то для многих он представляется смесью из различных библиотек Jetpack, таких как ViewModel, LiveData, Data Binding, Room, Dagger 2 и т. д. Это может сбивать с толку, в особенности начинающих. Попробуем разобраться.
Что такое ViewModel
Проще говоря, ViewModel является одним из компонентов, включенных в Android Jetpack. Объект ViewModel содержит бизнес-логику обработки данных для взаимодействия с моделью, а также предоставляет данные для определенного компонента пользовательского интерфейса (UI), например Fragment или Activity. Другими словами, это просто интерфейс между UI и данными.
Например, когда экран поворачивается, в Activity и Fragment он создается заново. Поэтому временные данные, управляемые этим событием, будут потеряны. Однако использование ViewModel позволяет наследовать (сохранять) данные даже в этом случае.
Кроме того, это соответствует фрагменту VM при разработке с архитектурой MVVM. Связь между View (Activity, Fragment и т. д.) и ViewModel выглядит следующим образом.
Жизненный цикл ViewModel
ViewModel имеет более длительный жизненный цикл, чем целевые интерфейсы LifecycleOwners. Они реализуются классом, который владеет каким-либо элементом или сохраняет его, запуская в течение определенного жизненного цикла, например Activities и Fragments.
Даже если Activity и Fragment будут воссозданы при повороте экрана, ViewModel все равно сможет работать и сохранить данные.
Жизненный цикл ViewModel:
Приложение с использованием ViewModel
Создадим простое приложение с использованием ViewModel. Оно будет складывать два числа (значения a и b), а затем выводить результат на экран при нажатии кнопки CALCULATE.
Сначала откройте файл build.gradle(app) и добавьте в блок зависимостей следующую реализацию:
def lifecycle_version = "2.3.1"// ViewModel
implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"// LiveData
implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"
Добавьте класс Kotlin в папку java. Я назвал ее CalculationViewModel . Все что нужно сделать — это расширить класс ViewModel() .
class CalculationViewModel(private val calculations: Calculations) : ViewModel() // Здесь напишите логику
>
Я создал отдельный интерфейс под названием Calculations , который установил в качестве аргумента в CalculationViewModel . Этот интерфейс включает функцию под названием calculateAddition , которая будет выполнять сложение. Мы будем использовать ее в CalculationViewModel . Это мой способ решения, и он не связан с ViewModel.
interface Calculations fun calculateAddition(a: Int, b: Int): Int
>
Создание класса ViewModelFactory , генерирующего ViewModel , — это вовсе не обязательная, но рекомендуемая практика. Создадим класс, который расширяет ViewModelProvider.Factory , и назовем его CalculationViewModelFactory . Мы будем использовать этот класс позже в MainActivity при передаче этого класса в ViewModelProvider .
import androidx.lifecycle.ViewModel
import androidx.lifecycle.ViewModelProviderclass CalculationViewModelFactory(
private val calculations: Calculations
) : ViewModelProvider.Factory override fun create(modelClass: Class): T return CalculationViewModel(calculations) as T
>
>
Далее создайте класс (я назвал его MyCalculation ), который унаследует интерфейс Calculation , созданный на шаге 2. Затем мы переопределим функцию calculate Addition() и в ней напишем простую логику сложения, которая возвращает результат.
class MyCalculation : Calculations override fun calculateAddition(a: Int, b: Int): Int return a + b
>
>
Затем вернемся к CalculationViewModel и начнем добавлять логику и необходимые нам компоненты (такие как MutableLiveData для привязки, функции для проверки равенству нулю значений a и b, вызов calculateAddition() и т. д.).
Этот код беспорядочен, так как он написан для тестирования. Вы можете попытаться его улучшить.
После настройки ViewModel создадим макет при помощи Databinding. Ознакомьтесь с привязкой данных (Databinding), если это новая для вас тема.
Displays variables
android:text=”@=”Executes a function
android:onClick=”@myViewModel.calculateAddition()>”
Мы привяжем переменную из ViewModel.
В фрагменте ниже обратите внимание на код, выделенный жирным шрифтом.
xml version="1.0" encoding="utf-8"?>
xmlns:tools="http://schemas.android.com/tools">
name="myViewModel"
type="com.yourpackagename.CalculationViewModel" />
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="15dp"
android:orientation="vertical"
tools:context=".MainActivity" > android:id="@+id/a_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginBottom="5dp"
android:ems="10"
android:text="@="
android:hint="a value"
android:inputType="number"
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:textStyle="bold" /> android:id="@+id/b_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginBottom="5dp"
android:ems="10"
android:text="@="
android:hint="b value"
android:inputType="number"
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:textStyle="bold" /> android:id="@+id/calculate_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/calculate"
android:layout_marginBottom="15dp"
android:onClick="@myViewModel.calculateAddition()>"
android:textSize="20sp"
android:textStyle="bold" /> android:id="@+id/addition_textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginBottom="5dp"
android:ems="10"
android:text="@="
android:gravity="center_horizontal"
android:textSize="20sp"
android:textStyle="bold" />
Наконец, перейдите к MainActivity и настройте его следующим образом. Это вполне очевидная последовательность действий. Мы подключаем все созданные на предыдущих шагах компоненты.
Если проект запустится успешно, вы увидите подобный результат.
- Вся правда об использовании навигационной библиотеки Jetpack в модульных проектах
- Быстрое перенаправление в приложение с AutoVerify
- Повторное использование UI в Android — 5 главных ошибок
Читайте нас в Telegram, VK и Дзен
MVVM
MVVM (Model-View-ViewModel) — шаблон проектирования, позволяющий разделить архитектуру на три функциональные части:
- Модель описывает используемые данные и содержит основную логику программы.
- Представление определяет визуальный интерфейс, через который пользователь взаимодействует с приложением.
- Модель представления служит прослойкой между моделью и представлением посредством механизма привязки данных. Так, если в модели изменяются значения свойств, при реализации моделью интерфейса автоматически изменяются отображаемые данные в представлении, хотя напрямую модель и представление не связаны.
Упоминается в статьях
16 сентября 2020
Инструменты разработки
У вас остались вопросы?
Свяжитесь с нами, и наши менеджеры проконсультируют вас.