La création d’interfaces utilisateur modernes et réactives pour Android peut être complexe sans les bons outils.
Sans une approche structurée, la gestion de la navigation et de la structure d’interface peut devenir confuse et désordonnée.
Jetpack Compose propose des composants tels que NavHost Controller et Scaffold pour simplifier ces processus et concevoir des interfaces élégantes.
Créez des interfaces modernes et réactives avec JetPack Compose!
Navigation Jetpack Compose: Introduction
NavHost Controller: Gérer Navigation
Dans cet eBook, nous allons détailler deux concepts clés pour la construction d’interfaces utilisateur modernes avec Jetpack Compose : la navigation et l’utilisation de Scaffold .
Compose UI: Interface avec Scaffold
Introduction à la Navigation dans Jetpack Compose
La navigation est un élément fondamental dans toute application mobile. Elle permet de lier différents écrans et de gérer les transitions entre eux. Dans Jetpack Compose, la navigation est facilitée par l’utilisation de la bibliothèque androidx.navigation:navigation-compose.
Pour commencer, vous devez ajouter la dépendance suivante à votre fichier build.gradle :
dependencies {
implementation "androidx.navigation:navigation-compose:2.6.0-alpha04"
}
Cette dépendance vous donne accès à un ensemble de fonctions et de composables spécifiques pour gérer la navigation dans votre application.
Configuration du NavHost Controller
Le NavHost Controller est le centre de la navigation dans une application Compose. Il gère les routes et les transitions entre les différents écrans. Pour l’implémenter, vous devez d’abord créer un NavHostController à l’aide de la fonction rememberNavController().
val navController = rememberNavController()
Ensuite, vous pouvez définir votre graphique de navigation à l’aide de NavHost. Ce graphique spécifie quelles routes sont disponibles et les composables associés à chaque route.
NavHost(navController = navController, startDestination = "home") {
composable("home") { HomeScreen() }
composable("login") { LoginScreen() }
}
Définir les Routes et les Paramètres
Chaque route dans le NavHost est définie par un identifiant unique. Vous pouvez également passer des paramètres à ces routes si nécessaire. Par exemple :
composable("profile/{userId}") { backStackEntry ->
val userId = backStackEntry.arguments?.getString("userId")
ProfileScreen(userId)}
Élément | Description |
|---|---|
Naviguer vers une Route | Utilise navController.navigate(« profile/$userId ») pour naviguer vers un écran spécifique. |
Définition de la Route | Exemple : composable(« profile/{userId} ») { backStackEntry -> ProfileScreen(userId) }. |
Paramètres de Route | Passe des paramètres dynamiques comme {userId} pour personnaliser la navigation. |
Gestion de la Pile | Utilise navController.popBackStack() pour revenir en arrière dans la pile de navigation. |
Comportement de la Pile | Peut gérer des comportements spécifiques de la pile, comme empêcher l’utilisateur de revenir en arrière. |
Navigateur de NavController | Permet la gestion centralisée de la navigation dans l’application avec des routes définies. |
Pour naviguer vers une route spécifique, vous utilisez la fonction navigate du NavController :
navController.navigate("profile/$userId")
Gestion de la Pile de Navigation
La navigation Compose permet également de gérer la pile de navigation, comme revenir en arrière avec popBackStack() ou gérer les comportements de la pile d’écrans :
navController.popBackStack()
Le code retourne le résultat suivant :
Scaffold & Material Design: Cohérence UI
Introduction à Scaffold
Scaffold est un composant central de Jetpack Compose qui facilite la construction d’interfaces utilisateurs cohérentes en suivant les directives de Material Design . Il permet de gérer des éléments d’interface tels que la TopBar, le Drawer, le FloatingActionButton, et le Snackbar.
Mise en Place de Scaffold
Pour utiliser Scaffold, vous devez le configurer avec les éléments d’interface que vous souhaitez inclure, comme la barre du haut (TopBar), un tiroir de navigation (Drawer), et un bouton d’action flottant (FloatingActionButton).
Scaffold(
topBar = { TopAppBar(title = { Text("Title") }) },
floatingActionButton = {
FloatingActionButton(onClick = { /* Action */ }) {
Icon(Icons.Filled.Add, contentDescription = "Add") } },
content = { innerPadding ->
// Contenu principal de l'écran })
Le code retourne le résultat suivant :
Gestion de l’État avec ScaffoldState
Scaffold fonctionne en tandem avec un ScaffoldState, qui est une variable d’état gérant la cohérence entre les différents éléments d’interface. Par exemple, pour gérer l’ouverture et la fermeture du Drawer, vous devez créer un ScaffoldState et un CoroutineScope pour manipuler
val scaffoldState = rememberScaffoldState()
val coroutineScope = rememberCoroutineScope()
Scaffold(
scaffoldState = scaffoldState,
drawerContent = { /* Drawer content */ },
topBar = {
TopAppBar(
title = { Text("Title") },
navigationIcon = {
IconButton(onClick = {
coroutineScope.launch {
scaffoldState.drawerState.open() } }) {
Icon(Icons.Filled.Menu, contentDescription = "Menu")}}})
Le code retourne le résultat suivant :
Exemple d’Implémentation : Liste d’Articles
Voici un exemple complet d’utilisation de Scaffold dans une application affichant une liste d’articles avec une TopBar, un FloatingActionButton, et un Drawer.
@Composable
fun ArticleListScreen(viewModel: ArticleViewModel) {
val articles by viewModel.articles.observeAsState(emptyList())
val scaffoldState = rememberScaffoldState()
val coroutineScope = rememberCoroutineScope()
Scaffold(
scaffoldState = scaffoldState,
topBar = {
TopAppBar(
title = { Text("Articles") },
navigationIcon = {
IconButton(onClick = {
coroutineScope.launch {
scaffoldState.drawerState.open()
}
}) {
Icon(Icons.Filled.Menu, contentDescription = "Menu")
}
}
)
},
floatingActionButton = {
FloatingActionButton(onClick = { /* Ajouter un article */ }) {
Icon(Icons.Filled.Add, contentDescription = "Add")
}
},
content = { padding ->
LazyColumn(contentPadding = padding) {
items(articles) { article ->
Text(text = article.title)
} }
},
drawerContent = {
// Contenu du drawer }
)
}
Le code retourne le résultat suivant :
Voici l’explication du code
Élément | Description |
|---|---|
Scaffold | Structure principale de l’interface qui gère la disposition des éléments tels que TopBar, FAB, et Drawer. |
TopAppBar | Barre supérieure de l’application avec un titre « Articles » et une icône de navigation pour ouvrir le Drawer. |
FloatingActionButton | Bouton d’action flottant permettant d’ajouter un nouvel article. |
LazyColumn | Affiche la liste des articles récupérés du ViewModel dans une liste déroulante. |
Conclusion sur Jetpack Compose Navigation
Dans cet eBook, nous avons exploré deux aspects essentiels de Jetpack Compose : la navigation avec NavHostController et la structure d’interface utilisateur avec Scaffold. En utilisant ces outils, vous pouvez construire des applications Android modernes et réactives, tout en suivant les directives de Material Design. Ces concepts, bien que simples en apparence, sont extrêmement puissants et permettent de créer des interfaces utilisateur robustes et flexibles.
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
Comment configurer la navigation dans Jetpack Compose?
Qu'est-ce que le NavHost Controller dans Jetpack Compose?
Comment utiliser Scaffold dans Jetpack Compose?
Quels sont les avantages d'utiliser Jetpack Compose pour la navigation?
Comment gérer la pile de navigation avec Jetpack Compose?
Conclusion
En combinant NavHost Controller et Scaffold, Jetpack Compose offre des solutions puissantes pour développer des interfaces utilisateur modernes. Quelle prochaine fonctionnalité de Jetpack Compose souhaitez-vous explorer?
