Jetpack Compose pour Kotlin : guide complet avec exemples

Qu'est-ce que Jetpack Compose et pourquoi en a-t-on besoin ?

Jetpack Compose est un ensemble d'outils moderne pour créer des interfaces utilisateur (UI) pour Android, développé par Google. Contrairement à l'approche traditionnelle basée sur le balisage XML et le système View, Compose utilise une approche déclarative. Cela signifie que vous décrivez à quoi l'interface utilisateur doit ressembler pour chaque état des données, plutôt que de décrire une séquence d'étapes pour la modifier.

Les principaux avantages de Jetpack Compose :

\n
• Déclarativité : Vous décrivez l'interface utilisateur comme une fonction de l'état. Lorsque l'état change, Compose redessine automatiquement uniquement les parties de l'interface qui ont changé.
\n
• Moins de code : Par rapport à XML + View, le code Compose est généralement plus court et plus lisible.
\n
• Intuitivité : Le langage Kotlin est utilisé, ce qui rend le code plus naturel pour les développeurs Android.
\n
• Performance : Compose est optimisé pour fonctionner avec les nouvelles architectures Android et minimise les redessinages.
\n
• Compatibilité : Compose peut être progressivement intégré dans des projets existants, en l'utilisant conjointement avec la View traditionnelle.
\n

Jetpack Compose n'est pas seulement une bibliothèque, mais tout un écosystème comprenant des outils pour travailler avec l'animation, la navigation, les tests et bien plus encore. C'est l'avenir du développement Android, et Google recommande activement d'y migrer.

Installation de Jetpack Compose

Comme Jetpack Compose est une bibliothèque pour Android, elle ne s'installe pas via pip (Python) ou npm (JavaScript). Au lieu de cela, elle est ajoutée à un projet Android via le système de build Gradle. Voici un guide étape par étape :

1. Configuration du projet dans Android Studio

Créez un nouveau projet Android en sélectionnant le modèle "Empty Compose Activity". Android Studio configurera automatiquement toutes les dépendances nécessaires.

2. Configuration manuelle (si le projet existe déjà)

Ouvrez le fichier build.gradle.kts (au niveau du projet) et assurez-vous que le bloc plugins contient :

plugins {\n    id("com.android.application") version "8.2.0" apply false\n    id("org.jetbrains.kotlin.android") version "1.9.20" apply false\n}

Ensuite, ouvrez le fichier build.gradle.kts (au niveau du module, généralement app) et ajoutez :

plugins {\n    id("com.android.application")\n    id("org.jetbrains.kotlin.android")\n}\n\nandroid {\n    namespace = "com.example.myapp"\n    compileSdk = 34\n\n    defaultConfig {\n        applicationId = "com.example.myapp"\n        minSdk = 24\n        targetSdk = 34\n        versionCode = 1\n        versionName = "1.0"\n    }\n\n    buildFeatures {\n        compose = true\n    }\n\n    composeOptions {\n        kotlinCompilerExtensionVersion = "1.5.5"\n    }\n\n    kotlinOptions {\n        jvmTarget = "17"\n    }\n}\n\ndependencies {\n    implementation(platform("androidx.compose:compose-bom:2024.01.00"))\n    implementation("androidx.compose.ui:ui")\n    implementation("androidx.compose.ui:ui-graphics")\n    implementation("androidx.compose.ui:ui-tooling-preview")\n    implementation("androidx.compose.material3:material3")\n    implementation("androidx.activity:activity-compose:1.8.2")\n    debugImplementation("androidx.compose.ui:ui-tooling")\n    debugImplementation("androidx.compose.ui:ui-test-manifest")\n}

Après la synchronisation de Gradle, vous pouvez commencer à utiliser Jetpack Compose.

Démarrage rapide avec un exemple de code

La façon la plus simple de commencer est de créer un écran avec le texte "Hello, World!". Pour cela, dans votre Activity (ou à tout autre endroit où vous utilisez Compose), appelez la fonction setContent :

import android.os.Bundle\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.