Hola y bienvenidos una vez más a inventordeaplicaciones.es. En el artículo de hoy vamos a ver cómo solucionar el problema de límite de pantallas en App Inventor 2.
Hace ya algunas semanas un usuario de nuestra página web nos hizo una consulta sobre las pantallas en App Inventor 2, él estaba desarrollando una aplicación en la que necesitaba crear un número bastante importante de pantallas, y me comentaba que App Inventor 2 no le permitía seguir su desarrollo ya que estaba limitado en el número de pantallas, eso le hacía sentir bastante frustrado porque llevaba tiempo desarrollando la aplicación y veía que no podía culminar su proyecto. vamos a ver cómo podemos ayudar a nuestro amigo dandole una solución práctica y muy simple, solo creando dos pantallas y solucionarlo.
Diseño de la aplicación de límite de pantallas en App Inventor 2
Para nuestra nueva aplicación crearemos dos pantallas y antes de hacer nada, en la propiedad animación de cierre de pantalla y animación al abrir la pantalla seleccionar zoom, con esto conseguiremos un efecto de cambio de pantalla más profesional, también he seleccionado del desplegable de la opción Theme de la Screen 1, la opción Device default .
Continuando con el diseño en la primera pantalla pondremos dos disposiciones verticales que tanto el alto como el ancho esté ajustado al contenedor, a la primera disposición vertical, la llamaremos Pantalla 3 y la segunda Pantalla 1, en la primera disposición a la que llamamos Pantalla 3, meteremos dentro una etiqueta en la que introduciremos el texto ESTAS EN LA PANTALLA 3, y seguido metemos debajo una disposición vertical en la que dentro meteremos un botón, este contendrá el texto de siguiente, para la segunda disposición a la que llamamos Pantalla 3 haremos exactamente lo mismo, pero el texto de la etiqueta será ESTÁS EN LA PANTALLA 1, a la disposición vertical Pantalla 3 le desactivaremos la casilla de visible, de esta manera cuando ejecutemos nuestra aplicación solo veremos una disposición vertical, ya vas intuyendo cómo lo vamos a solucionar…
Para nuestra segunda Screen, haremos exactamente los mismo, pondremos dos disposiciones verticales a las que llamaremos Pantalla 2 y Pantalla 4 y dentro nuevamente meteremos dos etiquetas y dos disposiciones verticales, donde meteremos dos botones, las etiquetas contendrán el texto ESTAS EN LA PANTALLA 2 y ESTAS EN LA PANTALLA 4, los botones contendrán el mismo texto menos el botón de la disposición vertical pantalla 4, a este último le pondremos el texto VOLVER. Las dos disposiciones verticales creadas en esta segunda pantalla le dejaremos la casilla de visible desactivada, de esta manera por ahora la única disposición vertical visible será la de la Pantalla 1. Te quedara algo asi como lo que te muestro en la imagen.
Programando la aplicación de límite de pantallas en App Inventor 2
Ya que tenemos el diseño de nuestra aplicación terminada vamos a comenzar la programación de la primera Screen para solucionar el límite de pantallas en App Inventor 2. Empezaremos por esta ya que es la que por defecto App Inventor mostrará al iniciar nuestra aplicación.
Vamos a crear en primer lugar una variable global que utilizaremos para saber y controlar en qué pantalla estamos en ese momento nos y que llamaremos NúmeroPantalla.
“Cuando nombro pantalla en este tutorial me refiero a la disposición vertical que tengo activada la vista en ese momento”
Lo segundo que haremos es que cuando arranque nuestra Screen le diremos programáticamente que muestre la disposición vertical (Pantalla3) y oculte la disposición vertical 2 (Pantalla1). Más adelante y según vayamos construyendo nuestra aplicación añadiremos más bloques, pero de momento lo dejaremos tal cual se muestra en la imagen.
Ahora le diremos a nuestra aplicación que cuando pulsemos el botón 1 abra la Screen 2 pero pasandole un valor inicial a esa pantalla, utilizaremos para ello el bloque:
Abre otra pantalla con valor inicial, nombre de pantalla, valor inicial.
Para el nombre de pantalla pondremos Screen 1, para el valor inicial que le pasaremos a esta pantalla le pondremos el valor de 2.
Para el botón 2 haremos exactamente lo mismo, la diferencia estará en el valor que le pongamos al valor inicial que será 4. Date cuenta que el valor corresponderá a la pantalla que queramos mostrar en ese momento.
Bien ahora iremos a la pantalla de bloques de la Screen2, y crearemos una variable global a la que también llamaremos NúmeroPantalla y le daremos el valor de cero.
Cuando inicie la Screen 2, lo que haremos es darle a nuestra variable el valor que nos manda la Screen 1 y comprobaremos que el valor de la variable sea igual a 2, si es así, pondremos nuestra Pantalla 2 visible y ocultaremos nuestra Pantalla 4, si de lo contrario la variable no contiene el valor de dos, entonces haremos lo contrario, haremos visible la Pantalla 4 y ocultaremos la Pantalla 2.
Para el botón 1 y 2 de la Screen 2 haremos exactamente lo mismo que con los dos botones de la Screen 1, la diferencia estará que abriremos esta vez la Screen1 y en el valor que le pongamos al valor inicial será para el botón 1 el valor de 3, y para el botón 2 será 1. Te recuerdo que el valor corresponderá a la pantalla que queramos mostrar en ese momento.
Bien antes de probar la aplicación vamos a volver a nuestra Screen 1, y es que ahora deberemos meter la lógica necesaria para que cuando volvamos de nuestra Screen 2, nuestra primera Screen nos muestre la pantalla que corresponda al valor mandado por el valor inicial, esto es facil, solo deberemos hacer lo mismo que en la Screen 2, comprobaremos que el valor de la variable sea igual a 3, si es así, pondremos nuestra Pantalla 3 visible y ocultaremos nuestra Pantalla 1, si de lo contrario la variable no contiene el valor de tres, entonces haremos lo contrario, haremos visible la Pantalla 1 y ocultaremos la Pantalla 3. Quedará de la siguiente manera.
Si ahora ejecutamos nuestra aplicación y pulsamos los correspondientes botones, pasaremos de una disposición vertical a otra utilizando la animación de cierre de pantalla y de abrir pantalla, de esta manera queda solucionado el problema de límite de pantallas en Appinventor 2.
Si quieres que hablemos de algun asunto en concreto, o te has quedado atascado en algun desarrollo, no olvides dejarlo en los comentarios, intentaremos solucionarlo,
si quieres descargar el proyecto AIA para abrirlo en App Inventor pulsa aquí.
Sin más me despido hasta el próximo videotutorial. Un saludo
No hay comentarios:
Publicar un comentario