Jetpack Compose – Navigation et Personnalisation des Thèmes

Bonjour et bienvenue dans mon article numéro 3 qui porte sur Jetpack Compose. Rappel : Jetpack Compose est un framework moderne de développement d'interfaces utilisateur pour Android qui utilise une approche déclarative, permettant de créer des UI en utilisant des fonctions Kotlin. Il remplace l'utilisation des fichiers XML par des fonctions composables, simplifiant ainsi le processus de conception et de gestion des états. Jetpack Compose simplifie la navigation et la personnalisation des interfaces en adoptant une approche déclarative et fluide. Grâce à NavController et NavHost, la gestion des écrans devient plus intuitive, tandis que MaterialTheme permet d’harmoniser les couleurs et les styles de l’application.

Navigation avec Jetpack Compose

La navigation dans Jetpack Compose est conçue pour être à la fois simple et efficace. Contrairement à l’approche traditionnelle qui repose sur l’utilisation de Fragment et d’Intent, Compose adopte une architecture plus modulaire et fluide. Chaque écran de l'application est défini comme une destination dans un composant NavHost. Cela signifie que vous pouvez facilement ajouter, modifier ou supprimer des écrans sans avoir à gérer des transactions complexes. Pour configurer la navigation, vous commencez par créer un NavController, qui est responsable de la gestion des changements d’écran. Voici un exemple simple pour mettre en place la navigation dans votre application :

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    NavHost(navController, startDestination = "accueil") {
        composable("accueil") { AccueilScreen(navController) }
        composable("details") { DetailsScreen() }
    }
}

Dans cet exemple, NavHost définit l’écran de départ comme accueil, et chaque écran supplémentaire est ajouté à l’aide de la fonction composable. Pour naviguer d’un écran à l’autre, il suffit d’appeler navigate() sur le NavController :

Button(onClick = { navController.navigate("details") }) {
    Text("Voir les détails")
}

Cette approche permet de garder votre code propre et organisé, tout en réduisant la complexité de la gestion des écrans.

Personnalisation des Thèmes et Styles

Jetpack Compose offre une flexibilité considérable pour personnaliser les thèmes et les styles de votre application. Avec MaterialTheme, vous pouvez facilement définir des couleurs, des typographies et des formes qui s'appliquent à l'ensemble de votre application, garantissant une cohérence visuelle. Exemple de définition d'une palette de couleurs Pour personnaliser votre thème, vous devez d'abord définir une palette de couleurs. Cela se fait généralement dans un fichier Kotlin dédié, où vous déclarez vos couleurs en utilisant la classe Color :

val Purple500 = Color(0xFF6200EE)
val Teal200 = Color(0xFF03DAC5)

Ces couleurs peuvent ensuite être utilisées dans votre thème personnalisé pour créer une interface qui reflète l'identité de votre marque. Exemple de création d'un thème personnalisé Après avoir défini vos couleurs, vous pouvez créer un thème personnalisé en utilisant MaterialTheme. Voici un exemple simple de création d'un thème qui applique votre palette de couleurs :

@Composable
fun MyCustomTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colorScheme = lightColorScheme(primary = Purple500, secondary = Teal200),
        content = content
    )
}

Ensuite, vous appliquez ce thème dans votre activité principale ou dans le composant racine de votre application. Cela garantit que tous les composables imbriqués dans MyCustomTheme utiliseront automatiquement les styles que vous avez définis.

Conclusion

La personnalisation des thèmes et des styles dans Jetpack Compose est non seulement simple mais aussi puissante. Grâce à une approche déclarative, vous pouvez rapidement ajuster l'apparence de votre application sans avoir à modifier chaque composant individuellement. En utilisant NavHost pour la navigation et MaterialTheme pour les styles, vous pouvez créer des applications fluides, cohérentes et faciles à maintenir.

Sources

• Développeurs d'Android « Navigation avec Compose », dans Google, dir., Documentation officielle de Jetpack Compose, 2023, https://developer.android.com/jetpack/compose/navigation.
• KHERA, Harman. « Theming and Styling in Jetpack Compose », dans Medium, dir., Sep 25, 2024, https://medium.com/@harmanpreet.khera/theming-and-styling-in-jetpack-compose-6fb264c50c45.