La navigation entre écrans dans une application peut vite devenir complexe.
Des transitions mal gérées peuvent frustrer les utilisateurs et compliquer le développement.
Jetpack Compose offre une solution simple et efficace avec la navigation par état, que cet article explore en détail.
Créez des interfaces modernes et réactives avec JetPack Compose!
Intro à la Navigation par État Compose
Intégration de l'État dans Jetpack Compose
Dans Jetpack Compose, la navigation entre les écrans peut être gérée en utilisant des états. Cette approche consiste à définir un état représentant l’écran courant, puis à modifier cet état pour naviguer d’un écran à un autre. Lorsque l’état change, la composable associée est automatiquement recomposée, ce qui permet d’afficher l’écran approprié.
Définition des Cibles de Navigation
La première étape consiste à définir les différentes cibles de navigation, c’est-à-dire les écrans de votre application. Ces cibles peuvent être définies sous forme d’énumérations ou de classes scellées.
sealed class Screen {
object ArticleList : Screen()
object ArticleDetail : Screen()
}
Dans cet exemple, nous définissons deux écrans : ArticleList pour afficher une liste d’articles, et ArticleDetail pour afficher les détails d’un article spécifique.
Création de l’État de Navigation
Ensuite, nous devons créer un état qui va contenir l’écran courant. Ce sera un MutableState qui pourra être modifié pour déclencher la navigation.
object Navigation {
var currentScreen by mutableStateOf<Screen>(Screen.ArticleList)
}
Élément | Description |
|---|---|
Objet Navigation | Contient la logique de navigation en gérant l’état de l’écran courant à afficher. |
État currentScreen | Utilise mutableStateOf pour stocker l’écran courant, permettant des mises à jour réactives de l’interface. |
Type Screen | Représente les différents écrans disponibles dans l’application, comme Screen.ArticleList. |
Initialisation | L’état currentScreen est initialisé avec Screen.ArticleList, définissant l’écran de départ. |
Modification de l’état | Changer currentScreen permet de naviguer entre les écrans en fonction des interactions utilisateur. |
L’objet Navigation contient l’état de l’écran courant, initialisé ici à Screen.ArticleList. Cet état déterminera quel écran sera affiché à tout moment.
Fonction de Navigation
Pour naviguer entre les écrans, nous allons créer une fonction qui modifie l’état currentScreen.
fun navigateTo(destination: Screen) {
Navigation.currentScreen = destination
}
Cette fonction navigateTo permet de changer l’écran courant en modifiant l’état currentScreen. Chaque fois que cette fonction est appelée, une recomposition est déclenchée, ce qui provoque l’affichage de l’écran correspondant.
Navigation Écrans avec Jetpack Compose
Lier l’État à l’Activité
Dans Jetpack Compose, le setContent d’une activité est utilisé pour définir la composable racine de l’application. Nous allons maintenant lier cet état de navigation à l’activité principale.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MainScreen()
}
}
}
Création de la Composable Principale
La composable principale MainScreen dépendra de l’état de navigation. Elle observera l’état currentScreen et affichera l’écran correspondant.
@Composable
fun MainScreen() {
when (Navigation.currentScreen) {
is Screen.ArticleList -> ArticleListScreen()
is Screen.ArticleDetail -> ArticleDetailScreen()
}}
Dans cette composable, nous utilisons une expression when pour déterminer quel écran afficher en fonction de l’état currentScreen. Si l’état est Screen.ArticleList, la composable ArticleListScreen sera affichée, et si l’état est Screen.ArticleDetail, ce sera la composable ArticleDetailScreen.
Gestion de la Recomposition Automatique
Affichage de la Liste des Articles
Nous allons maintenant créer la composable ArticleListScreen, qui affiche une liste d’articles et permet de naviguer vers l’écran de détails lorsqu’un article est sélectionné.
@Composable
fun ArticleListScreen() {
val articles = listOf("Article 1", "Article 2", "Article 3")
LazyColumn {
items(articles) { article ->
Text(
text = article,
modifier = Modifier.clickable {
navigateTo(Screen.ArticleDetail)
} ) } }}
Voici ce que renvoie le programme :
Dans cette composable, nous utilisons un LazyColumn pour afficher une liste d’articles. Chaque élément est cliquable, et lorsqu’un article est sélectionné, la fonction navigateTo est appelée pour naviguer vers l’écran Screen.ArticleDetail.
Affichage des Détails de l’Article
La composable ArticleDetailScreen est utilisée pour afficher les détails de l’article sélectionné.
@Composable
fun ArticleDetailScreen() {
Column {
Text(text = "Article Details")
Button(onClick = { navigateTo(Screen.ArticleList) }) {
Text("Back to List") } }}
Voici ce que renvoie le programme :
Dans cette composable, un simple texte « Article Details » est affiché, ainsi qu’un bouton permettant de revenir à la liste des articles en appelant navigateTo(Screen.ArticleList).
Élément | Description |
|---|---|
Column | Utilisé pour organiser les éléments verticalement. |
Text | Affiche le titre « Article Details ». |
Button | Un bouton qui, lorsqu’il est cliqué, appelle la fonction navigateTo pour changer d’écran. |
Texte du bouton | Affiche « Back to List » sur le bouton, indiquant l’action de retour à la liste d’articles. |
Conclusion sur la Navigation par État
Recomposition Automatique
L’un des avantages de cette approche est que la recomposition se fait automatiquement lorsque l’état change. Lorsque vous appelez navigateTo, l’état currentScreen est modifié, ce qui déclenche une recomposition de la composable principale MainScreen.
Conclusion
Utiliser des états pour gérer la navigation entre les écrans dans Jetpack Compose est une approche simple et efficace qui exploite pleinement les capacités de recomposition du framework. En séparant l’état de navigation et la logique d’affichage, vous obtenez un code plus flexible et plus facile à maintenir.
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 gérer la navigation par état dans Jetpack Compose?
Quels sont les avantages de la recomposition automatique?
Comment définir les cibles de navigation dans Jetpack Compose?
Comment intégrer l'état de navigation dans l'activité principale?
Comment implémenter la fonction de navigation entre écrans?
Conclusion
L’utilisation des états pour la navigation dans Jetpack Compose simplifie la gestion des écrans et améliore la réactivité de l’application. Quelle méthode préférez-vous pour gérer vos transitions d’écran?
