La navigation dans les applications Android traditionnelles peut être complexe et peu flexible.
Cette complexité entraîne souvent des interfaces maladroites et difficiles à maintenir, frustrant les développeurs et les utilisateurs.
Jetpack Compose, avec NavHost et NavController, simplifie la navigation, rendant le développement plus modulable et fluide.
Créez des interfaces modernes et réactives avec JetPack Compose!
Introduction à Jetpack Compose Navigation
NavHost et NavController en Navigation Compose
Dans cette section, nous allons explorer la navigation dans les applications Android en utilisant Jetpack Compose et NavHost. Avec Compose, la gestion de la navigation devient plus flexible et modulable grâce à une bibliothèque spécifique qui vous permet de créer des interfaces utilisateur entièrement en code Kotlin, sans passer par les fichiers XML traditionnels.
Configurer Navigation Compose sur Android
NavHost est un composant qui contient un graphique de navigation au sein de votre application. Il contrôle la navigation entre les différentes destinations (écrans) et assure que les bonnes destinations sont affichées en réponse aux actions de navigation.
NavController est une classe qui gère l’interaction entre les destinations dans votre graphique de navigation. Il vous permet de déclencher la navigation, de gérer la pile de navigation et de passer des données entre les écrans.
Implémenter NavHost pour Navigation Android
Ajouter la dépendance
Pour utiliser NavHost et NavController avec Jetpack Compose, vous devez d’abord ajouter la bibliothèque navigation-compose dans votre fichier build.gradle. Ajoutez la dépendance suivante dans la section dependencies de votre module:
dependencies {
implementation "androidx.navigation:navigation-compose:2.6.0-alpha04"
}
Après avoir ajouté la dépendance, assurez-vous de synchroniser votre projet avec Gradle en utilisant l’option « Sync Now » proposée par Android Studio.
Navigation Compose : Pratiques Essentielles
Création d’un NavController
Dans votre activité principale (MainActivity), créez un NavController en utilisant la fonction rememberNavController(). Ce contrôleur gère la navigation entre vos composables:
val navController = rememberNavController()
Définition de NavGraph
Ensuite, définissez un graphique de navigation (NavGraph) en spécifiant les routes (écrans) que votre application va gérer. Chaque route correspond à un composable particulier:
NavHost(navController = navController, startDestination = "home") {
composable("home") { HomeScreen(navController) }
composable("login") { LoginScreen(navController) }
}
Dans cet exemple, la navigation commence à l’écran « home ». Si l’utilisateur navigue vers « login », l’écran de connexion sera affiché.
Gestion des Routes avec Paramètres
Vous pouvez également passer des paramètres entre les écrans. Utilisez une syntaxe à base d’accolades pour spécifier des paramètres dans vos routes:
composable("details/{itemId}") { backStackEntry ->
val itemId = backStackEntry.arguments?.getString("itemId")
DetailsScreen(navController, itemId)}
Le code retourne le résultat suivant :
Ici, la route « details » prend un itemId comme paramètre, qui est ensuite utilisé dans DetailsScreen.
Exemple Complet de Navigation Jetpack Compose
Naviguer vers une Route
Pour naviguer vers une route particulière, utilisez la fonction navigate() sur votre NavController:
navController.navigate("login")
Gérer la Pile de Navigation
Pour gérer la pile de navigation, vous pouvez utiliser des méthodes comme popBackStack() pour revenir en arrière dans la pile:
navController.popBackStack()
Cela revient à l’écran précédent tout en supprimant l’écran actuel de la pile.
Conclusion sur Navigation Jetpack Compose
Voici un exemple complet illustrant l’implémentation de la navigation dans une application Compose:
@Composable
fun MainScreen() {
val navController = rememberNavController()
Scaffold {
NavHost(navController = navController, startDestination = "home") {
composable("home") { HomeScreen(navController) }
composable("login") { LoginScreen(navController) }
composable("details/{itemId}") { backStackEntry ->
val itemId = backStackEntry.arguments?.getString("itemId")
DetailsScreen(navController, itemId)
} } }}
@Composable
fun HomeScreen(navController: NavController) {
Button(onClick = { navController.navigate("login") }) {
Text("Go to Login") }}
@Composable
fun LoginScreen(navController: NavController) {
Button(onClick = { navController.navigate("details/123") }) {
Text("Go to Details") }}
@Composable
fun DetailsScreen(navController: NavController, itemId: String?) {
Text(text = "Item ID: $itemId")
Button(onClick = { navController.popBackStack() }) {
Text("Back")
}
}
Le code retourne le résultat suivant :
Élément | Description |
|---|---|
MainScreen | Configure le NavHost avec navController pour gérer la navigation entre les écrans. |
HomeScreen | Affiche un bouton pour naviguer vers l’écran de connexion (« login »). |
LoginScreen | Affiche un bouton pour naviguer vers l’écran des détails avec un ID d’article (« details/123 »). |
DetailsScreen | Affiche l’ID de l’article passé en argument et un bouton pour revenir à l’écran précédent. |
navController | Contrôleur de navigation utilisé pour gérer la navigation entre les différents écrans. |
Scaffold | Fournit une structure de base pour l’application avec un NavHost pour la gestion de la navigation. |
Conclusion
Dans cet E-book, nous avons exploré comment configurer et utiliser NavHost et NavController pour la navigation dans une application Android construite avec Jetpack Compose.
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
Qu'est-ce que NavHost dans Jetpack Compose?
Comment fonctionne NavController dans Compose?
Comment configurer la bibliothèque de navigation dans Jetpack Compose?
Comment implémenter la navigation avec NavHost?
Comment passer des paramètres entre les écrans avec NavController?
Conclusion
En maîtrisant NavHost et NavController, vous pouvez créer des applications Android avec une navigation fluide et efficace. Quelles autres fonctionnalités de Jetpack Compose aimeriez-vous explorer pour enrichir vos applications?
