Layout für die Tischposition mit „Grid“ und „mediaQuery“

Bei der Tischaufstellung auf faltbaren Geräten wird ein einzelner Bildschirm in zwei funktionale Anzeigebereiche unterteilt, die durch die physische Faltung (oder das Scharnier) getrennt sind. Bei der Tischaufstellung können Sie den Hauptinhalt Ihrer App (z. B. einen Videoplayer oder eine Spieloberfläche) im oberen Bereich platzieren, während interaktive Elemente (z. B. Mediensteuerelemente oder Steuerfelder) im unteren Bereich positioniert werden.

Best Practices

Wenn Sie Ihrer App Unterstützung für die Tischaufstellung hinzufügen möchten, verwenden Sie die Grid API, um ein Layout mit zwei Zeilen und einer Spalte zu definieren, und wenden Sie die Media Query für die Fensteraufstellung im Tischmodus an.

• Tischaufstellung reaktiv erkennen:Verwenden Sie die zusammensetzbare Funktion mediaQuery, um den Gerätestatus zu beobachten. Wenn das Gerät in die Tischaufstellung gefaltet ist (windowPosture == Posture.Tabletop), können Sie das Layout dynamisch verschieben, ohne dass Aktivitätsneustarts oder eine komplexe Lebenszyklusverwaltung erforderlich sind.
• Layouts mit Grid strukturieren:Verwenden Sie bei der Tischaufstellung die Grid API (2 rows, 1 column), um primäre visuelle Inhalte sauber in der oberen Zeile über der Faltung und interaktive Steuerelemente in der unteren Zeile unter der Faltung zu trennen.
• Implizite Z-Indexierung für Overlays nutzen:Weisen Sie in Standardaufstellungen (nicht im Tischmodus) derselben Zelle mehrere Bereichs-IDs zu, um Steuerelemente über den Player zu legen. Grid rendert Elemente automatisch von hinten nach vorne in der Reihenfolge ihrer Deklaration.
• Für reibungslose Übergänge sorgen:Achten Sie darauf, dass der Status und die Scrollpositionen beibehalten werden, wenn Sie zwischen Standard-Vollbildlayouts und der Tischaufstellung wechseln.

Zutaten

• Grid: Ein adaptiver Layout-Container, mit dem Sie Elemente in konfigurierbaren Zeilen und Spalten positionieren können. Er eignet sich ideal, um Inhalte auf verschiedene Bildschirmbereiche aufzuteilen.
• mediaQuery: Eine Jetpack Compose API, mit der Sie die aktuelle Fensteraufstellung, die Größenklassen und die Hardwaremerkmale der App direkt in Ihren zusammensetzbaren Funktionen abfragen können.

Schritte

Fragen Sie den Sicherheitsstatus des Geräts mit mediaQuery() ab. Wenn sich das Gerät in der Tischaufstellung befindet, ordnen Sie die Inhalte Ihrer App in einem vertikalen Raster mit zwei Zeilen und einer Spalte an. Dabei sollte der primäre Inhalt oben und die Steuerelemente unten zugänglich sein.

1. Rasterkonfigurationen für den Tischmodus definieren

Definieren Sie in einer zusammensetzbaren Funktion Layoutbereichs-IDs mit einer Enumeration und richten Sie GridConfigurationScope-Blöcke für die Standard- und die Tischaufstellung ein.

In defaultConfig werden beide Bereiche derselben Zelle zugewiesen (row = 1, column = 1). Grid verwendet die implizite Z-Indexierung, bei der zusammensetzbare Funktionen, die später im Layout deklariert werden, über früheren gerendert werden. So kann der Controller den Player überlagern, ohne dass zusätzliche Containernestungen erforderlich sind. Weitere Informationen finden Sie unter UI-Element-Overlays mit Grid.

enum class VideoPlayerArea { Player, Controller }

object PlayerGridConfig {
    // Default: Single area layout with overlay (controls on top of player)
    val defaultConfig: GridConfigurationScope.() -> Unit = {
        row(1f)
        column(1f)
        area(areaId = VideoPlayerArea.Player, row = 1, column = 1)
        area(areaId = VideoPlayerArea.Controller, row = 1, column = 1)
    }

    // Tabletop: Two rows splitting content across the fold
    val tabletopConfig: GridConfigurationScope.() -> Unit = {
        row(0.5f)
        row(0.5f)
        column(1f)
        area(areaId = VideoPlayerArea.Player, row = 1, column = 1) // Top half above fold
        area(areaId = VideoPlayerArea.Controller, row = 2, column = 1) // Bottom half below fold
    }
}
GridByExamples.kt

2. Tischaufstellung erkennen und Konfiguration auf das Raster anwenden

Wählen Sie mit mediaQuery die aktive Konfiguration basierend auf windowPosture aus, übergeben Sie config an Grid und binden Sie zusammensetzbare Inhalte an die Bereichs-IDs. Wenn Sie VideoPlayerArea.Player vor VideoPlayerArea.Controller deklarieren, wird sichergestellt, dass die Steuerelemente über dem Player gerendert werden, wenn beide in defaultConfig eine Zelle gemeinsam nutzen:

val config = mediaQuery {
    when (windowPosture) {
        Posture.Tabletop -> PlayerGridConfig.tabletopConfig
        else -> PlayerGridConfig.defaultConfig
    }
}

Grid(config = config) {
    Box(
        modifier = Modifier
            .gridItem(areaId = VideoPlayerArea.Player)
    ) {
        // VideoPlayerContent
    }

    Box(
        modifier = Modifier
            .gridItem(areaId = VideoPlayerArea.Controller)
    ) {
        // PlaybackControlsContent
    }
}
GridByExamples.kt

Ergebnisse

Durch die Kombination von mediaQuery und Grid erkennt Ihre App dynamisch, wenn ein faltbares Gerät teilweise in die Tischaufstellung gefaltet ist, und passt die UI automatisch in zwei funktionale Anzeigebereiche an, die durch die Faltung getrennt sind.

Zusätzliche Ressourcen

• Erste Schritte mit adaptiven Apps
• Faltbare Anzeigemodi unterstützen
• UI-Element-Overlays mit Grid