Crear una TopAppBar contraíble con Jetpack Compose | de Katie Barnett | diciembre 2022

Aquí se explica cómo utilizar las funciones listas para usar para obtener un gran resultado.

Hace poco creé una aplicación en Jetpack Compose, y cuando diseñé mi marco principal, quería una barra de aplicaciones superior plegable, similar a CoordinadorLayout del sistema de interfaz de usuario basado en vistas. Descubrí que la mayoría de las implementaciones de ejemplo en otras publicaciones de Medium eran muy personalizadas cuando busqué en línea cómo hacer esto y no usé LargeTopAppBar en absoluto. La documentación oficial sobre el tema era bastante escasa, ¡así que pensé que mi investigación podría ser útil para otros!LargeTopAppBar, sin colapsar en absoluto Primero, debemos comenzar con un LargeTopAppBar estándar en un andamio con una lista de contenido: ahora, para contraerlo, debemos agregar un comportamiento de desplazamiento y conectar ese comportamiento a nuestra lista para que la lista se desplace hacia la aplicación superior. sabe colapsar la ingle. Este comportamiento de desplazamiento se crea utilizando TopAppBarScrollBehaviour. Hay varios tipos definidos por defecto que puede utilizar. Los demostraré a continuación, pero por ahora usaré TopAppBarDefaults.exitUntilCollapsedScrollBehavior(). Esto se crea y se agrega a la definición de LargeTopAppBar y también como un modificador en el andamio para el contenido desplazable (LazyColumn): ¡y el resultado cuando se desplaza el contenido, la barra superior de la aplicación se contrae a una TopAppBar estándar!Colapsar LargeTopAppBarMuy fácil, ¿verdad? Bueno, podemos agregar un poco más de estilo y personalización… Si usa temas de Material, el estilo del título de la barra superior de la aplicación se actualizará junto con el comportamiento de minimización. Sin embargo, si usa un tema personalizado en su aplicación, el estilo permanecerá estático durante el desplazamiento. Por ejemplo: en el ejemplo anterior, tenemos un tamaño de fuente y colores establecidos para el contenedor TopAppBar (containerColor), el título (titleContentColor) y los iconos (navigationIconContentColor y actionIconContentColor). También podemos establecer el color de fondo colapsado usando scrolledContainerColor. Cuando esto se ejecuta, obtenemos la barra de la aplicación superior colapsada, pero el color y el texto del título no cambian (en mi caso de ejemplo, se vuelven invisibles). Desafortunadamente, no hay una versión desplazada del título o los colores del contenido del icono.Estilo personalizado, pero el título y los íconos son invisibles cuando se doblan. Para arreglar esto, podemos tocar el valor de TopAppBarState colapsodFraction para determinar el punto de transición: una vez que la fracción colapsada pasa a la mitad (0.5), cambiamos el color:Cambio de color, pero el tamaño de fuente sigue siendo el mismo. Podemos mejorar esto por razones de rendimiento reemplazando nuestra verificación CollapsedFraction con el uso de driftStateOf para minimizar las recomposiciones requeridas (aunque para este ejemplo simple no hay mucha diferencia si no lo usa). Para obtener más información sobre el uso de deriveStateOf, consulte esta publicación de blog. Ahora, ¿qué pasa con el tamaño del texto? Nuevamente, podemos usar la fracción colapsada y la transición entre los dos tamaños de fuente: dado que queremos el valor exacto para la fracción colapsada, el estado derivado no ayuda aquí. Dando un resultado final:¡Buena transición de fuentes y colores! Puede ser aún más individual aquí si sus transiciones de estilo son más sofisticadas comparando collapedFraction con otros valores (por ejemplo, no solo a la mitad) o con algunos de los otros desplazamientos contenidos en el objeto TopAppBarState. Como se mencionó anteriormente, hay varios comportamientos de desplazamiento disponibles que se pueden usar para colapsar las barras superiores de la aplicación. Estos son análogos a los scrollFlags del sistema de vista (los ejemplos están bien ilustrados en esta publicación de blog). En Jetpack Compose tenemos disponibles los siguientes:

• Comportamiento de desplazamiento anclado
• entrarAlwaysScrollBehavior
• exitUntilCollapsedScrollBehavior

Comportamiento de desplazamiento ancladoComo puede adivinar por el nombre, pinnedScrollBehavior no se desplaza ni colapsa TopAppBar en absoluto, sino que lo mantiene (en realidad, como si no se hubiera configurado ningún comportamiento de desplazamiento). El valor scrolledContainerColor se ignora y el color de fondo no cambia a medida que se desplaza el contenido. Tampoco puede usar CollapsedFraction ya que permanece estático. Los otros dos tienen un comportamiento ligeramente diferente (de la documentación):entrarAlwaysScrollBehavior

…se colapsa inmediatamente cuando se arrastra el contenido hacia arriba y aparece inmediatamente cuando se arrastra el contenido hacia abajo.

exitUntilCollapsedScrollBehavior

… se colapsa inmediatamente cuando el contenido anidado se arrastra hacia arriba y expandirá el área colapsada nuevamente cuando el contenido se arrastra completamente hacia abajo.

Esto es más fácil de ver uno al lado del otro:Comportamiento de desplazamiento de lado a lado, puede ver que enterAlwaysScrollBehavior se muestra inmediatamente al desplazarse hacia arriba o hacia abajo, mientras que exitUntilCollapsedScrollBehavior se expande gradualmente al desplazarse. El que use depende de su caso de uso. Tanto enterAlwaysScrollBehavior como exitUntilCollapsedScrollBehavior también le permiten especificar especificaciones de animación de captura y lanzamiento para personalizar aún más las animaciones de contracción. ¿Qué pasa si nuestro contenido no es una lista estándar, sino tal vez otro gran componible? ¿Pero todavía se desea el efecto de la barra de herramientas plegable? Aquí podemos agregar un modificador VerticalScroll al componente único con un estado de desplazamiento guardado que permite que nestedScrollConnection capture la acción de desplazamiento.Solo un único elemento puede activar el pergamino. Sin embargo, en un ejemplo real, solo necesitaría esto si su contenido fuera grande y necesitara poder usar el espacio adicional de una barra de herramientas colapsada. Un último caso a considerar es cuando desea que su TopAppBar cambie de color, incluso si no se colapsa (por ejemplo, si se define el comportamiento de desplazamiento fijo o no se define el comportamiento de desplazamiento). Aquí intentar usar scrolledContainerColor como se usó anteriormente no tiene ningún efecto. En su lugar, podemos usar un valor derivado (para reducir el número de recomposiciones, ver más arriba) para decidir cuándo se ha producido un desplazamiento. Para un ScrollBehavior anclado, puede usar contentOffset. Técnicamente, solo puede verificar si no es igual a cero, pero en mi experiencia, esto parpadea un poco demasiado rápido cuando el usuario se desplaza aunque sea una pequeña cantidad, por lo que usar un búfer pequeño funciona mejor: si no se define un comportamiento de desplazamiento, puede usar el LazyListState para detectar un desplazamiento:Tan pronto como nos desplazamos más allá del primer elemento, el color cambia. El mismo enfoque se podría aplicar a más opciones de estilo y, en este caso, también se podría usar con el scrollState que se usa en el modificador de desplazamiento vertical para un solo elemento: Eso es todo, es bastante fácil de hacer con una barra de aplicaciones plegable en la parte superior. Crea transiciones consistentes y fluidas. sin recurrir al código súper personalizado. Para ver algunos ejemplos del código anterior, consulte mi repositorio de experimentos de Github aquí: