Implementando BottomAppBar III: Comportamiento para Android

Uno de los nuevos componentes de material de Android que se presenta en Google I / O 2018 es BottomAppBar. Al mover el control del cajón de navegación y el menú de acción a la parte inferior de la pantalla de la aplicación, BottomAppBar brinda una nueva y fresca apariencia a las aplicaciones de Android.

En las dos primeras partes de nuestra serie BottomAppBar, presentamos BottomAppBar y discutimos sus atributos. También hemos explicado cómo manejar el control del cajón de navegación y el menú de acción con BottomAppBar. En caso de que aún no los haya leído, puede encontrar las dos primeras partes de esta serie a continuación.

Una cosa segura es que los componentes no son estáticos dentro de una aplicación. Pueden moverse, transformarse o desencadenar una acción, es decir, tienen comportamientos. El diseño de materiales tiene como objetivo formar un marco para estos comportamientos también. En este artículo, discutiremos los detalles de implementación de las sugerencias de comportamiento para BottomAppBar que se presentan en la página de Directrices de materiales de BottomAppBar.

Diseño BottomAppBar para pantallas secundarias

Comportamiento

Diseño

La primera pauta de comportamiento está en el diseño de BottomAppBar. Esto es lo que se sugiere:

Para admitir la intención de diferentes secciones de una aplicación, el diseño y las acciones de una barra de aplicaciones inferior se pueden cambiar para adaptarse a cada pantalla.
Por ejemplo, las pantallas pueden mostrar más o menos acciones según lo que mejor se adapte al contenido de la pantalla.
Directriz de comportamiento de diseño para BottomAppBar

Según esta guía, se sugiere utilizar un diseño BottomAppBar que muestre algunas acciones en el menú de acciones con un FAB centrado en las pantallas principales. En las pantallas secundarias activadas por las pantallas principales, el diseño de BottomAppBar debe consistir en un FAB final y algunos elementos de menú de acción adicionales. Las transiciones de diseño de estos dos casos deben manejarse adecuadamente. El gif a la izquierda es una demostración de estas pautas.

Veamos cómo hemos implementado este comportamiento. Tenemos dos archivos xml en res / menu para el menú de acción de cada pantalla.

Cuando se activa la acción de transición de pantalla, por ejemplo, se hace clic en el botón TOGGLE SCREEN en nuestro caso, el diseño de BottomAppBar que incluye el menú de acción y la FAB deberían cambiar. Aquí está el código básico para el comportamiento del diseño BottomAppBar que va desde la pantalla primaria a la pantalla secundaria.

// Ocultar icono del cajón de navegación
bottom_app_bar.navigationIcon = nulo
// Mueve FAB desde el centro de BottomAppBar hasta el final
bottom_app_bar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_END
// Reemplazar el menú de acciones
bottom_app_bar.replaceMenu (bottomappbar_menu_secondary)
// Cambiar icono de FAB
fab? .setImageDrawable (baseline_reply_white_24)

Si desea realizar las transiciones con animación, se requiere algún código adicional. Puede examinar el código fuente vinculado al final de esta publicación para ver las mejoras.

Desplazamiento

El desplazamiento es un desencadenante de comportamiento importante para componentes como BottomAppBar. En la página de pautas de diseño de materiales, el comportamiento sugerido para este caso se indica como:

Al desplazarse, la barra de la aplicación inferior puede aparecer o desaparecer:
Desplazarse hacia abajo oculta la barra de aplicaciones inferior. Si hay un FAB, se separa de la barra y permanece en la pantalla.
Al desplazarse hacia arriba, se muestra la barra de aplicaciones inferior y se vuelve a unir a una FAB si hay una presente.

A continuación se muestra la demostración junto con la implementación para ocultar el comportamiento de desplazamiento de BottomAppBar.

BottomAppBar ocultar en el comportamiento de desplazamiento

Para habilitar este comportamiento, BottomAppBar y la FAB deben ser hijos directos de CoordinatorLayout en el archivo de diseño. Luego habilitamos hideOnScroll y establecemos banderas de desplazamiento para BottomAppBar de la siguiente manera.

Eso será suficiente para ocultar el comportamiento de desplazamiento para BottomAppBar.

Elevación

Cada componente en el mundo del diseño de materiales tiene una elevación análoga a nuestro mundo físico. BottomAppBar tiene una elevación de 8dp donde el contenido tiene 0dp y FAB tiene una elevación de 12dp en estado de reposo. Dos componentes que mencionaremos en este artículo, que son Botten Navigation Drawer y Snackbar, tienen elevaciones de 16dp y 6dp respectivamente.

Normalmente, un snackbar es un componente para notificar al usuario que aparece desde la parte inferior de la pantalla. Sin embargo, si la pantalla tiene BottomAppBar o Bottom Navigation Bar, el comportamiento de Snackbar debería cambiar. En estos casos, Snackbar debe mostrarse encima de los componentes inferiores, por ejemplo, BottomAppBar. Aquí hay una demostración y el código relacionado para la implementación.

Snackbar con BottomAppBar

Como mencionamos, Navigation Drawer tiene una elevación de 16dp, lo que significa, con las propias palabras de la guía,

"Los menús que genera la barra inferior de la aplicación (como un cajón de navegación inferior o un menú de desbordamiento) se abren como hojas inferiores a una altura mayor que la barra. "

A continuación se muestra nuestra implementación del cajón de navegación inferior.

Comportamiento del cajón de navegación inferior

El cajón de navegación inferior en sí es una hoja inferior modal y sigue las mismas reglas de implementación.

Los detalles de implementación para este comportamiento son los siguientes. Se debe crear un archivo de menú xml para la Vista de navegación que se incluirá en el cajón en res / menu.

Se debe crear un archivo de diseño para el fragmento del cajón de navegación inferior.

Este archivo de diseño contiene la Vista de navegación y los otros componentes que forman el diseño para el cajón de navegación. Para inflar este diseño, necesitamos una clase de fragmento que extienda BottomSheetDialogFragment como se indica a continuación.

Cuando se hace clic en el icono de control del cajón de navegación, se creará una instancia de este fragmento y se mostrará como se indica en el código a continuación.

Cuando se hace clic en el icono de control del cajón de navegación, el menú del cajón de navegación inferior se abre como una hoja inferior modal.

Esto concluye nuestra serie de artículos BottomAppBar. Puede encontrar el código fuente de este artículo en Github. Siéntase libre de hacer comentarios y hacer preguntas.