Jetpack Compose : Mise en page avec Row ou Column - Letecode

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.

Jean Claude Mbiya
Jean Claude Mise à jour : 21 avril 2023 756

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.

Compose Row & Column
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 :
Compose Row and Column

Alignment

Il existe neuf options d'alignement qui peuvent s'appliquer  aux éléments enfant d'un layout :
Compose alignement

Arrangement

Nous avons également trois arrangements qui peuvent être appliqués en tant qu'arrangements verticaux et horizontaux :

  1. SpaceEvenly
  2. SpaceBetween
  3. 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.
Compose row spaceevenly

La disposition SpaceBetween place les éléments enfants sur l'axe principal sans espace libre avant le premier et après le dernier enfant.
Compose row space between

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.

Compose row space around

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 

vote
Jean Claude Mbiya
Jean Claude Mbiya

Développeur Web full stack, Développeur Android (Certifié Google AAD) Formateur dans les domaines du numérique, Créateur letecode.com 👨‍💻. Je suis un grand passionné des nouvelles technologies et j'adore partager ce que j'apprend.

0 commentaire(s)

Laissez votre commentaire à @johnmbiya

ou pour laisser un commentaire