CollapsingToolbar scrollflags en acción !!!

Diseño de Android - Barra de herramientas contraída: ScrollFlags ilustradas

En esta sección veremos los scrollflags de CollapsingToolbar, combinando los scrollflags y algunas consideraciones al implementarlos.

1. ScrollFlags

Hay 5 scrollflags provistos, estos son
 desplazarse, expandir siempre, expandir siempre colapsada, encajar, salir hasta colapsada.

Para usar scrollflags en su CollapsingToolbar, agregue la siguiente propiedad a su CollapsingToolbar.

aplicación: layout_scrollFlags = ”

Ahora configuremos un control sin ningún indicador para ver cómo se comporta la barra de herramientas contraída.

Figura 1: Controle el comportamiento de desplazamiento sin desplazamiento de etiquetas.

Como puede ver, en la Figura 1, no sucede nada especial, el NestedScrollView se desplaza libremente debajo de la Barra de herramientas CollapsingToolbar mientras la Barra de herramientas CollapsingTool permanece en un estado expandido. Esto es ideal si tiene una Vista en su Barra de herramientas contraída que siempre debe permanecer expandida y visible.

1.1 desplazamiento

aplicación: layout_scrollFlags = "scroll"
El indicador de desplazamiento permite que NestedScrollView (es decir, la vista subyacente que abarca todo el contenido, por ejemplo, los párrafos de texto y la imagen) señale a la barra de herramientas CollapsingToolbar que está en un estado de desplazamiento.

Figura 2: aplicación: layout_scrollFlags = ”scroll”
  • Si el NestedScrollView se desplaza hacia arriba, a su vez empujará hacia arriba y colapsará la herramienta CollapsingTool en la parte superior, permitiendo que desaparezca, permitiendo que el NestedScrollView se expanda por completo.
  • Si el NestedScrollView se desplaza hacia abajo, comenzará a expandir la Barra de herramientas contraída.

1.2 enterAlways, enterAlwaysCollapsed, snap & exitUntilCollapsed.

aplicación: layout_scrollFlags = ”enterAlways”
aplicación: layout_scrollFlags = ”enterAlwaysCollapsed”
aplicación: layout_scrollFlags = "snap"
aplicación: layout_scrollFlags = ”exitUntilCollapsed”
aplicación: layout_scrollFlags = ”exitUntilCollapsed”

Figura 3: enterAlways, enterAlwaysCollapsed, snap, exitUntilCollapsed: todos se comportan igual cuando se usan solos.

Por sí solos, cada una de las cuatro banderas anteriores se comporta de manera similar a nuestro control. En este punto, probablemente te estés preguntando por qué no son diferentes. Para ver sus diferencias, debemos combinarlas con la bandera de desplazamiento mencionada en la Sección 1.1 anterior.

2. Combinando ScrollFlags

ScrollFlags se puede combinar para aprovechar el movimiento único de múltiples comportamientos. Para combinar scrollflags solo los incluimos separados por el carácter de barra vertical | p.ej. Para combinar el desplazamiento y el atributo enterAlways, haríamos algo como esto. aplicación: layout_scrollFlags = ”scroll | enterAlways”

Veamos algunos ejemplos. En la Sección 1, vimos que la bandera de desplazamiento era la única que hacía algo significativo. Combinémoslo con las otras banderas y veamos si obtenemos algo diferente.

2.1 scroll | enterAlways vs scroll | enterAlwaysCollapsed

Las diferencias entre los dos son sutiles, preste atención a lo que sucede en un desplazamiento hacia abajo.

Figura 4: desplazamiento | enterAlways (izquierda) vs desplazamiento | enterAlwaysCollapsed (derecha)

En su valor nominal, scroll | enterAlways & scroll | enterAlwaysCollapsed tienen una función idéntica. La diferencia ocurre cuando la barra de herramientas contraída decide expandirse sobre un desplazamiento hacia abajo.

scroll | enterAlways: tiene un enfoque entusiasta de cuán pronto se expande CollapsingToolbar durante un desplazamiento hacia abajo. Lo que significa que una vez que hay un desplazamiento hacia abajo, esta bandera comenzará a expandir la Barra de herramientas contraída independientemente de qué tan alto se haya desplazado el NestedScrollView.

scroll | enterAlwaysCollapsed: tiene una aproximación perezosa a la rapidez con que la Barra de herramientas contraída se expande durante un desplazamiento hacia abajo. Es decir, en el momento en que hay un desplazamiento hacia abajo, la barra de herramientas contraída solo se expandirá una vez que NestedScrollView se haya desplazado a la parte superior de su contenido.

2.2 scroll | enterAlways vs scroll | snap

Ahora que sabemos qué hace scroll | enterAlways, vamos a contrastarlo para desplazarse | snap.

Figura 5: desplazamiento | enterAlways (izquierda) frente a desplazamiento | snap (derecha)

scroll | snap: la diferencia aquí es más evidente. snap siempre intentará configurar CollapsingToolbar en un estado colapsado o expandido, dependiendo de dónde se colapsó o expandió CollapsingToolbar. (Creo que es mejor dejarlo a la ilustración para definirlo).

2.2 scroll | enterAlways vs scroll | exitUntilCollapse

Figura 6: desplazamiento | enterAlways (izquierda) vs desplazamiento | exitUntilCollapsed (derecha)

scroll | exitUntilCollapsed: este es el único scrollflag que asegurará que la barra de herramientas permanezca en la parte superior y no desaparezca en el scroll. Esta bandera también se comporta de manera similar a la bandera enterAlwaysCollapsed, ya que solo expande la barra de herramientas CollapsingToolbar una vez que NestedScrollView se acerca a la parte superior de su contenido.

3. Combinando aún más banderas.

Jugar con banderas es adictivo discreto, ¡combinemos más! Antes de ver los videos, intente adivinar qué podrían hacer las banderas, para ver si realmente comprende los matices entre los dos.

3.1 scroll | snap | exitUntilCollapsed

Figura 7: desplazamiento | snap | exitUntilCollapsed

Esta combinación funciona bien, ya que permite que el CollapsingToolBar se ajuste según la intensidad del desplazamiento, sin embargo, un desplazamiento hacia arriba "completo" siempre terminará con la barra de herramientas visible en la parte superior.

3.2 enterAlwaysCollapsed | snap

Sin la bandera de desplazamiento una vez más, nada le sucede realmente a la Barra de herramientas contraída, como resultado, permanece en un estado expandido a pesar de los esfuerzos de desplazamiento.

3.3 desplazamiento | enterAlways | enterAlwaysCollapsed

Figura 9: desplazamiento | enterAlways | enterAlwaysCollapsed

Dadas nuestras descripciones de enterAlways y enterAlwaysCollapsed en la Sección 2.1 anterior, se comportan de manera muy diferente. Como resultado, la aplicación se confunde bastante sobre cómo manejar los desplazamientos hacia abajo. Yo recomendaría no usar esto

4. Observaciones y consideraciones de ScrollFlags

  1. Las etiquetas de desplazamiento de la barra de herramientas contraídas dependen en gran medida del movimiento de desplazamiento de un NestedScrollView o RecyclerView con algunos ScrollingBehavior adjuntos para poder ver los efectos de las banderas de desplazamiento (ver artículo de CoordinatorLayout Behaviors).
  2. La bandera de desplazamiento es clave para poder habilitar el desplazamiento de la barra de herramientas contraída.
  3. El orden de las banderas no tiene impacto. por ejemplo, scroll | snap y snap | scroll realizan exactamente la misma función.
  4. Tenga cuidado al mezclar los scrollflags que pueden entrar en conflicto con respecto a su función. Consulte la sección 3.3 sobre cómo enterAlways y enterAlwaysCollapsed conflict cuando se introduce un desplazamiento hacia abajo para expandir CollapsingToolbar.

Conclusión

ScrollFlags son esenciales para darle a tu Barra de herramientas de contracción un carácter personalizado. Como hemos visto, hay varias formas de combinar indicadores para obtener resultados distintos que pueden mejorar la estética visual de nuestras aplicaciones y promover mejor nuestras reglas comerciales. También hemos visto algunas banderas cuando combinadas pueden chocar y dar una experiencia negativa a sus usuarios.

¡Sé creativo y prueba algunos combos de scrollflag diferentes para tu aplicación!

Gracias de nuevo por leer!

¡Mira mi otro artículo sobre CoordinatorLayout Behaviors para aprender cómo crear el tuyo!