UI-Element-Overlays mit Raster

Die Jetpack Compose Grid API ist für strukturelle, zweidimensionale Bildschirm layouts konzipiert. Im Gegensatz zu Lazy Grids, die für große Datensätze optimiert sind, können Sie mit Grid eine feste oder responsive Layoutstruktur mit Spuren (Zeilen und Spalten), Lücken und Rasterbereichen definieren. Sie platzieren Elemente in dieser Struktur mit Modifier.gridItem. So haben Sie explizite Kontrolle über die Positionierung und den Umfang im Rastercontainer.

Wenn Ihre UI mehrere Elemente im selben Rasterbereich oder in überlappenden Bereichen erfordert, z. B. Badge-Overlays, Statusanzeigen oder überlagerte Karten, kann die Koordination von Mehrdeutigkeiten das Layoutverhalten unvorhersehbar machen. Die Tiefe überlappender Komponenten zu verwalten, ohne auf komplexe Box-Verschachtelungen oder manuelle Koordinatenversätze zurückgreifen zu müssen, ist entscheidend für einen sauberen, lesbaren Layoutcode.

Best Practices

• Deklarationsreihenfolge:Grid folgt der Standardreihenfolge von zIndex basierend auf der Reihenfolge der Deklaration im Grid-Block. Elemente, die später im Grid-Inhaltsblock deklariert werden, werden über Elementen gerendert, die früher deklariert wurden.
• Explizite z-Index-Steuerung: Verwenden Sie Modifier.zIndex, wenn Sie die Standardreihenfolge der Zeichnung überlappender Elemente explizit steuern oder überschreiben müssen.
• Benannte Bereiche im Vergleich zu Element-Overlays:Verwenden Sie Grid und benannte Bereiche, um die Struktur Ihres Layouts zu definieren. Komplexe Overlay-Logik sollte jedoch im jeweiligen gridItem enthalten sein, wenn diese Overlays logisch mit dieser Rasterzelle verknüpft sind.
• Beabsichtigte Spannen für Overlays:Achten Sie beim Überlagern darauf, dass die Parameter rowSpan und columnSpan für die überlappenden Elemente beabsichtigt sind, um zu steuern, wie viel vom zugrunde liegenden Inhalt verdeckt wird.

Zutaten

• Grid: Ein struktureller, zweidimensionaler Layoutcontainer
• GridConfigurationScope.area: Bereichsfunktion zum Definieren benannter Regionen und Overlay-Bereiche über Rasterspuren hinweg
• Modifier.gridItem: Modifikator zum Platzieren und Spannen von zusammensetzbaren Elementen über Rasterspuren hinweg oder in benannten Rasterbereichen
• Modifier.zIndex: Modifikator zum expliziten Steuern der Zeichnungs- und Layer-Erhöhungsreihenfolge

Schritte

Konfigurieren Sie Ihr Rasterlayout und die benannten Bereiche, positionieren Sie den Inhalt der Basisebene innerhalb der Zielrasterkoordinaten und platzieren Sie Overlay-Elemente in den gemeinsamen Rasterzellen oder überlappenden Bereichen.

1. Rasterkonfiguration definieren

Erstellen Sie eine zusammensetzbare Grid-Konfiguration, in der Zeilen- und Spaltenspuren sowie benannte Bereiche angegeben werden, die sich über Zellen erstrecken, um Overlay-Bereiche zu definieren:

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. Basisinhalte platzieren und Overlays deklarieren

Platzieren Sie Ihre zusammensetzbaren Basiselemente mit Modifier.gridItem in den Rasterzellen. Grid folgt der Standardreihenfolge von zIndex basierend auf der Reihenfolge der Zusammensetzung. Elemente, die später im Grid-Block deklariert werden, werden also über Elementen gezeichnet, die früher deklariert wurden. Wenn Sie ein Overlay in derselben Zelle oder in einem überlappenden Bereich platzieren, deklarieren Sie das zusammensetzbare Overlay-Element nach dem Basiselement oder verweisen Sie auf einen benannten Bereich. Mit Modifier.zIndex können Sie diese Standardreihenfolge der Zeichnung explizit steuern oder überschreiben.

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

Ergebnisse

Ihre UI-Elemente werden vorhersagbar in der 2D-Rasterstruktur überlagert. Durch die Verwendung der Standardreihenfolge der Deklaration vermeiden Sie komplexe verschachtelte Container und erhalten gleichzeitig einen sauberen, responsiven Layoutcode.