Les développeurs ont souvent du mal à créer des interfaces utilisateur performantes et bien alignées.
Cela peut entraîner des expériences utilisateur médiocres et des interfaces difficiles à maintenir.
Cet article explore les modifieurs Jetpack Compose, offrant des solutions pour des alignements précis et des interactions fluides.
Créez des interfaces modernes et réactives avec JetPack Compose!
Introduction aux Modifieurs Jetpack Compose
Alignement Box, Row, et Column en Compose
BoxScope
Les Box permettent d’empiler des éléments les uns sur les autres. Le modifieur align est utilisé pour positionner les éléments à l’intérieur de la boîte selon neuf positions différentes. Voici un exemple de code pour illustrer l’utilisation de la Box :
@Composable
fun BoxExample() {
Box(
modifier = Modifier.size(200.dp)
) {
Text(
text = "Titre",
modifier = Modifier
.align(Alignment.TopStart)
.padding(16.dp)
)
Text(
text = "Auteur",
modifier = Modifier
.align(Alignment.BottomEnd)
.padding(16.dp)
)
}
}
La sortie attendue est la suivante :
Dans cet exemple, le titre est aligné en haut à gauche (TopStart) et l’auteur en bas à droite (BottomEnd).
RowScope
Les Row permettent d’aligner des éléments horizontalement. Vous pouvez utiliser les modifieurs align et alignBy pour ajuster l’alignement des éléments dans une ligne. Voici comment vous pouvez configurer les alignements :
@Composable
fun RowExample() {
Row(
modifier = Modifier.padding(16.dp)
) {
Text(
text = "Nom",
modifier = Modifier
.weight(1f)
.alignByBaseline()
)
Text(
text = "Prénom",
modifier = Modifier
.weight(1f)
.alignByBaseline()
)
}
}
La sortie attendue est la suivante :
Dans cet exemple, les textes « Nom » et « Prénom » sont alignés selon la ligne de base de leurs polices respectives.
ColumnScope
Les Column permettent d’empiler des éléments verticalement. Vous pouvez utiliser les modifieurs align pour ajuster l’alignement des éléments dans une colonne. Voici un exemple :
@Composable
fun ColumnExample() {
Column(
modifier = Modifier.padding(16.dp)
) {
Text(
text = "Titre",
modifier = Modifier.align(Alignment.CenterHorizontally)
)
Text(
text = "Description",
modifier = Modifier.align(Alignment.Start)
)
}
}
La sortie attendue est la suivante :
Dans cet exemple, le titre est centré horizontalement tandis que la description est alignée à gauche.
Modifieurs Clickable et Scrollable en Action
Modifieur Cliquable
Le modifieur clickable permet de rendre un composable interactif. Vous devez fournir un callback qui sera exécuté lorsque l’utilisateur cliquera sur l’élément. Voici un exemple :
@Composable
fun ClickableExample(onClick: () -> Unit) {
Text(
text = "Cliquez ici",
modifier = Modifier
.padding(16.dp)
.clickable(onClick = onClick) )}
La sortie attendue est la suivante :
Modifieur Scrollable
Le modifieur scrollable permet de rendre un composable défilable. Vous devez maintenir l’état du défilement à l’aide de rememberScrollState. Voici un exemple :
@Composable
fun ScrollableExample() {
val scrollState = rememberScrollState()
Column(
modifier = Modifier
.verticalScroll(scrollState)
.padding(16.dp) ) { // Contenu long }}
Caractéristique | Modificateur Clickable | Modificateur Scrollable |
|---|---|---|
Fonction principale | Rend un composant interactif en permettant des actions sur clic. | Rend un composant défilable pour gérer le débordement de contenu. |
Utilisation | Modifier.clickable { /* Action à réaliser */ } | Modifier.verticalScroll(rememberScrollState()) ou Modifier.horizontalScroll(rememberScrollState()) |
Exemple d’application | Boutons, images, titres, ou tout autre élément nécessitant une interaction au clic. | Listes longues, contenus dynamiques qui dépassent la taille de l’écran. |
Paramètres requis | Callback à exécuter lors du clic. | ScrollState à mémoriser pour suivre la position de défilement. |
Effet visuel | Aucun effet visuel par défaut, mais peut être personnalisé avec des états visuels (comme un effet de survol). | Affiche des barres de défilement si le contenu dépasse la taille du conteneur. |
Gestion de l’état | Non nécessaire à moins d’une modification d’état visuelle. | Nécessite rememberScrollState pour suivre la position du défilement. |
Réutilisation et Optimisation des Modifieurs
Réutilisation des Modifieurs
Pour éviter la redondance et améliorer les performances, vous pouvez réutiliser les modifieurs en les stockant dans des variables. Voici comment procéder :
@Composable
fun ReusableModifierExample() {
val commonModifier = Modifier
.padding(16.dp)
.background(Color.Gray)
Column(
modifier = commonModifier
) {
Text("Texte 1", modifier = commonModifier)
Text("Texte 2", modifier = commonModifier)
}}
La sortie attendue est la suivante :
Performance et Réduction de la Charge de Travail
En réutilisant les modifieurs et en les extrayant dans des variables, vous réduisez la charge de travail et améliorez les performances en évitant des allocations répétées. Cela est particulièrement utile lors de la recomposition fréquente des éléments.
Conclusion sur les Modifieurs en UI
Les modifieurs dans Jetpack Compose offrent une flexibilité puissante pour personnaliser et aligner les éléments graphiques. Il y a les différentes possibilités d’alignement dans les scopes de Box, Row, et Column, ainsi que les modifieurs pour les comportements interactifs, vous pouvez créer des interfaces utilisateur réactives et performantes. La réutilisation des modifieurs est également essentielle pour maintenir un code propre et performant.
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 fonctionnent les modifieurs dans Jetpack Compose ?
Comment aligner des éléments avec BoxScope, RowScope et ColumnScope ?
Comment rendre un composable interactif avec le modifieur clickable ?
Comment utiliser le modifieur scrollable pour gérer le contenu défilable ?
Pourquoi réutiliser les modifieurs dans Jetpack Compose ?
Conclusion
Les modifieurs Jetpack Compose offrent une personnalisation avancée des interfaces utilisateur. Comment envisagez-vous d’exploiter ces modifieurs pour enrichir vos projets futurs ?
