Jetpack Compose : Mise en page avec Row ou Column

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 :

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.


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