Superpositions d'éléments d'interface utilisateur avec Grid

L'API Grid de Jetpack Compose est conçue pour les mises en page structurelles en deux dimensions. Contrairement aux grilles différées, qui sont optimisées pour les grands ensembles de données, Grid vous permet de définir une structure de mise en page fixe ou responsive à l'aide de pistes (lignes et colonnes), d'espaces et de zones de grille. Vous placez des éléments dans cette structure à l'aide de Modifier.gridItem, ce qui vous permet de contrôler explicitement le positionnement et l'étendue dans le conteneur de grille.

Lorsque votre UI nécessite plusieurs éléments dans la même zone de grille ou des zones qui se chevauchent (par exemple, des superpositions de badges, des indicateurs d'état ou des cartes superposées), l'ambiguïté des coordonnées peut rendre le comportement de la mise en page imprévisible. Il est essentiel de gérer la profondeur des composants qui se chevauchent sans recourir à une imbrication Box complexe ni à des décalages de coordonnées manuels pour maintenir un code de mise en page propre et lisible.

Bonnes pratiques

• Ordre de déclaration : Grid suit l'ordre zIndex standard basé sur l'ordre de déclaration dans le bloc Grid. Les éléments déclarés plus tard dans le bloc de contenu Grid sont affichés au-dessus des éléments déclarés plus tôt.
• Contrôle explicite de l'index Z : utilisez Modifier.zIndex si vous devez contrôler ou remplacer explicitement l'ordre de dessin par défaut des éléments qui se chevauchent.
• Zone nommée ou superpositions d'éléments : utilisez Grid et des zones nommées pour définir la structure de votre mise en page, mais conservez la logique de superposition complexe dans le gridItem spécifique si ces superpositions sont logiquement liées à cette cellule de la grille.
• Étendues intentionnelles pour les superpositions : lors de la superposition, assurez-vous que les paramètres rowSpan et columnSpan sont intentionnels pour les éléments qui se chevauchent afin de contrôler la quantité de contenu sous-jacent masquée.

Ingrédients

• Grid : conteneur de mise en page structurel en deux dimensions
• GridConfigurationScope.area : fonction de portée utilisée pour définir des régions nommées et des zones de superposition sur les pistes de la grille
• Modifier.gridItem : modificateur utilisé pour placer et étendre des composables sur des pistes de grille ou dans des zones de grille nommées
• Modifier.zIndex : modificateur utilisé pour contrôler explicitement l'ordre d'élévation du dessin et de la couche

Étapes

Configurez la mise en page de votre grille et les zones nommées, positionnez le contenu de la couche de base dans les coordonnées de la grille cible, puis placez les éléments de superposition dans les cellules de la grille partagée ou les zones de chevauchement.

1. Définir la configuration de la grille

Créez une configuration composable Grid en spécifiant des pistes de lignes et de colonnes, ainsi que des zones nommées qui s'étendent sur plusieurs cellules pour définir des régions de superposition :

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

2. Placer le contenu de base et déclarer les superpositions

Placez vos composables de base dans les cellules de la grille à l'aide de Modifier.gridItem. Grid suit l'ordre zIndex standard basé sur l'ordre de composition. Ainsi, les éléments déclarés plus tard dans le bloc Grid sont dessinés au-dessus des éléments précédents. Lorsque vous placez une superposition dans la même cellule ou dans une zone de chevauchement, déclarez le composable de superposition après l'élément de base ou référencez une zone nommée. Vous pouvez utiliser Modifier.zIndex si vous devez contrôler ou remplacer explicitement cet ordre de dessin par défaut.

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

Résultats

Vos éléments d'interface utilisateur se superposent de manière prévisible dans la structure de grille 2D. En vous appuyant sur l'ordre de déclaration standard, vous évitez les conteneurs imbriqués complexes tout en conservant un code de mise en page propre et responsive.

Figure 1. Éléments d'interface utilisateur qui se chevauchent dans une grille Compose.