Organiser des éléments visuels efficacement dans une interface utilisateur peut être complexe.
Sans une bonne organisation, l’interface peut devenir désordonnée, rendant l’expérience utilisateur frustrante.
L’article présente les modifieurs Row et Column de Jetpack Compose pour un alignement et un arrangement optimisés.
Créez des interfaces modernes et réactives avec JetPack Compose!
Introduction aux Row et Column
Modifieurs Row Column en Jetpack Compose
Présentation de Row et Column
Les conteneurs Row et Column sont utilisés pour aligner les enfants horizontalement et verticalement, respectivement. Contrairement à Box, ils organisent les enfants dans un seul axe, et offrent des options d’alignement et d’arrangement.
Alignement dans Row et Column
- Row :L’alignement est contrôlé verticalement, avec les options Top, CenterVertically, et Bottom.
- Column :L’alignement est contrôlé horizontalement, avec les options Start, CenterHorizontally, et End.
Exemple d’utilisation dans Row :
Row(
modifier = Modifier.fillMaxWidth().padding(10.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(text = "Author", modifier = Modifier.weight(1f))
Text(text = "Username", modifier = Modifier.weight(2f))
Text(text = "Date", modifier = Modifier.weight(1f))}
La sortie attendue est la suivante :
Exemple d’utilisation dans Column :
Column(
modifier = Modifier.fillMaxHeight().padding(10.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "Title", modifier = Modifier.padding(bottom = 8.dp))
Text(text = "Description")}
La sortie attendue est la suivante :
Arrangement dans Row et Column
L’arrangement contrôle l’espacement entre les enfants dans un conteneur :
- SpaceBetween :Espacement égal entre les éléments, aucun espace aux extrémités.
- SpaceAround :Espacement égal entre les éléments, avec un espace supplémentaire aux extrémités.
- SpaceEvenly :Espacement égal entre les éléments, avec le même espace aux extrémités.
Alignement et Arrangement UI
Le composant Row remplit toute la largeur disponible et ajoute un espacement de 10 dp autour. Les trois textes « First », « Second », et « Third » sont disposés horizontalement et répartis de manière égale grâce à l’arrangement SpaceBetween, avec le premier texte à gauche, le second au centre, et le troisième à droite.
Row(
modifier = Modifier.fillMaxWidth().padding(10.dp),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(text = "First")
Text(text = "Second")
Text(text = "Third")}
La sortie attendue est la suivante :
Propriété | Description |
|---|---|
Modifier.fillMaxWidth() | Remplit toute la largeur disponible de l’écran ou du conteneur parent. |
Modifier.padding(10.dp) | Ajoute un espacement de 10 dp autour du contenu de la Row. |
Arrangement.SpaceBetween | Répartit l’espace horizontalement entre les éléments de manière égale, plaçant le premier texte à gauche, le second au centre, et le troisième à droite. |
Conclusion sur les Modifieurs UI
Les modifieurs dans Jetpack Compose sont des outils puissants qui permettent de personnaliser et d’ajuster les composables pour créer des interfaces utilisateur flexibles et adaptées aux besoins.
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 les modifieurs Row et Column fonctionnent-ils ?
Comment utiliser l'alignement dans Row et Column ?
Quels sont les différents types d'arrangement dans Row et Column ?
Comment appliquer le modifieur Arrangement.SpaceBetween ?
Quels sont les avantages des modifieurs dans Jetpack Compose ?
Conclusion
Les modifieurs sont fondamentaux pour personnaliser les interfaces dans Jetpack Compose. Quelles autres astuces utilisez-vous pour améliorer vos mises en page ?
