Créer des interfaces utilisateur élégantes sur Android peut être complexe sans les bons outils.
Une mauvaise gestion de l’alignement et de l’arrangement des éléments peut entraîner des interfaces désordonnées.
Jetpack Compose simplifie ce processus avec ses conteneurs Row et Column, permettant des mises en page structurées et esthétiques.
Créez des interfaces modernes et réactives avec JetPack Compose!
Introduction
Jetpack Compose est un toolkit moderne pour construire des interfaces utilisateur sur Android. Deux des conteneurs les plus fondamentaux dans Jetpack Compose sont les Row et Column. Ces conteneurs permettent de disposer les éléments de manière linéaire, soit horizontalement (Row), soit verticalement (Column). Ce chapitre vous expliquera comment utiliser ces conteneurs efficacement pour créer des mises en page attrayantes et fonctionnelles. Nous aborderons la façon dont ces conteneurs fonctionnent, les concepts d’alignement et d’arrangement, ainsi que des exemples pratiques pour illustrer leur utilisation.
Conteneurs Linéaires: Row et Column
Les conteneurs linéaires sont des éléments qui permettent de disposer les éléments enfants de manière séquentielle, soit en ligne (Row), soit en colonne (Column). Leur simplicité les rend très utiles pour construire des mises en page structurées.
Le Conteneur Row
Le conteneur Row aligne ses éléments enfants horizontalement. Les paramètres principaux à gérer avec Row sont l’alignement vertical et l’arrangement horizontal.
Exemple de Code: Conteneur Row
@Composable
fun MyRowExample() {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text("Premier Élément")
Button(onClick = { /* Action */ }) {
Text("Bouton")
}
Icon(Icons.Default.Favorite, contentDescription = "Favori")
}
}
Dans cet exemple, les éléments sont disposés horizontalement avec un espacement égal entre eux (Arrangement.SpaceBetween). L’alignement vertical est centré (Alignment.CenterVertically).
Voici ce que donne le code en sortie :
Le Conteneur Column
Le conteneur Column aligne ses éléments enfants verticalement. Les principaux paramètres ici sont l’alignement horizontal et l’arrangement vertical.
Exemple de Code: Conteneur Column
@Composable
fun MyColumnExample() {
Column(
modifier = Modifier
.fillMaxHeight()
.padding(16.dp),
verticalArrangement = Arrangement.SpaceAround,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("Premier Élément")
Button(onClick = { /* Action */ }) {
Text("Bouton")
}
Icon(Icons.Default.Favorite, contentDescription = "Favori") }}
Ici, les éléments sont disposés verticalement avec un espacement égal autour d’eux (Arrangement.SpaceAround). L’alignement horizontal est centré (Alignment.CenterHorizontally).
Voici ce que donne le code en sortie :
Alignement et Arrangement
L’alignement et l’arrangement sont essentiels pour contrôler comment les éléments sont disposés dans les conteneurs Row et Column.
Alignement
L’alignement définit la position des éléments le long de l’axe perpendiculaire à l’axe principal du conteneur.
- Pour Row :L’alignement vertical.
- Pour Column :L’alignement horizontal.
Exemple d’Alignement Vertical dans Row
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.Top
)
{
Text("Élément en Haut")
Text("Élément en Bas")
}
Voici ce que donne le code en sortie :
Dans cet exemple, les éléments sont alignés en haut de la Row.
Exemple d’Alignement Horizontal dans Column
Column(
modifier = Modifier.fillMaxHeight(),
horizontalAlignment = Alignment.Start
) {
Text("Élément à Gauche")
Text("Élément à Droite")
}
Voici ce que donne le code en sortie :
Ici, les éléments sont alignés à gauche de la Column.
Arrangement
L’arrangement détermine l’espacement des éléments le long de l’axe principal du conteneur.
- Pour Row :L’arrangement horizontal.
- Pour Column :L’arrangement vertical.
Exemple Pratique: Écran de Détail d'Article
Pour illustrer l’utilisation des conteneurs Row et Column, nous allons créer un écran de détail d’article. Cet écran affichera un titre, une image, et du texte supplémentaire.
Création de la Classe Article
Créez une classe Article pour représenter les données de l’article.
data class Article(
val id: Int,
val title: String,
val author: String,
val date: String,
val content: String
)
Création de l’Écran de Détail
Utilisez une Column pour disposer les éléments de manière verticale, en ajoutant une Row pour afficher des informations supplémentaires comme le nom de l’auteur et la date.
Exemple de Code: Écran de Détail
@Composable
fun ArticleDetailScreen(article: Article) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
.verticalScroll(rememberScrollState()),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
Text(text = article.title, style = MaterialTheme.typography.h4)
Image(painter = painterResource(id = R.drawable.favorite), contentDescription = null)
Text(text = article.content, style = MaterialTheme.typography.body1)
Spacer(modifier = Modifier.height(8.dp))
Row(
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(text = "Auteur: ${article.author}", style = MaterialTheme.typography.body2)
Text(text = "Date: ${article.date}", style = MaterialTheme.typography.body2) } }}
Voici ce que donne le code en sortie :
Dans cet exemple :
- Column :Dispose le titre, l’image, et le texte principal de l’article verticalement.
- Row :Affiche le nom de l’auteur et la date horizontalement.
- Spacer :Ajoute de l’espace entre les éléments.
Prévisualisation
Créez une fonction de prévisualisation pour voir l’interface en action.
@Preview(showBackground = true)
@Composable
fun PreviewArticleDetailScreen() {
ArticleDetailScreen(
article = Article(
id = 1,
title = "Titre de l'Article",
author = "Auteur",
date = "01/01/2024",
content = "Contenu de l'article..."
)
)}
Élément | Description |
|---|---|
@Preview(showBackground = true) | Annote la fonction pour générer un aperçu de l’interface utilisateur dans Android Studio avec un fond visible. |
@Composable | Marque la fonction comme composable dans Jetpack Compose, permettant sa composition dans l’UI. |
ArticleDetailScreen(article = Article(…)) | Appelle la fonction ArticleDetailScreen avec une instance de Article pour prévisualiser l’UI avec des données d’exemple. |
Article(id = 1, title = « Titre de l’Article », author = « Auteur », date = « 01/01/2024 », content = « Contenu de l’article… ») | Crée un objet Article avec des données d’exemple pour tester l’affichage dans l’aperçu. |
Conclusion
Les conteneurs Row et Column dans Jetpack Compose sont des outils puissants pour créer des mises en page linéaires. En comprenant leur fonctionnement et en maîtrisant les concepts d’alignement et d’arrangement, vous pouvez concevoir des interfaces utilisateur élégantes et fonctionnelles.
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 Row et Column dans Jetpack Compose?
Quels sont les avantages des conteneurs linéaires?
Comment contrôler l'alignement dans Jetpack Compose?
Comment gérer l'espacement des éléments?
Comment afficher un article avec Jetpack Compose?
Conclusion
En maîtrisant Row et Column dans Jetpack Compose, vous pouvez créer des interfaces utilisateur fluides et élégantes. Quelle sera votre prochaine création avec ces outils?
