Material 3 Adaptive 1.2.0 es estable

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

Esta versión continúa basándose en los fundamentos de las versiones anteriores, expandiendo 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 para 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 expandida. Para habilitar los puntos de interrupción grande (L) y extragrande (XL), agrega 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 muestre los puntos de interrupción L y XL cuando sea necesario.

Nuevas estrategias adaptativas: reflujo 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, comenzando por el tamaño de la ventana. Con la nueva biblioteca de Material 3 Adaptive, dos nuevas tecnologías pueden ayudarte a lograr un diseño adaptativo 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 lado del primero cuando la ventana es lo suficientemente ancha o se vuelve a colocar 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 vuelve a colocar en la parte inferior.

Cómo volver a colocar un panel según el tamaño de la ventana

Si bien el reflujo es una opción increíble en muchos casos, es posible que haya situaciones en las que el contenido deba estar anclado a un lado de la ventana o levitar sobre ella. La estrategia de levitación no solo ancla el contenido, sino que también te permite personalizar funciones como la capacidad de arrastrar, cambiar el tamaño e incluso el fondo.

Cómo levitar un panel del costado al 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 estrategias se pueden aplicar a los scaffolds de panel de detalles y de apoyo:

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.