Jetpack Compose API para crear diseños adaptables utilizando una guía de materiales ahora estable

Publicado por Alex Vanyo – Ingeniero de Relaciones con Desarrolladores

La versión estable 1.0 de Redacte API adaptables con guía de materiales está disponible, listo para ser utilizado en producción. La biblioteca te ayuda a crear diseños adaptativos que garantizan una experiencia de usuario optimizada en ventanas de cualquier tamaño.

El equipo de SAP Mobile Start fue uno de los primeros en adoptar las API adaptativas de Compose. A sus desarrolladores les tomó solo cinco minutos integrar NavigationSuiteScaffold desde la nueva biblioteca adaptativa Compose Material 3, adaptando rápidamente la interfaz de usuario de navegación de la aplicación a diferentes tamaños de ventana.

Cada uno de los nuevos componentes de la biblioteca, NavigationSuiteScaffold, ListDetailPaneScaffold y SupportingPaneScaffold son adaptable: Según el tamaño y la postura de la ventana, se muestran al usuario diferentes componentes, según cuál sea el más apropiado en el contexto actual. Esto ayuda a crear una interfaz de usuario que se adapta a una amplia variedad de tamaños de ventanas en lugar de simplemente ampliar los diseños.

Para obtener una descripción general de los componentes, consulte la sección dedicada sesión de E/S y el nuestro nueva documentacion páginas para empezar.

En esta publicación, analizaremos en profundidad las capas de la nueva biblioteca, para que podamos comprender mejor cuán personalizable y adaptable es a una amplia gama de casos de uso.

Similar a componerseLas bibliotecas adaptativas se dividen en múltiples dependencias, por lo que puede elegir el nivel de abstracción apropiado para su aplicación. Hay cuatro artefactos nuevos como parte de las bibliotecas adaptativas:

• Para conocer los componentes básicos para crear una interfaz de usuario adaptable, incluido el cálculo de la clase de tamaño de la ventana y la postura actual, agregue androidx.compose.material3.adaptive:adaptive:1.0.0
• Para implementar diseños de paneles múltiples, agregue androidx.compose.material3.adaptive:adaptive-layout:1.0.0
• Para navegadores independientes para diseños de scaffold de múltiples paneles, agregue androidx.compose.material3.adaptive:adaptive-navigation:1.0.0
• Para implementar la interfaz de usuario de navegación adaptable, agregue androidx.compose.material3:material3-adaptive-navigation-suite:1.3.0

Las bibliotecas tienen las siguientes dependencias:

Nuevo gráfico de dependencia de la biblioteca

Para explorar más estas capas, comencemos con el ejemplo de nivel más alto con la funcionalidad más integrada usando NavigableListDetailPaneScaffold de androidx.compose.material3.adaptive:adaptive-navigation:

val navigator = recordarListDetailPaneScaffoldNavigatorAny>() NavigableListDetailPaneScaffold( navigator = navigator, listPane = { // Panel de lista }, detallePane = { // Panel de detalles }, )

Este fragmento de código proporciona todos los comportamientos adaptativos recomendados para un diseño de lista de detalles: determinar la cantidad de paneles que se mostrarán según el tamaño actual de la ventana, mostrar y ocultar el panel correcto cuando el tamaño de la ventana cambia según el estado anterior de la ventana. interfaz de usuario y configurar el botón Atrás para devolver al usuario a la lista de forma condicional, según el tamaño de la ventana y el estado actual.

Esto resume muchos comportamientos y puede ser todo lo que necesitas, ¡sin tener que profundizar más!

Sin embargo, puede haber razones por las que desee cambiar este comportamiento o manejar el estado de manera más directa, generando partes del mismo de manera diferente.

Recuerde, cada capa se basa en la anterior. Este fragmento se encuentra en la capa más externa y podemos comenzar a desenvolver capas para personalizarlo donde sea necesario.

Vayamos un nivel más profundo con NavigableListDetailPaneScaffold y bajemos un nivel. El comportamiento no cambiará en absoluto con estas incorporaciones directas, ya que simplemente incorporamos el comportamiento predeterminado en cada paso:

(Dato curioso: puedes seguir este proceso directamente en Android Studio y para cualquier otro componente que desees. Si eliges Refactorización > En línea función, puede reemplazar directamente un componente con su implementación. Por supuesto, no puede eliminar la función original en la biblioteca).

val navigator = recordarListDetailPaneScaffoldNavigatorAny>() BackHandler( habilitado = navigator.canNavigateBack(BackNavigationBehavior.PopUntilContentChange) ) { navigator.navigateBack(BackNavigationBehavior.PopUntilContentChange) } ListDetailPaneScaffold( directiva = navigator.scaffoldDirective, valor = navigator.sca ffoldValue, listPane = { Lista de cuadros } , panel de detalles = { // Panel de detalles }, )

Con la primera línea, vemos el BackHandler que NavigableListDetailPaneScaffold incluye de forma predeterminada. Si usa ListDetailPaneScaffold directamente, la administración del backhandler queda en manos del desarrollador para incluirla y generarla en el lugar apropiado.

Esto también revela cómo el navegador proporciona dos estados para controlar ListDetailPaneScaffold:

• directiva —- cómo se deben organizar los paneles en ListDetailPaneScaffold e
• valor: el estado actual de los mosaicos, calculado en función de la directiva y el estado de navegación actual.

Ambos están controlados por el navegador, y la eliminación posterior nos muestra los argumentos predeterminados del navegador para la directiva y la estrategia de adaptación, que se utiliza para calcular el valor:

val navigator = recordarListDetailPaneScaffoldNavigatorAny>( scaffoldDirective = calcularPaneScaffoldDirective(currentWindowAdaptiveInfo()), adaptStrategies = ListDetailPaneScaffoldDefaults.adaptStrategies(), ) BackHandler( habilitado = navigator.canNavigateBack(BackNavigationBehavior.PopUntilContentChange) ) { navigator. navegarBack(BackNavigationBeh avior.PopUntilContentChange) } ListDetailPaneScaffold( directiva = navigator.scaffoldDirective, valor = navigator.scaffoldValue, listPane = { // Panel de lista }, DetailPane = { // Panel de detalles },)

La directiva controla el comportamiento de la cantidad de paneles que se mostrarán y el espacio entre paneles, según currentWindowAdaptiveInfo, que contiene el tamaño y la posición de la ventana.

Puede personalizar esto con una directiva diferente, para mostrar dos paneles uno al lado del otro con un ancho promedio más pequeño:

val navigator = recordarListDetailPaneScaffoldNavigatorAny>( scaffoldDirective = calcularPaneScaffoldDirectiveWithTwoPanesOnMediumWidth(currentWindowAdaptiveInfo()), adaptStrategies = ListDetailPaneScaffoldDefaults.adaptStrategies(),)

De forma predeterminada, mostrar dos paneles con un ancho medio puede dar como resultado una interfaz de usuario demasiado estrecha, especialmente para contenido complejo. Sin embargo, esta puede ser una buena opción para utilizar el espacio de la ventana de manera más óptima al mostrar dos paneles para contenido menos complejo.

EL Adaptar estrategia controla lo que sucede con los mosaicos cuando no hay suficiente espacio para mostrarlos todos. Por el momento, esto siempre oculta los mosaicos para los que no hay suficiente espacio.

El navegador utiliza esta directiva para guiar su lógica y, en combinación con la estrategia de adaptación, para determinar el valor del andamio, el estado objetivo resultante para cada uno de los mosaicos.

Luego, la directiva y el valor del scaffold se pasan a ListDetailPaneScaffold, lo que determina el comportamiento del scaffold.

Esta estratificación le permite alejar el estado del andamio de la visualización del propio andamio. Esta estratificación también permite implementaciones personalizadas para controlar el funcionamiento del andamio y elevar el estado relacionado. Por ejemplo, si utiliza una solución de navegación personalizada en lugar del navegador, puede controlar ListDetailPaneScaffold directamente con el estado derivado de la solución de navegación personalizada.

La estratificación se aplica en la biblioteca con los diferentes artefactos:

• androidx.compose.material3.adaptive:adaptive contiene los métodos subyacentes para calcular la información adaptativa de la ventana actual
• androidx.compose.material3.adaptive:adaptive-layout contiene los diseños ListDetailPaneScaffold y SupportingPaneScaffold
• androidx.compose.material3.adaptive:adaptive-navigation contiene API de navegador (como RememberListDetailPaneScaffoldNavigator)

Por lo tanto, si no tiene intención de utilizar la navegación y prefiere una solución de navegación personalizada, puede omitir el uso de androidx.compose.material3.adaptive:adaptive-navigation y confiar directamente en androidx.compose.material3.adaptive:adaptive-layout.

Cuando agregas el Redactar biblioteca adaptativa a su aplicación, comience con la capa más completa y luego descomprímala según sea necesario para cambiar el comportamiento. A medida que continuamos trabajando en la biblioteca y agregando nuevas funciones, continuaremos agregándolas en el nivel apropiado. Al utilizar los niveles superiores, podrá obtener estas nuevas funciones más fácilmente. Si es necesario, puede usar capas inferiores para obtener un control más granular, pero esto también significa que se transfiere más responsabilidad por el comportamiento a su aplicación, al igual que las capas en Compose.

Pruebe los nuevos componentes hoy y envíenos el suyo comentario para errores y solicitudes de funciones.