Mise en page standard

La phase de layout

La phase de layout se découpe en réalité en deux processus qui s’entremêlent :

Illustration des phases de mesure et de positionnement dans le processus de rendu d’une interface

Le layout Row

Le layout Row permet d’aligner horizontalement plusieurs composants. Voici sa signature :

@Composable 
inline fun Row( 
    modifier: Modifier = Modifier, 
    horizontalArrangement: Arrangement.Horizontal =  
        Arrangement.Start, 
    verticalAlignment: Alignment.Vertical = Alignment.Top, 
    content: @Composable RowScope.() -> Unit 
) { 
    /* ... */ 
} 

Focalisons notre attention sur les paramètres horizontalArrangement et verticalAlignement. Ils permettent de modifier la disposition des enfants d’un layout de type Row. En particulier :

Ces dispositions sont illustrées ci-dessous, dans les figures « Illustration de différentes valeurs possibles pour le paramètre horizontalArrangement » et « Illustration de différents alignements possibles pour le paramètre verticalAlignment ».

Illustration de différentes valeurs possibles pour le paramètre horizontalArrangement 

Illustration de différents alignements possibles pour le paramètre verticalAlignment 

Illustrons l’utilisation du layout Row en développant...

La taille

Par défaut, un layout standard enveloppe ses enfants. Il est pourtant possible d’affecter à chaque composant une taille spécifique. Voici une liste non exhaustive des Modifiers permettant de modifier la taille d’un composant.

Définir une taille préférentielle

Pour définir une taille préférentielle, il existe par exemple le Modifier Modifier.size(). 

Row( 
    modifier = Modifier.size(width = 200.dp, height = 300.dp) 
) { 
    /*...*/ 
} 

Occuper l’espace disponible

Il existe plusieurs Modifiers qui permettent d’indiquer à...

Les paramètres du layout Box

Le layout qui permet de superposer des composants au sein de Compose UI s’appelle Box. Voici sa signature :

inline fun Box( 
    modifier: Modifier = Modifier, 
    contentAlignment: Alignment = Alignment.TopStart, 
    propagateMinConstraints: Boolean = false, 
    content: @Composable BoxScope.() -> Unit 
) { 
    /*...*/ 
} 

Focalisons notre attention sur les paramètres contentAlignement et propagateMinConstraints de ce layout :

Illustration des alignements au sein du layout Box

@Preview 
@Composable 
fun PreviewBoxPropagateConstraints() { 
    Box( 
        modifier = Modifier.defaultMinSize( 
            minHeight = 100.dp, 
            minWidth = 400.dp 
        ),  
        propagateMinConstraints = true 
    ) { 
        Box(modifier...

Cas d’usage

Utilisons le layout BoxWithConstraints pour adapter le rendu du composant UserBadgeWithLastConnection utilisé précédemment. En particulier, lorsque l’espace disponible en largeur est inférieur à 600 dp, faisons les ajustements suivants :

Introduction

Il arrive qu’un composant ait besoin de connaître la taille d’autres composants pour définir sa propre taille. Pour illustrer cette situation, prenons l’exemple d’un composant ayant les spécifications suivantes :

Voici un aperçu de ce composant :

Illustration du composant contenant trois textes

Nous serions tentés de trouver ici un moyen de récupérer la largeur du texte le plus large et d’appliquer cette largeur à chaque enfant du composant, Column comme ceci :

@Composable 
fun ColumnWithThreeTextsNotWorkingV1() { 
    Column {  
        val widestWidth = // TODO ? 
        Text( 
            "Texte court", 
            modifier = Modifier  
                .width(widestWidth) 
                .background(Color.Gray) 
        ) 
        Text( 
            "Texte le plus long définissant la largeur de ses voisins", 
            color = Color.White, 
            modifier...

Redimensionnement sans dégradation jusqu’à 200 %

Dans les paramètres d’affichage du système Android, un utilisateur peut augmenter le niveau de zoom global via deux paramètres : la taille de la police et la taille d’affichage. Ce dernier paramètre modifie à la fois la taille de la police et également la taille des éléments à l’écran.

À partir d’un certain niveau de zoom, la mise en page globale peut être dégradée. En tant que développeur ou développeuse, il est important de s’assurer que l’information reste lisible et que les fonctionnalités soient toujours accessibles. Concrètement, il faut s’assurer que les composants ne sont pas superposés ou tronqués.