Layout de postura na mesa com Grid e mediaQuery

A postura de mesa em dispositivos dobráveis divide uma única tela em duas áreas de exibição funcionais divididas pela dobra física (ou articulação). A postura de mesa permite colocar o conteúdo principal do app (como um player de vídeo ou uma tela de jogo) na metade superior, enquanto os elementos interativos (como controles de mídia ou painéis de controle) são posicionados na metade inferior.

Práticas recomendadas

Para adicionar suporte de mesa ao seu app, use a Grid API para definir um layout com duas linhas e uma coluna e aplique a consulta de mídia de postura de janela de mesa.

• Detectar a postura de mesa de forma reativa:use o elemento combinável mediaQuery para observar o estado do dispositivo. Quando o dispositivo estiver dobrado na postura de mesa (windowPosture == Posture.Tabletop), mude o layout de forma dinâmica sem precisar reiniciar a atividade ou fazer um gerenciamento complexo do ciclo de vida.
• Estruturar layouts com Grid: quando estiver na postura de mesa, use a API Grid (2 rows, 1 column) para separar o conteúdo visual principal na linha superior acima da dobra e os controles interativos na linha inferior abaixo da dobra.
• Aproveitar a indexação z implícita para sobreposições:em posturas padrão (não de mesa), atribua vários IDs de área à mesma célula para sobrepor controles ao player. Grid renderiza automaticamente os itens de trás para frente na ordem de declaração.
• Oferecer transições suaves:garanta que o estado e as posições de rolagem sejam preservados ao fazer a transição entre layouts padrão de tela cheia e a postura de mesa.

Ingredientes

• Grid: um contêiner de layout adaptável que permite posicionar itens em linhas e colunas configuráveis, ideal para dividir o conteúdo em regiões de tela distintas.
• mediaQuery: uma API do Jetpack Compose usada para consultar a postura, as classes de tamanho e as características de hardware da janela atual do app diretamente nos elementos combináveis.

Etapas

Consulte a postura do dispositivo usando mediaQuery(). Quando o dispositivo estiver na postura de mesa, organize o conteúdo do app em uma grade vertical com duas linhas e uma coluna, garantindo que o conteúdo principal permaneça na parte de cima e os controles permaneçam acessíveis na parte de baixo.

1. Definir configurações de grade para o modo de mesa

Dentro de uma função combinável, defina IDs de área de layout usando uma enumeração e configure blocos GridConfigurationScope para posturas padrão e de mesa.

Em defaultConfig, as duas áreas são atribuídas à mesma célula (row = 1, column = 1). Grid usa a indexação z implícita em que os elementos combináveis declarados mais tarde no layout são renderizados na parte de cima dos anteriores, permitindo que o controlador sobreponha o player sem aninhamento extra de contêiner (consulte Sobreposições de elementos da interface com a grade para mais detalhes).

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. Detectar a postura de mesa e aplicar a configuração à grade

Use mediaQuery para selecionar a configuração ativa com base em windowPosture, transmita config para Grid e vincule o conteúdo combinável aos IDs de área. Declarar VideoPlayerArea.Player antes de VideoPlayerArea.Controller garante que, quando ambos compartilharem uma célula em defaultConfig, os controles sejam renderizados acima do player:

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

Resultados

Ao combinar mediaQuery e Grid, seu app detecta dinamicamente quando um dispositivo dobrável está parcialmente dobrado na postura de mesa e ajusta automaticamente a interface em duas áreas de exibição funcionais divididas pela dobra.

Outros recursos

• Introdução aos apps adaptáveis
• Suporte para modos de exibição dobráveis
• Sobreposições de elementos da interface com a grade