Jetpack Compose - Fonctionnement et principes

Voici mon deuxième article sur Jetpack Compose, qui va porter sur son fonctionnement et ses principes fondamentaux. Jetpack Compose est un framework moderne permettant de construire des interfaces utilisateur de manière déclarative en utilisant Kotlin. Contrairement à l’approche traditionnelle basée sur les fichiers XML, Jetpack Compose repose entièrement sur du code Kotlin et utilise un système de fonctions composables.

Jetpack Compose repose sur des fonctions composables, qui sont des fonctions Kotlin annotées avec @Composable. Chaque fonction représente un composant de l’interface utilisateur et peut être imbriquée dans d’autres composables pour créer des structures complexes et dynamiques.

@Composable
fun MessageCard(name: String) {
    Text(text = "Bonjour $name !")
}

Dans cet exemple, la fonction MessageCard affiche un simple texte à l’écran.

L’un des grands avantages de Jetpack Compose est qu’il réévalue uniquement les composables concernés lorsqu’un état change. Contrairement à l’approche XML où l’on devait modifier manuellement les vues, Compose rafraîchit automatiquement l’interface en fonction des nouvelles données.

• Réduire les bugs liés aux mises à jour manuelles
• Améliorer les performances en ne rafraîchissant que les parties nécessaires
• Alléger l’interface en restant sur le même écran et en modifiant uniquement les éléments nécessaires

Jetpack Compose introduit un concept important : la gestion déclarative de l’état. Au lieu de modifier directement l’interface, on définit des états réactifs qui mettent automatiquement à jour l’UI lorsqu’ils changent.

Jetpack Compose repose sur plusieurs principes fondamentaux qui en font un outil puissant et moderne.

Avec Compose, on ne décrit plus comment dessiner l’interface, mais ce qu’on veut afficher. Cela simplifie considérablement le développement en supprimant les mises à jour manuelles des vues.

Avant (XML et View) :

<TextView
    android:id="@+id/textView"
    android:text="Bonjour"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

textView.text = "Nouveau texte"

Avec Jetpack Compose :

@Composable
fun Message() {
    Text(text = "Bonjour")
}

Dès que les données changent, Jetpack Compose met automatiquement à jour l’UI, sans intervention supplémentaire.

Toutes les interfaces sont construites avec des fonctions qui peuvent être réutilisées et imbriquées :

@Composable
fun Profil() {
    Column {
        Avatar()
        NomUtilisateur()
        Bio()
    }
}

Cela permet une structure claire et modulaire, favorisant la réutilisation du code.

Avec l’ancienne approche, afficher une grande liste de données nécessitait l’utilisation d’un RecyclerView, d’un Adapter, d’un ViewHolder, etc.
Jetpack Compose simplifie cela grâce à LazyColumn, qui charge uniquement les éléments visibles à l’écran :

@Composable
fun ListeUtilisateurs(utilisateurs: List<String>) {
    LazyColumn {
        items(utilisateurs) { utilisateur ->
            Text(text = utilisateur)
        }
    }
}

Cela améliore les performances en ne chargeant que ce qui est nécessaire.

Jetpack Compose intègre Material Design, permettant de styliser facilement les composants :

@Composable
fun BoutonStylé() {
    Button(onClick = {}) {
        Text("Clique-moi", style = MaterialTheme.typography.bodyLarge)
    }
}

On peut ainsi gérer les couleurs, les polices et les styles à travers un thème global.

Jetpack Compose révolutionne le développement d’interfaces utilisateur Android grâce à son approche déclarative et sa gestion efficace de l’état. En éliminant le besoin des fichiers XML et en simplifiant la mise à jour des vues, il permet d’écrire un code plus clair, modulaire et performant. Avec son intégration fluide à Kotlin et Material Design, il s’impose comme un outil incontournable pour créer des applications modernes et réactives.

• Qu'est-ce que Jetpack Compose ? - Mobiskill
• Principes de base de Jetpack Compose - Google Codelabs