La gestion efficace des données et de l’interface utilisateur est un défi constant dans le développement Android.
Des erreurs peuvent survenir lors des changements de configuration, entraînant une mauvaise gestion des états et une complexité accrue.
Cet article explore l’architecture MVVM, en utilisant ViewModel et Jetpack Compose pour optimiser la gestion des données et améliorer l’UI.
Apprenez à construire des applications Android avec une architecture moderne et performante!
Nous allons explorerons l’architecture MVVM (Model-View-ViewModel) en utilisant Android ViewModel et Jetpack Compose pour une gestion optimale des données et de l’interface utilisateur.
Objectifs de l'architecture MVVM
- Comprendre le rôle du ViewModel dans l’architecture MVVM.
- Utiliser les LiveData pour des mises à jour réactives des données.
- Implémenter le data binding pour simplifier le code.
- Explorer les avantages de Jetpack Compose pour la représentation graphique.
Comprendre le ViewModel Android
Définition : Le ViewModel est une classe qui gère les données pour une interface utilisateur. Il est conçu pour survivre aux changements de configuration comme les rotations d’écran.
Avantages :
Séparation des responsabilités : le ViewModel gère les données tandis que les activités et fragments gèrent la présentation.
Simplifie la gestion du cycle de vie des composants graphiques.
Utilisation de LiveData en MVVM
Définition : LiveData est une classe qui détient des données observables. Elle permet aux composants de l’UI d’observer les changements de données.
Types de LiveData :
LiveData: Immutable, utilisé pour les données qui ne changent pas.
MutableLiveData: Permet de modifier les données.
- Observation :Les fragments ou activités observent les LiveData pour réagir aux changements de données.
Intégration MVVM dans les Fragments
- Lifecycle Awareness :Dans une application à activité unique, le ViewModel est partagé entre les fragments, simplifiant la gestion de l’état des données.
- Observation dans les Fragments :Les fragments peuvent observer les LiveData pour recevoir des mises à jour de données en temps réel.
Data Binding en MVVM Android
Définition : Le data binding lie les composants de l’UI dans les fichiers XML directement aux sources de données dans le ViewModel.
Avantages :
Réduction du code intermédiaire.
Synchronisation automatique des données entre l’UI et le ViewModel.
Implémentation : Déclarez les LiveData dans le fichier XML pour lier les données du ViewModel à l’UI.
Jetpack Compose et MVVM
Introduction : Jetpack Compose est un framework moderne pour construire des interfaces utilisateur natives en Kotlin.
Avantages :
Simplification de la gestion des UI grâce à une syntaxe déclarative.
Intégration facile avec ViewModel et LiveData.
Implémentation : Passez le ViewModel à des composables qui observent les LiveData, permettant un flux de données unidirectionnel du ViewModel vers l’UI.
Nous allons passer par différentes étapes pour améliorer l’architecture de l’application en partant d’une approche traditionnelle jusqu’à l’utilisation du ViewModel et du Data Binding.
Création d'un projet MVVM de base
Objectif : Créer une activité simple qui affiche le titre d’un article.
- Créer un nouveau projet Android :
Sélectionnez « Empty Activity » (Activité vide) lors de la création du projet.
Nommez le projet et sélectionnez le langage Kotlin.
- Déclaration des données et du layout XML :
XML (activity_main.xml) :
@+id/main_title_tv crée un identifiant unique nommé main_title_tv pour ce TextView. Si l’identifiant n’existait pas auparavant, il sera ajouté à la table des ressources lors de la compilation.
<TextView
android:id="@+id/main_titre_"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
...
Activity (MainActivity.kt) :
Dans le code Kotlin , vous pouvez maintenant faire référence à ce TextView en utilisant son identifiant. Cela vous permet de manipuler la vue après sa création en XML.
class MainActivity : AppCompatActivity() {
var titreArticle = "titre"
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) setContentView(R.layout.activity_main)
val titre = findViewById<TextView>(R.id.main_titre_tv) titre.text =
titreArticle
}
}
Problèmes de l'approche Android classique
Complexité de Gestion du Cycle de Vie :
Si l’activité est recréée (par exemple, lors d’une rotation d’écran), le code doit recharger les données, ici articleTitle, et réassigner la valeur au TextView.
Code Redondant et Non Réutilisable :
Si un autre fragment ou activité a besoin d’afficher le titre de l’article, le même code de gestion des données doit être dupliqué.
Introduction au ViewModel MVVM
Pour résoudre les problèmes de l’approche traditionnelle dans les applications Android, l’architecture MVVM (Model-View-ViewModel) est souvent adoptée. Une composante clé de cette architecture est le ViewModel.
Un ViewModel est une classe qui est conçue pour gérer et stocker les données nécessaires à l’interface utilisateur. Contrairement aux activités et aux fragments, le ViewModel n’est pas affecté par le cycle de vie des composants UI.
Avantages du ViewModel Android
Séparation des préoccupations :
Le ViewModel sépare clairement la logique de gestion des données de la logique de présentation, respectant ainsi le principe de séparation des préoccupations.
Survie aux changements de configuration :
Le ViewModel persiste au-delà des cycles de vie des activités et des fragments, conservant les données même lors de rotations d’écran ou autres changements de configuration.
Réduction du code redondant :
Les ViewModels centralisent la gestion des données, éliminant ainsi le besoin de dupliquer le code de gestion des données dans plusieurs activités ou fragments.
Implémentation du ViewModel en MVVM
Nous allons voir comment introduire un ViewModel dans une application Android avec un exemple concret. Supposons que nous ayons une activité qui affiche le titre d’un article.
Étape 1 : Créer un ViewModel
Commencez par créer une classe ViewModel pour gérer les données de l’article.
Dans la fenêtre de projet, faites un clic droit sur le dossier java de votre application, sélectionnez New > Kotlin Class/File.
Nommez la classe ArticleViewModel et sélectionnez Class.
class ArticleViewModel : ViewModel() {
// LiveData pour le titre de l'article
private
val _articleTitle = MutableLiveData<String>() val articleTitle
: LiveData<String>
get() = _articleTitle
// Méthode pour mettre à jour le titre de l'article
fun setArticleTitle(title : String) {
_articleTitle.value = title
}
}
Étape 2 : Modifier l’activité pour utiliser le ViewModel
Ouvrir l’activité principale
- Dans la fenêtre de projet, ouvrez le dossier java et trouvez l’activité principale de votre application (par exemple, MainActivity.kt).
- Double-cliquez sur le fichier pour l’ouvrir.
Ajouter le ViewModel à l’activité
- private val viewModel :ArticleViewModel: Déclare une variable viewModel de type ArticleViewModel.
- by viewModels() :Utilise la délégation de propriété Kotlin pour obtenir une instance du ViewModel. Cette méthode garantit que le ViewModel est initialisé de manière lazy (paresseuse) et qu’il est lié au cycle de vie de l’activité, ce qui signifie que le ViewModel survivra aux changements de configuration, comme les rotations d’écran.
- private lateinit var binding :ActivityMainBinding : Déclare une variable binding de type ActivityMainBinding. Le mot-clé lateinit signifie que cette variable sera initialisée plus tard, avant d’être utilisée.
class MainActivity : AppCompatActivity() {
// Utiliser le ViewModel
private val viewModel: ArticleViewModel by viewModels()
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) binding =
ActivityMainBinding
.inflate(layoutInflater) setContentView(binding.root)
// Observer les changements de titre
viewModel.articleTitle
.observe(this, Observer{title->binding.mainTitleTv.text = title})
// Définir un titre initial pour l'article
viewModel.setArticleTitle("Titre de l'Article")
}
}
Étape 3 : Utiliser View Binding pour simplifier le code
Activer le View Binding
- Dans Android Studio, ouvrez le fichier build.gradle (Module :app) dans le dossier Gradle Scripts.
- Ajoutez les lignes suivantes à l’intérieur du bloc android :
android {
viewBinding { enabled = true }
}
Explication du code MVVM Android
ArticleViewModel :
La classe ArticleViewModel étend ViewModel et utilise LiveData pour stocker le titre de l’article. La méthode setArticleTitle permet de mettre à jour le titre.
MainActivity :
Dans l’activité, nous obtenons une instance de ArticleViewModel en utilisant la délégation by viewModels().
Nous utilisons ViewModel pour observer les changements de données. Lorsque le titre de l’article change, l’interface utilisateur est automatiquement mise à jour.
ActivityMainBinding est utilisé pour lier les vues, simplifiant ainsi l’accès aux éléments de l’interface utilisateur sans avoir besoin de findViewById.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Quel est le rôle du ViewModel dans MVVM ?
Comment LiveData améliore-t-il l'architecture MVVM ?
Quels sont les avantages de Jetpack Compose dans MVVM ?
Pourquoi utiliser le data binding dans MVVM ?
Comment le ViewModel gère-t-il le cycle de vie dans Android ?
Conclusion
L’architecture MVVM avec ViewModel et Jetpack Compose apporte une structure claire et une efficacité accrue dans le développement Android. Quelle sera votre prochaine étape pour approfondir l’utilisation de MVVM dans vos projets Android?
