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

Esta versión sigue basándose en los fundamentos de las versiones anteriores y 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 los puntos de interrupción grandes y extragrandes, y presenta las nuevas estrategias de reflujo 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 expandido. Puedes habilitar los puntos de interrupción Large (L) y Extra-large (XL) 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 los puntos de interrupción L y XL cuando sean necesarios.

Nuevas estrategias adaptativas: Reflow y Levitate

Organizar el contenido y los paneles de visualización en una ventana es una tarea compleja que debe tener en cuenta muchos factores, comenzando 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 reflujo, los paneles se reorganizan cuando cambia el tamaño o la relación de aspecto de la ventana, y se coloca un segundo panel al costado del primero cuando la ventana es lo suficientemente ancha, o bien se refluye el 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.

Cómo reorganizar un panel según el tamaño de la ventana

Si bien el reajuste es una opción increíble en muchos casos, puede haber situaciones en las que el contenido deba acoplarse a un lado de la ventana o elevarse sobre ella. La estrategia de elevación no solo ancla el contenido, sino que también te permite personalizar funciones como la capacidad de arrastrar, cambiar el tamaño y hasta la pantalla de fondo.

Cómo levitar un panel desde el costado hacia el centro según la relación de aspecto

Tanto las estrategias de flujo como las de levitación se pueden declarar dentro del constructor Navigator con el parámetro adaptStrategies, y ambas estrategias se pueden aplicar a scaffolds de panel de detalles y de soporte:

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 adaptativas, consulta el sitio web de Material y el código de muestra completo en GitHub.