Temos o prazer de anunciar que o Material 3 Adaptive 1.2.0 agora está estável.

Essa versão continua a se basear nas versões anteriores, expandindo o suporte para mais pontos de interrupção para classes de tamanho de janela e novas estratégias para posicionar painéis de exibição automaticamente.

Novidades do Material 3 Adaptive 1.2.0

Essa versão estável é criada com base no suporte do WindowManager 1.5.0 para pontos de interrupção grandes e extragrandes e apresenta as novas estratégias de reflow e levitação para ListDetailPaneScaffold e SupportingPaneScaffold. 

Novas classes de tamanho de janela: grande e extragrande

O WindowManager 1.5.0 introduziu dois novos pontos de interrupção para a classe de tamanho de janela de largura para oferecer suporte a janelas ainda maiores do que a classe de tamanho de janela expandida. Os pontos de interrupção grande (L) e extragrande (XL) podem ser ativados adicionando o seguinte parâmetro à chamada currentWindowAdaptiveInfo() na sua base de código:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Essa flag permite que a biblioteca também retorne pontos de interrupção L e XL sempre que necessário.

Novas estratégias adaptáveis: reflow e levitação

Organizar conteúdo e painéis de exibição em uma janela é uma tarefa complexa que precisa considerar muitos fatores, começando pelo tamanho da janela. Com a nova biblioteca Material 3 Adaptive, duas novas tecnologias podem ajudar você a criar um layout adaptável com o mínimo de esforço.

Com o reflow, os painéis são reorganizados quando o tamanho ou a proporção da janela muda, colocando um segundo painel ao lado do primeiro quando a janela é larga o suficiente ou reflow o segundo painel abaixo do primeiro sempre que a janela for mais alta. Essa técnica também se aplica quando a janela fica menor: o conteúdo é reflow na parte de baixo.

Reflow de um painel com base no tamanho da janela

Embora o reflow seja uma opção incrível em muitos casos, pode haver situações em que o conteúdo precise ser ancorado em um lado da janela ou levitado na parte de cima. A estratégia de levitação não apenas ancora o conteúdo, mas também permite personalizar recursos como capacidade de arrastar, redimensionamento e até mesmo a tela de fundo.

Levitação de um painel da lateral para o centro com base na proporção

As estratégias de fluxo e levitação podem ser declaradas dentro do construtor Navigator usando o parâmetro adaptStrategies, e ambas podem ser aplicadas a scaffolds de painel de detalhes e listas e de suporte:

  val navigator = rememberListDetailPaneScaffoldNavigator<Nothing>(
        adaptStrategies = ListDetailPaneScaffoldDefaults.adaptStrategies(
            detailPaneAdaptStrategy = AdaptStrategy.Reflow(
                reflowUnder = ListDetailPaneScaffoldRole.List
            ),
            extraPaneAdaptStrategy = AdaptStrategy.Levitate(
                alignment = Alignment.Center
            )
        )
    )

Para saber mais sobre como aproveitar essas novas estratégias adaptáveis, consulte o site do Material e o exemplo de código completo no GitHub (links em inglês).