Introduction (Présentation de Jetpack Compose)
Jetpack compose est une bibliothèque (boîte à outil) du Framework Android pour créer des vues natives avec moins de code (permettant d’accélérer le développement), plus intuitive et facile à mettre en place.
Le Framework Android, depuis quelques années propose une création de vues (écrans) à travers un fichier XML (Layouts) qui s’est avéré plus fastidieuse à mettre en place et difficilement maintenable lorsque l’interface utilisateur devient plus complexe. De plus, le parsing et la segmentation des fichiers XML par le système est lourd et consomme de la ressource.
C’est alors qu’intervient la librairie Compose pour rendre la création graphique plus fluide, moins verbeuse avec un canvas permettant d’avoir un aperçu (Preview) de la vue en cours d’édition (en temps réel). Compose utilise une logique composante avec la gestion de l’état de ses différents composants, au même titre que Flutter ou React Native.
Dans cet article, nous allons aborder différentes notions que nous avons pu mettre en pratique lors de notre dernière communauté pratique Android.
Présentation architecture Layout (mise en page) Xml vs Compose
Traditionnellement (avant Jetpack compose), la création d’une vue sous Android passe par un fichier XML contenu dans un dossier Layout (dossier qui regroupe tous les fichiers XML).
Le fichier XML est lié à une Activity ou à un Fragment, cette liaison permet à la fois de récupérer les éléments qui composent la vue et leurs contenus, puis modifier et enfin mettre à jour ces différents éléments visuels. La connexion entre ces deux parties n’est pas performante avec la méthode findViewById() ou même le plugin kotlinx.synthetics.
Bien que l’introduction du concept de ViewBinding et DataBinding ait considérablement amélioré cette relation il n’en demeure pas moins que la configuration requise est fastidieuse.
Jetpack Compose propose une tout autre approche qui se veut déclarative et basée sur les composants, en écrivant moins de code. Cela rend le développement de l’interface utilisateur moins fastidieux, plus élaboré et mieux découplé. (Cf. Image ci-dessous).
À titre d’exemple prenons un cas pratique d’une vue affichant un texte avec les deux approches (Layout XML et Jetpack Compose).
Avec Compose
La classe MainActivity
Avec le Layout XML (activity_main.xml)
La classe MainActivty
Mise en place des librairies Compose
Installation
Pour créer une application avec la librairie Compose, rien de plus simple, lors de la création d’un nouveau projet avec l’IDE IntelliJ, on sélectionne dans la fenêtre New Project – Empty Compose Activity.
Ainsi l’IDE créera un projet Android avec la librairie Jetpack Compose. Dans la structure d’un projet sous Compose on peut remarquer une arborescence qui est plus ou moins semblable à celle d’un projet Android avec des vues XML (Layouts).
Il contient entre autres un package Theme contenu dans le dossier UI dans lequel on retrouve différents fichiers générés lors de la création du projet, notamment la typographie, les couleurs, le thème de l’application et les différentes formes applicables aux composants.
Par ailleurs on ne retrouve plus le dossier Layout qui contient principalement les vues au format XML.
Migrer une application existante vers compose
Dans le fichier build.gradle au niveau du module l’import de certaines librairies est indispensable au fonctionnement de Compose. (Comme cité ci-dessous)
La librairie Jetpack peut facilement s’intégrer à un projet existant, cela passe par l’ajout des composants Jetpack disponibles depuis le référentiel Google Maven.
Pour l’ajouter il faut se rendre dans le fichier settings.gradle et rajouter google().
Projet Trombinoscope
Le projet Trombinoscope avait pour objectif d’expérimenter le Framework à travers la mise en œuvre d’une application permettant de répertorier les employés d’une entreprise sous forme de liste avec des cartes individuelles pour afficher chaque profil avec plus de détails sur la personne concernée.
Sur l’écran d’accueil nous avons une liste des employés affichée dans une grille adaptative (en fonction des tailles d’écran, cf. ci-dessous).
Création d’une liste RecyclerView(avec le layout) vs Compose
La création d’une liste sans Compose passe par plusieurs étapes, nous avons besoin de quelques fichiers/classes afin d’afficher une liste à l’écran avec le Layout XML.
- Fichier layout qui représente une colonne de notre liste.
- Un adaptateur qui est une passerelle entre les données et le RecyclerView.
- La classe Activty/Fragment chargée d’afficher la vue à l’écran.
Avec Compose, le procédé est plus léger, nous avons juste besoin d’une LazyColumn pour afficher les éléments d’une liste à l’écran. Aucune classe ou fichier XML n’est nécessaire à la conception de cette liste. A noter que l’élaboration de cette liste peut être décrite dans un seul et même fichier.
- Création d’un item profil
Aperçu de l’item
- Ensuite faire appel à un LazyVerticalGrid dans notre cas vu qu’on souhaite avoir un affichage en grille tout en lui passant la liste des items.
- Affichage d’un profil sélectionné
Avantages et Inconvénients (Compose)
Avantages
- Facilité de mise en place avec une interface utilisateur déclarative plus propre, lisible et performante.
- Moins de code par rapport à l’interface utilisateur impérative XML.
- Compatibilité avec le code existant : possibilité d’appeler du code Compose depuis Views et inversement.
- Amélioration du temps de construction (Build) et de la taille de l’APK.
Inconvénients
- Certains composants ne sont pas encore pris en charge et certaines fonctionnalités sont à venir.
Conclusion
Suite à ce premier essai avec l’application Trombinoscope, Jetpack Compose nous a semblé facile à prendre en main même si la logique comparée au XML demande un petit temps d’adaptation.
Il semble assez clair que Jetpack Compose s’inscrit avec Flutter et SwiftUI comme le futur de la programmation d’interface et permettra à terme de créer des vues plus complexes (Animation, nouveaux composants) plus rapidement que sur les vieilles technologies (Fragment XML, Xib).
Vous souhaitez en savoir plus ? Contactez-nous !
Lamine DIAKITE – Développeur Android
Grégoire BENION – Développeur Android
Thibault LELIEVRE – Développeur Android