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

Esta versión sigue desarrollando las bases 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 automáticamente los paneles de visualización.

Novedades de Material 3 Adaptive 1.2.0

Esta versión estable se basa en la compatibilidad con los puntos de interrupción grandes y extragrandes de WindowManager 1.5.0 e introduce las nuevas estrategias de reflujo y levitación para ListDetailPaneScaffold y SupportingPaneScaffold. 

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

WindowManager 1.5.0 ha introducido dos nuevos puntos de interrupción para la clase de tamaño de ventana de ancho, con el fin de admitir ventanas aún más grandes que la clase de tamaño de ventana Expanded. Para habilitar los puntos de interrupción Grande (L) y Extra grande (XL), añade 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 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, empezando por el tamaño de la ventana. Con la nueva biblioteca adaptativa Material 3, dos nuevas tecnologías pueden ayudarte a conseguir un diseño adaptativo con el mínimo esfuerzo.

Con reajuste, los paneles se reorganizan cuando cambia el tamaño o la relación de aspecto de la ventana. Se coloca un segundo panel al lado del primero cuando la ventana es lo suficientemente ancha o se coloca 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 reorganiza en la parte inferior.

Cambiar el diseño de un panel en función del tamaño de la ventana

Aunque el reflujo 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 flotar sobre ella. La estrategia de flotación no solo acopla el contenido, sino que también te permite personalizar funciones como la posibilidad de arrastrar y cambiar el tamaño, e incluso el scrim de fondo.

Levitar un panel del lateral al centro en función de la relación de aspecto

Tanto la estrategia de lista y detalle como la de levitación se pueden declarar en el constructor Navigator mediante el parámetro adaptStrategies, y ambas estrategias se pueden aplicar a la lista y al panel de detalles, así como al panel de asistencia 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 adaptativas, consulta el sitio web de Material y el código de muestra completo en GitHub.