En este tutorial exploraremos la creación de menús interactivos en aplicaciones desarrolladas con App Inventor, centrándonos en la simulación de menús de hamburguesas y otras opciones de navegación.
Menú Casi Emergente
Una de las funcionalidades que podemos implementar es un menú "casi" emergente. A diferencia de un menú emergente tradicional que se superpone a los elementos existentes, este tipo de menú desplaza el contenido de la pantalla hacia abajo para hacerse visible. Para lograr este efecto, utilizaremos dos botones. Al pulsar cualquiera de ellos, se mostrará un VisorDeLista (ListPicker).
Configuración del VisorDeLista
Para optimizar la apariencia del menú, se recomienda configurar el ancho del VisorDeLista a 120 píxeles. Además, para evitar la visibilidad de los guiones que podrían aparecer en el menú, se establece el ColorDeTexto en blanco.
Lógica de Visibilidad
La interacción principal se basa en el estado de visibilidad del VisorDeLista. Cuando se pulsa un botón, el estado del VisorDeLista asociado se invierte: si estaba visible, se oculta; y si estaba oculto, se muestra.
Otra Versión de Menú Emergente
Existe otra aproximación para crear menús emergentes, donde se opta por un menú ubicado en el lado derecho de la pantalla. Para organizar los elementos de este menú, se emplean múltiples componentes de DisposiciónHorizontal, colocando una Etiqueta (Label) a la izquierda de cada uno.
Elementos de la Barra de Menús en App Inventor
La barra de menús en App Inventor contiene opciones generales esenciales para la gestión de proyectos. A continuación, se detallan las más importantes:
- Proyectos: Permite gestionar la creación, borrado, exportación e importación de proyectos.
- Conectar: Facilita la conexión a un dispositivo o emulador durante la fase de pruebas de la aplicación.
- Generar: Se utiliza para crear el archivo instalable de la aplicación en un dispositivo (solo para Android).
Gestión de Proyectos
- Mis Proyectos: Muestra la lista de los desarrollos guardados.
- View Trash: Permite visualizar la papelera de proyectos, es decir, aquellos que han sido borrados.
Otras Configuraciones
- Es posible cambiar el idioma en el que se visualiza la aplicación.
- Se puede ver el usuario con el que se ha iniciado sesión en la aplicación.
Inicio de un Nuevo Proyecto
Para comenzar un nuevo proyecto, se selecciona la opción "Comenzar un proyecto nuevo...". El sistema solicitará el nombre que se le asignará a la nueva aplicación.
Exportación e Importación de Proyectos
- Exportar proyectos: Guarda el archivo del desarrollo en un archivo con extensión ".aia".
- Importar proyectos: Permite subir archivos ".aia" al repositorio del usuario.
Conexión con Dispositivos para Pruebas
App Inventor ofrece varias maneras de conectar con dispositivos para probar las aplicaciones:
- AI Companion: Esta es la opción más sencilla y recomendada. Permite conectarse a un dispositivo utilizando un código QR o un código de seis cifras que aparece en la pantalla del ordenador. Es necesario tener instalada la aplicación MIT AI2 Companion en el dispositivo (disponible en la App Store). Una vez abierta la aplicación en el dispositivo, se escanea el código QR mostrado en el ordenador o se introduce el código de seis letras.
- Emulador: Funciona de manera similar al AI Companion, pero se utiliza un emulador de móvil instalado en el ordenador.
- USB: Permite la conexión a un dispositivo a través de un cable USB, lo cual puede requerir permisos especiales en el dispositivo.
Generación de Archivos Instalables
Una vez finalizada la aplicación, es posible generar un archivo que se puede instalar en cualquier dispositivo Android para usar la aplicación.
- Android App (.apk): Este es el formato más común y recomendado. Al generar el archivo, en el ordenador se crea un código QR que puede ser escaneado desde el dispositivo mediante la aplicación propia del escáner. Tras escanear el código, se descargará el archivo ".apk" al dispositivo, el cual deberá ser instalado.
Menú Inicial en Aplicaciones de Aprendizaje
Un ejemplo interesante de menú se observa en una de las aplicaciones ganadoras del Concurso de junio de 2017, desarrollada por Victor y Francisco de Orizaba, México. Esta aplicación presenta un menú inicial que da acceso a una serie de pantallas dedicadas al aprendizaje del inglés.
Simplificación del Ejemplo
En el ejemplo proporcionado (p72L_menu_inicial.aia), se utiliza el mismo algoritmo pero se ha simplificado la aplicación a una sola ventana de menú, eliminando las pantallas adicionales para una mejor comprensión del funcionamiento del menú en sí.
Consideraciones de Diseño
El diseño de este tipo de menús puede ser un desafío, ya que es fundamental tener en cuenta las dimensiones de los elementos, la elección de colores y el centrado adecuado para asegurar una experiencia de usuario óptima.
tags: #menu #de #hamburguesas #appinventor