Utilisez Jetpack Compose pour développer des interfaces Android dynamiques

Dans cette partie, nous allons examiner en détail les états, les événements et les effets de bord de l'écran “SuggestionsScreen” de l'application BestPodcast que nous avons créé ensemble. Nous allons aussi voir comment optimiser au mieux la navigation entre les écrans. En vous reposant sur l’utilisation d’une classe de typeViewModel, quand nécessaire, nous allons découvrir qu’il est possible de faciliter la gestion de ces différents éléments en permettant une séparation claire entre l'interface utilisateur, la logique métier et les données. Cette approche améliore également la flexibilité du code, le rend plus structuré et simplifie les tests et la maintenance de l'application.

Identifiez les états

Pour rappel, un état est une valeur qui peut changer au fil du temps. Cela peut être une variable dans une classe, une donnée en base de données, ou une valeur obtenue via une API externe. Les écrans de nos applications Android reflètent, à un moment donné, les différents états qui les composent. Par exemple :

• une liste de produits dans une application d'e-commerce ;

• la position de la barre de défilement dans cette liste ;

• un champ de recherche pour filtrer ces produits ;

• une animation qui se déclenche quand l'utilisateur clique surAjouter au panierpour un produit.

Jusqu’à maintenant, nous avons développé des fonctions composables où les états se situent à deux endroits : dans les paramètres et dans la fonction.

1. L’état du composantPodcastItemse trouve dans les paramètres.

@Composable
fun PodcastItem(
    podcast: Podcast,
    onDownloadClicked: () -> Unit,
    modifier: Modifier = Modifier,
) { /*...*/

2. L’état du composantPodcastSearchFieldse trouve au cœur de la fonction. Il persiste en mémoire via la fonctionremember{}.

@Composable
fun PodcastSearchField(modifier: Modifier = Modifier) {
    val filterText = remember { mutableStateOf("") }
    OutlinedTextField(
        value = filterText.value,
        onValueChange = {
            filterText.value = it
        },
        /*...*/
}

Déterminez le type d’état

Un état peut se distinguer de deux façons :

1. L’état représente des données métier : Il s’agit d’informations importantes pour le fonctionnement de l’application. Par exemple, le contenu des messages dans une conversation ou les informations d’un utilisateur illustrent des données métier.

2. L’état est purement visuel : Il affecte seulement l’apparence ou le comportement de l’interface utilisateur sans impacter les données métier. Par exemple, la position de la barre de défilement dans une liste de messages, la visibilité d’un élément, ou une animation en cours sont des états visuels.

Identifions les états et leurs types au sein de l’écran affichant la liste des suggestions :

Voici une représentation schématique de l’arbre de composition de cet écran, incluant l’identification des états avec leur type. Pour ce faire, j’ai utilisé l’outil Excalidraw.

Identifiez les événements

Pour rappel, en Jetpack Compose, un événement est une interaction ou une action utilisateur, comme un clic sur un bouton, une saisie de texte ou un défilement. Cela désigne aussi tout événement non initié par l'utilisateur, tel qu'un compte à rebours qui arrive à son terme ou une notification système. Chaque événement déclenche une réponse dans l'interface utilisateur, comme la mise à jour de l'affichage ou l'exécution d'une action spécifique.

Déterminez le type de logique associé à l’événement

Pour pouvoir gérer correctement un événement, il faut, comme pour les états, identifier le type de logique impliqué dans son code :

1. La logique métier : Elle impacte les données en créant, sauvegardant et manipulant celles-ci pour répondre aux besoins de l’application. Cela correspond, par exemple, à la logique permettant de récupérer les produits dans un panier, ou celle qui consiste à ajouter un produit dans un panier. Cette logique est présente dans la couche Data (ou Données) de l’architecture d’une application, la couche qui est responsable de l’accès aux données.

2. La logique visuelle ou UI : Elle permet de refléter visuellement l’état à l’écran. Cela inclut, par exemple, la logique définissant comment afficher le contenu d’un message, comment réagir au clic de l’utilisateur sur un message, comment scroller à une position donnée dans une liste, etc. Cette logique est liée à la configuration de l’appareil, comme sa taille, son orientation ou encore la langue utilisée.

Les deux couches sont illustrées dans le chapitre “​​Structurez l’application avec l’architecture MVVM” du cours “​​Développez votre première application Android”. ​​

Reprenons notre écran et identifions les événements et la logique qu’ils impliquent.

Voici le schéma de l’arbre de composition mis à jour avec les événements.

À vous de jouer !

Contexte

Avant de récupérer les données de l'écran principal de BestPodcast, vous devez d'abord prendre un moment pour clarifier les types d’états et d’événements.

Consignes

1. Représentez dans un schéma l’arbre de composition de l’écran principal “PodcastsScreen” de votre application.

2.  Identifiez et marquez les états en précisant s’ils sont de nature métier ou visuelle.

3. Identifiez les événements et spécifiez leur type métier ou visuel.

Livrables

Pour réaliser cette tâche, vous pouvez dessiner un simple croquis ou utiliser un outil numérique comme Excalidraw.

En résumé

• Un état est une valeur changeante dans le temps, comme la liste de suggestions ou la position d'une barre de défilement. 

• Avant de gérer un état, il faut savoir s’il manipule des données métier (ex. : liste de suggestions) ou des données purement visuelles (ex. : visibilité d’un bouton).

• Un événement est une interaction utilisateur (clic, saisie, défilement) ou un événement système (compte à rebours, notification).

• Pour gérer un événement, il faut identifier si l'événement concerne la logique métier (manipulation des données) ou la logique UI (affichage et interaction visuelle).

Maintenant que nous avons identifié les différents types de nos états et de nos événements, nous pouvons passer à la deuxième étape, afin de savoir à quel endroit de l’application nous allons les gérer.