Un menú usando FAB en Thunkable - Parte 2

Una vez creado el diseño del menú pasamos a la programación de su conducta. Vamos a crear varios procedimientos que facilitan y disminuyen el número de bloques requeridos para hacer funcional el menú.

Floating Action Button

Procedimiento colorFABs

Este procedimiento se encargará de asignar el color de fondo a los FABs. En el utilizamos una de las dos variables previamente creadas, una para el color primario del FAB y otra para cuando el FAB obtenga el enfoque. 

Variables de color para los FABs

Procedimiento colorFABs

Este procedimiento se puede invocar donde se requiera, en este ejemplo lo llamaremos en el evento Inicializar de la pantalla (Screen.Initialize) y más adelante en otros eventos.

Evento Inicializar de la pantalla

Procedimiento viewHide_FAB_Options

Este procedimiento se encarga de mostrar/ocultar los FAB de opción. Simplemente alterna el estado de la propiedad visible de cada FAB.

Procedimiento viewHide_FAB_Options

Procedimiento changeIcon_FAB_Menu

Este procedimiento tiene como propósito cambiar el icono del FAB principal cada vez que este recibe el toque del usuario. 

Procedimiento changeIcon_FAB_Menu

Evento Click del FAB_Menu

Se lleva a cabo cada vez que el usuario toca el FAB principal (Menu) lo cual ejecuta la asignación del color primario a los FABs, visualiza/oculta los FABs de opción y cambia el icono del FAB principal.

Evento Click del FAB_Menu

Evento Click del FAB_Option1

Se lleva a cabo cada vez que el usuario toca el FAB de opción 1 lo cual ejecuta la asignación del color primario a los FABs de opción y luego asigna el color de enfoque al FAB tocado.

Evento Click del FAB_Option1

Estos bloques se pueden usar en todos los FABs de opción teniendo cuidado de cambiar el nombre del FAB de opción correspondiente.

Evento Click del FAB_Option3

Este es una variación de comportamiento para los FABs de opción. En este evento hemos agregado el procedimiento viewHide_FAB_Option que hace que al tocar un botón de opción desaparezcan todas las opciones y se cambie el icono del FAB principal.

Evento Click del FAB_Option3

Puedes utilizar la que te parezca mejor y por supuesto agregar otros efectos visuales y de comportamiento.

Evento Click del FAB_Option2

En la gráfica siguiente puedes observar el FAB de opción 2 con el llamado a la acción de compartir un mensaje por redes sociales, utilizando el componente Sharing.

Evento Click del FAB_Option2

Este ejemplo de menú te servirá como punto de partida para crear el tuyo.

Observa el vídeo tutorial para el paso a paso de su creación.

Descargar archivo .aia

Suscríbete a nuestro canal en YouTube AQUÍ

Deja tus comentarios aquí o en nuestro canal de YouTube. 

Trataremos de responder a todos.