La versión 1.2.0 de Material 3 Adaptive es estable

Nos complace anunciar que Material 3 Adaptive 1.2.0 ya es estable.

Esta versión sigue basándose en las versiones anteriores, ya que amplía la compatibilidad con más puntos de interrupción para las clases de tamaño de ventana y nuevas estrategias para colocar paneles de visualización automáticamente.

Novedades de Material 3 Adaptive 1.2.0

Esta versión estable se basa en la compatibilidad de WindowManager 1.5.0 con puntos de interrupción grandes y extragrandes, y presenta las nuevas estrategias de redistribución y levitación para ListDetailPaneScaffold y SupportingPaneScaffold. 

Nuevas clases de tamaño de ventana: grande y extragrande

WindowManager 1.5.0 introdujo dos nuevos puntos de interrupción para la clase de tamaño de ventana de ancho para admitir ventanas aún más grandes que la clase de tamaño de ventana expandida. Los puntos de interrupción grande (L) y extragrande (XL) se pueden habilitar agregando el siguiente parámetro a la llamada currentWindowAdaptiveInfo() en tu base de código:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Esta marca permite que la biblioteca también devuelva puntos de interrupción L y XL cuando sea necesario.

Nuevas estrategias adaptables: redistribución y levitación

Organizar el contenido y los paneles de visualización en una ventana es una tarea compleja que debe tener en cuenta muchos factores, empezando por el tamaño de la ventana. Con la nueva biblioteca adaptable de Material 3, dos tecnologías nuevas pueden ayudarte a lograr un diseño adaptable con un esfuerzo mínimo.

Con el ajuste de flujo, los paneles se reorganizan cuando cambia el tamaño de la ventana o la relación de aspecto. Se coloca un segundo panel al lado del primero cuando la ventana es lo suficientemente ancha, o se ajusta el flujo del segundo panel debajo del primero cuando la ventana es más alta. Esta técnica también se aplica cuando la ventana se hace más pequeña: el contenido se redistribuye hacia la parte inferior.

Ajuste de un panel según el tamaño de la ventana

Si bien el ajuste dinámico es una opción increíble en muchos casos, puede haber situaciones en las que el contenido deba fijarse a un lado de la ventana o levitar sobre ella. La estrategia de levitación no solo fija el contenido, sino que también te permite personalizar funciones como la capacidad de arrastrar, cambiar el tamaño y hasta el scrim de fondo.

Levitación de un panel desde el costado hacia el centro según la relación de aspecto

Las estrategias de flujo y levitación se pueden declarar dentro del constructor Navigator con el parámetro adaptStrategies, y ambas se pueden aplicar a la lista-detalles y al panel lateral scaffolds:

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

Para obtener más información sobre cómo aprovechar estas nuevas estrategias adaptables, consulta el sitio web de Material y el código de muestra completo en GitHub.