Créer des interfaces utilisateur attrayantes peut être complexe lorsque vous devez superposer des éléments.
Les limitations des conteneurs traditionnels comme Row et Column peuvent restreindre la création de designs sophistiqués.
La Box de Jetpack Compose offre une solution en permettant la superposition et le positionnement précis d’éléments, rendant vos interfaces à la fois élégantes et fonctionnelles.
Créez des interfaces modernes et réactives avec JetPack Compose!
Box Jetpack Compose: Introduction
Box Jetpack Compose: Rôle clé
Après avoir exploré les conteneurs linéaires tels que Row et Column, il est temps de se pencher sur un autre type de conteneur dans Jetpack Compose : la Box. La Box est un conteneur simple mais puissant qui permet de superposer des éléments les uns sur les autres. Dans ce chapitre, nous allons examiner en détail le rôle de la Box, comment positionner les éléments à l’intérieur, et comment l’utiliser pour créer des interfaces utilisateur élégantes et fonctionnelles.
Positionnement dans Box Compose
La Box est équivalente à un FrameLayout dans les anciennes API Android. Contrairement aux Row et Column, qui organisent les éléments de manière linéaire, la Box permet de superposer les éléments. Cela peut être particulièrement utile lorsque vous souhaitez jouer avec la transparence, la taille, ou lorsque vous avez besoin de superposer des éléments pour obtenir un effet visuel spécifique.
Superposition des Éléments
La Box place ses enfants les uns sur les autres, ce qui signifie que vous pouvez avoir un élément visible au-dessus d’un autre. Cela est utile pour créer des interfaces où les éléments doivent se chevaucher, comme des boutons flottants ou des badges.
Exemple de Code: Superposition Simple
@Composable
fun BoxExample() {
Box(
modifier = Modifier
.size(100.dp)
.background(Color.Gray)
) {
Text(
text = "Texte en Bas",
modifier = Modifier
.align(Alignment.Center)
.background(Color.White)
)
Icon(
imageVector = Icons.Default.Favorite,
contentDescription = "Icône Favori",
modifier = Modifier
.align(Alignment.TopEnd)
.padding(8.dp)
)
}
}
Voici ce que donne le code en sortie :
Dans cet exemple :
- Le texte est centré dans la Box.
- L’icône est positionnée en haut à droite avec un padding.
Superposition et Alignement Box
La Box offre un contrôle précis sur la position des éléments enfants. Vous pouvez utiliser les modificateurs d’alignement pour spécifier où chaque élément doit apparaître par rapport à la Box.
Alignement Horizontal et Vertical
Les éléments peuvent être alignés en utilisant les paramètres d’alignement comme Alignment.TopStart, Alignment.Center, Alignment.BottomEnd, etc.
Exemple de Code: Alignement dans la Box
@Composable
fun PositionedBoxExample() {
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.LightGray)
) {
Text(
text = "Texte Centré",
modifier = Modifier
.align(Alignment.Center)
.background(Color.White)
.padding(16.dp)
)
Icon(
imageVector = Icons.Default.Favorite,
contentDescription = "Icône Favori",
modifier = Modifier
.align(Alignment.TopEnd)
.padding(16.dp)
.background(Color.Red)
)
}
}
Voici ce que donne le code en sortie :
Dans cet exemple :
- Le texte est aligné au centre de la Box.
- L’icône est alignée en haut à droite avec un fond rouge et un padding.
Décoration et Style de la Box
Pour illustrer l’utilisation de la Box, nous allons améliorer l’exemple précédent d’un écran de détail d’article. Nous souhaitons positionner un texte au centre et une icône en haut à droite pour indiquer que l’article est favori.
Création de l’Écran de Détail
Nous utiliserons une Box pour superposer un titre et une icône favori.
Exemple de Code: Écran de Détail avec Box
@Composable
fun ArticleDetailScreen(article: Article) {
Box(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
.background(Color.White)
) {
// Titre de l'article
Text(
text = article.title,
style = MaterialTheme.typography.h4,
modifier = Modifier
.align(Alignment.Center)
.background(Color.LightGray)
.padding(16.dp)
)
// Icône favori
Icon(
imageVector = Icons.Default.Favorite,
contentDescription = "Marquer comme Favori",
modifier = Modifier
.align(Alignment.TopEnd)
.padding(16.dp)
.clickable { /* Action pour marquer comme favori */ }
) }}
Voici ce que donne le code en sortie :
Dans cet exemple :
- Le titre de l’article est centré dans la Box avec un fond léger.
- L’icône favori est alignée en haut à droite et est cliquable pour marquer l’article comme favori.
Amélioration du Visuel
Pour améliorer le visuel, vous pouvez ajouter des décorations comme des arrondis aux bords et des ombres.
Exemple de Code: Décoration de la Box
@Composable
fun StyledBoxExample() {
Box(
modifier = Modifier
.size(200.dp)
.background(Color.White, shape = RoundedCornerShape(16.dp))
.border(1.dp, Color.Gray, shape = RoundedCornerShape(16.dp))
.padding(16.dp)
) {
Text(
text = "Texte dans une Box Stylée",
style = MaterialTheme.typography.h6,
modifier = Modifier
.align(Alignment.Center)
.background(Color.LightGray)
.padding(16.dp)
)
}
}
Voici ce que donne le code en sortie :
Élément | Description |
|---|---|
Modifier.size(200.dp) | Définit la taille de la Box à 200×200 dp. |
Modifier.background(Color.White, shape = …) | Applique un fond blanc à la Box avec des coins arrondis de 16 dp grâce à RoundedCornerShape. |
Modifier.border(1.dp, Color.Gray, shape = …) | Ajoute une bordure grise de 1 dp d’épaisseur autour de la Box, également avec des coins arrondis. |
Modifier.padding(16.dp) | Applique une marge interne de 16 dp à l’intérieur de la Box. |
Text | Affiche le texte « Texte dans une Box Stylée » centré à l’intérieur de la Box. |
Modifier.align(Alignment.Center) | Centre le texte horizontalement et verticalement dans la Box. |
Modifier.background(Color.LightGray) | Applique un fond gris clair au texte pour le mettre en valeur à l’intérieur de la Box. |
Modifier.padding(16.dp) | Ajoute un espacement de 16 dp autour du texte pour l’isoler visuellement à l’intérieur de la Box. |
Dans cet exemple :
- La Box a des coins arrondis, une bordure grise, et un padding interne.
- Le texte est aligné au centre avec un fond léger.
Conclusion sur Box Compose
La Box dans Jetpack Compose est un conteneur versatile qui permet de superposer des éléments et de les positionner avec précision. En utilisant les modificateurs d’alignement et en ajoutant des décorations, vous pouvez créer des interfaces utilisateur complexes et attrayantes.
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 utiliser la Box pour superposer des éléments dans Jetpack Compose ?
Comment aligner des éléments dans une Box ?
Quels sont les avantages de la Box par rapport à Row et Column ?
Comment ajouter des décorations comme des coins arrondis à une Box ?
Comment créer un écran de détail d'article avec une Box ?
Conclusion
La Box dans Jetpack Compose est un outil puissant pour construire des interfaces sophistiquées. Quelles autres applications créatives pourriez-vous imaginer en utilisant la Box ?
