Jetpack Compose : Mise en page avec Row ou Column
Dans ce tutoriel nous allons apprendre à créer une simple mise en page pour classer les éléments de manière horizontale ou verticale.
Qu'est-ce qu'un Layout dans Android ?
Un Layout fournit un conteneur invisible pour contenir les vues ou les mises en page. Nous pouvons placer un groupe de vues/Layout à l'intérieur des Layouts. Le Row et Column sont des mises en page pour organiser nos vues de manière linéaire.
Qu'est-ce que la manière linéaire ?
Une manière linéaire signifie un élément par ligne. De cette manière, disposez les éléments les uns par rapport aux autres dans le même ordre soit horizontalement soit verticalement.
Row : Il organise les vues horizontalement.
Column : Il organise les vues verticalement.
Voyons maintenant chaque Layout et comment s'en servir.
Row
Une rangée affichera chaque enfant à côté des enfants précédents. C'est comme un LinearLayout avec une orientation horizontale.
@Composable
fun LayoutRow(){
Row {
Text(text = "Row Text 1", Modifier.background(Color.Red))
Text(text = "Row Text 2", Modifier.background(Color.Green))
Text(text = "Row Text 3", Modifier.background(Color.Blue))
Text(text = "Row Text 4", Modifier.background(Color.Green))
}
}
Column
Une colonne affichera chaque enfant sous les enfants précédents. C'est comme un LinearLayout avec une orientation verticale.
@Composable
fun LayoutColumn(){
Column {
Text(text = "Column Text 1", Modifier.background(Color.Red))
Text(text = "Column Text 2", Modifier.background(Color.White))
Text(text = "Column Text 3", Modifier.background(Color.Green))
Text(text = "Column Text 4", Modifier.background(Color.Blue))
}
}
Je place ces composables à l'intérieur de la colonne avec des étiquettes. Pas de panique, jee vais mettre le code source complet à la fin de ce tutoriel.
Aperçu :
Alignment
Il existe neuf options d'alignement qui peuvent s'appliquer aux éléments enfant d'un layout :
Arrangement
Nous avons également trois arrangements qui peuvent être appliqués en tant qu'arrangements verticaux et horizontaux :
- SpaceEvenly
- SpaceBetween
- SpaceAround
La disposition SpaceEvenly place les éléments enfants sur l'axe principal, y compris l'espace libre avant le premier et après le dernier enfant.
La disposition SpaceBetween place les éléments enfants sur l'axe principal sans espace libre avant le premier et après le dernier enfant.
La disposition SpaceAround place les éléments enfants sur l'axe principal avec la moitié de l'espace libre avant le premier et après le dernier enfant.
Disposition et alignement des rangées
@Composable
fun RowArrangement(){
Row(modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.Top,
horizontalArrangement = Arrangement.SpaceEvenly) {
Text(text = " Text 1")
Text(text = " Text 2")
Text(text = " Text 3")
Text(text = " Text 4")
}
}
Disposition et alignement des colonnes
@Composable
fun ColumnArrangement(){
Column(modifier = Modifier.fillMaxHeight().fillMaxWidth(),
verticalArrangement = Arrangement.SpaceEvenly,
horizontalAlignment = Alignment.End
) {
Text(text = "Text 1",Modifier.background(Color.Red))
Text(text = "Text 2",Modifier.background(Color.Blue))
Text(text = "Text 3",Modifier.background(Color.Green))
Text(text = "Text 4",Modifier.background(Color.Red))
}
}
Code complet :
package dev.mbiya.composetutoriel
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import dev.mbiya.composetutoriel.ui.theme.ComposetutorielTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposetutorielTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Greeting("Android")
}
}
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
@Preview(name = "Preview1", device = Devices.PIXEL, showSystemUi = true)
@Composable
fun DefaultPreview() {
ComposetutorielTheme {
Column {
Text(text = "Layout Horizontale", Modifier.padding(16.dp, 16.dp), fontSize = 24.sp)
LayoutRow()
Text(text = "Layout vertical", Modifier.padding(16.dp, 16.dp), fontSize = 24.sp)
LayoutColumn()
}
}
}
@Composable
fun LayoutRow(){
Row {
Text(text = "Row Text 1", Modifier.background(Color.Red))
Text(text = "Row Text 2", Modifier.background(Color.Green))
Text(text = "Row Text 3", Modifier.background(Color.Blue))
Text(text = "Row Text 4", Modifier.background(Color.Green))
}
}
@Composable
fun LayoutColumn(){
Column {
Text(text = "Column Text 1", Modifier.background(Color.Red))
Text(text = "Column Text 2", Modifier.background(Color.White))
Text(text = "Column Text 3", Modifier.background(Color.Green))
Text(text = "Column Text 4", Modifier.background(Color.Blue))
}
}
@Composable
fun RowArrangement() {
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.Top,
horizontalArrangement = Arrangement.SpaceEvenly
) {
Text(text = " Text 1")
Text(text = " Text 2")
Text(text = " Text 3")
Text(text = " Text 4")
}
}
@Composable
fun ColumnArrangement(){
Column(modifier = Modifier.fillMaxHeight().fillMaxWidth(),
verticalArrangement = Arrangement.SpaceEvenly,
horizontalAlignment = Alignment.End
) {
Text(text = "Text 1",Modifier.background(Color.Red))
Text(text = "Text 2",Modifier.background(Color.Blue))
Text(text = "Text 3",Modifier.background(Color.Green))
Text(text = "Text 4",Modifier.background(Color.Red))
}
}
Suivez ce codelab pour en apprendre plus sur les layouts : Mise en page dans Jetpack Compose
Posts similaires
Jetpack Compose : Mise en page avec Row ou Column
Présentation de JetPack Compose
Android JetPack Compose Preview
Catégories
Soyez au courant des dernières tendances
Abonnez-vous pour obtenir les meilleurs articles, tutoriels, astuces et informations !
Laissez votre commentaire à @johnmbiya