Diseño del coordinador - Imagen de imgur

Diseño de Android: diseño del coordinador n.º 1: una introducción

El diseño del coordinador se describe como un "FrameLayout superpoderoso" según los documentos. Se utiliza para facilitar cómo las vistas dentro de su diseño interactúan entre sí. Esto se hace creando o asignando comportamientos específicos a estas vistas. Estos comportamientos son fundamentales para lo que hace que el diseño de materiales sea único e incluyen interacciones familiares, como cajones deslizantes y paneles para elementos y botones descartables que se adhieren a otros elementos mientras se mueven y animan.

Echemos un vistazo a los comportamientos y cómo funcionan. En nuestro próximo artículo mostraremos un ejemplo simple de cómo crear un Comportamiento que permita la interacción básica entre vistas en un CoordinatorLayout

Figura 1: Botón de acción flotante que reacciona a Snackbar Imagen cortesía de Nikita Rusin

Comportamientos

Los comportamientos son el núcleo de CoordinatorLayouts. Representan interacciones entre 2 o más vistas en el mismo diseño. Normalmente se clasifican en los siguientes:

1. Comportamientos basados ​​en diseño: por ejemplo. cuando aparece una Snackbar desde la parte inferior, el FloatingActionButton se traduce inmediatamente hacia arriba para acomodar la vista entrante como se muestra en la Figura 1 a la izquierda.
El anclaje también es una forma de Comportamiento basado en diseño, por ejemplo, cuando un FloatingActionButton está anclado a un AppBarLayout como se ve en la Figura 2. Los Comportamientos basados ​​en diseño tienden a ser ubicuos en todo el Marco de Android y generalmente son los más fáciles de crear, por lo que nos centraremos sobre ellos en este artículo.

Figura 2: Botón de acción flotante anclado a la barra de aplicaciones (derecha). Imagen cortesía de Saul Molinero

2. Comportamientos basados ​​en desplazamiento: por ejemplo. Cuando RecyclerView y AppBar existen en un CoordinatorLayout, cuando RecyclerView se desplaza, empujará la AppBar hacia arriba un poco y luego minimizará la AppBar, para continuar desplazándose sin problemas como se muestra en la Figura 2 (a la izquierda). Los comportamientos basados ​​en desplazamiento implican un poco más de trabajo para ponerlos en marcha y no nos centraremos mucho en ellos por ahora.

Si se sumerge en el código de cualquier vista que contenga un Comportamiento, notará que se adjunta un Comportamiento a la vista mediante el uso de una anotación como se muestra en EC-1, EC -2 y EC-3 a continuación.

EC-1: Comportamiento de AppBarLayout
@ CoordinatorLayout.DefaultBehavior (AppBarLayout.Behavior.class)
AppBarLayout de clase pública extiende LinearLayout
EC-2: Comportamiento de botón de acción flotante
@ CoordinatorLayout.DefaultBehavior (FloatingActionButton.Behavior.class)
clase pública FloatingActionButton extiende VisibilityAwareImageButton
EC-3: Comportamiento de Snackbar
La clase final pública Snackbar extiende BaseTransientBottomBar 

Usar la anotación como se muestra en EC-1 y EC-2 es una forma de adjuntar un comportamiento a una vista mediante programación. Una vista solo puede tener un archivo adjunto de comportamiento. Es importante tener en cuenta que una Snackbar y su BaseTransientBottomBar principal no tienen un Comportamiento adjunto, a pesar de que ambos interactúan con FloatingActionButton cuando se presiona FloatingActionButton. Esto demuestra que hay direccionalidad involucrada cuando se trata de comportamientos. Lo que significa que un comportamiento puede depender de otra vista, pero no necesariamente viceversa. Para ver por qué, veamos cómo funcionan los comportamientos internamente.

Implementando los comportamientos

Cuando se trata de crear comportamientos, su clase de comportamiento debe extender la clase Coordinator.Behaviors , donde V representa la vista que contendrá el comportamiento. La clase Coordinator.Behaviors tiene varios métodos que se pueden anular para ajustar su comportamiento, sin embargo, hay 3 métodos en particular que son esenciales para anular.

Para obtener una comprensión más profunda, utilizaremos la interacción entre FloatingActionButton y BottomSheet como ejemplo. (Consulte la clase FloatingActionButton $ Behavior)

1. layoutDependsOn (...)

Se usa para verificar si una determinada vista en CoordinatorLayout es la vista de la que depende su comportamiento. Por ejemplo, FloatingActionButton verificará si la vista BottomSheet es una vista de la que depende. Si es así, volverá verdadero.

2. onDependentViewChanged (...)

Una vez que el diseño ha encontrado una dependencia, comenzará a observar esa dependencia. Por ejemplo, una vez que FloatingActionButton ha identificado que depende de BottomSheet, este método escuchará los cambios en BottomSheet e informará a FloatingActionButton. El código de ejemplo (EC-5) a continuación lo muestra. Aquí es donde va la lógica para manejar la interacción.

EC-5: Aquí está el código de la fuente FloatingActionButton
@Anular
public boolean onDependentViewChanged (coordinatorLayout parent, FloatingActionButton child,
        Ver dependencia) {
    if (instancia de dependencia de AppBarLayout) {
        // Si dependemos de un AppBarLayout lo mostraremos / ocultaremos automáticamente
        // si la FAB está anclada a AppBarLayout
        updateFabVisibilityForAppBarLayout (padre, dependencia (AppBarLayout), hijo);
    } else if (isBottomSheet (dependencia)) {
        updateFabVisibilityForBottomSheet (dependencia, hijo);
    }
    falso retorno;
}

Como podemos ver, este método verifica el tipo de vistas en CoordinatorLayout, en nuestro caso AppBarLayout y BottomSheet, para AppBarLayout, se anclará a él, y para BottomSheet, se ocultará o traducirá hacia arriba dependiendo en varias condiciones.

3. onDependentViewRemoved (...)

Este método es similar a onDependentViewChanged (), sin embargo, informa a la vista adjunta, es decir, el FloatingActionButton si BottomSheet se ha eliminado de CoordinatorLayout. El FloatingActionButton reaccionará en consecuencia reapareciendo y traduciéndose hacia abajo si no hubiera desaparecido.

Hay más métodos ofrecidos por la clase Coordinator.Behaviors que ofrecen más granularidad. Estos 3 son los más básicos e importantes, particularmente onDependentViewChanged

Conclusión

Como puede ver, el diseño del coordinador, si se usa adecuadamente, es un mecanismo muy poderoso para organizar interacciones entre sus vistas anidadas. Es una herramienta útil para la interacción visual, en última instancia, saca a relucir los ideales de Material Motion.

¡En nuestro próximo artículo veremos cómo crear nuestros propios comportamientos personalizados! Confía en mí, es más fácil de lo que piensas. ¡Gracias por leer!
¡Paz!