En este nuevo articulo vamos a ver como crear una Splash Screen o pantalla de inicio en App Inventor. Para ello nos ayudaremos una pequeña extensión que podréis descargar de aquí y que nos permitirá mostrar una animación gif en app inventor 2.
Diseñando la SPLASH SCREEN
Vamos a comenzar diseñando la Screen1 que será la pantalla que utilizaremos para la carga de nuestra aplicación y que mostrara una pequeña animación en formato gif. Además de una barra de progreso con un porcentaje y que podrás descargar desde este enlace.
Constara de una serie de disposiciones verticales y horizontales unas dentro de otras, donde colocaremos nuestros distintos componentes.
Tendremos una etiqueta a la que daremos el nombre de «TXTBarra» y que contendrá el texto «|». En su propiedad color de fondo, seleccionaremos el color naranja, este es el color que mas se asemeja al color del Gif. Esta etiqueta nos servirá para crear una barra de carga.
Mas abajo meteremos dos nuevas etiquetas. A la primera le daremos el nombre de «TXTCargando» y su finalidad será la de mostrar el texto cargando.
La segunda tendrá el nombre de «TXTNúmero» y contendrá el valor del porcentaje de carga. Añadiremos un componente no visible reloj, que configuraremos en sus propiedades «IntervaloDelTemporizador» a 200.
Añadiremos al proyecto una extensión para este tutorial que nos permitirá insertar gifs animados. Esta extensión se llama KIO4_AnimatedGif y la podrás descargar de aquí.
 |  |
Buscando una animación Gif
Vamos a buscar una animación que se adapte a nuestro dispositivo. Para ello nos dirigimos a Google y escribimos en el buscador la palabra «86mQ.gif«.
Pulsaremos en la imagen con el botón derecho del ratón y seleccionaremos la opción «Guardar imagen». Guardaremos la imagen en formato JPG para utilizarlo mas adelante.
Ahora pulsamos sobre la imagen para obtener una vista previa y volvemos al proceso anterior. Al guardar la imagen se guardara en formato gif, que es el que usaremos.
Si quieres utilizar una animación distinta a la que aquí te muestro en la barra de búsqueda introduce «Gif de carga Android». En las opciones selecciona la opción ICON, para que tenga un tamaño aceptable. Ahora sigue el proceso anterior que vimos para el Gif del ejemplo.
Ahora solamente queda subirlo como medio multimedia a App Inventor. Pulsamos en medios y seleccionamos nuestro Gif.
Programando la lógica del Splash Screen
Como siempre nos dirigimos a nuestra pantalla de bloques, y una vez allí, lo que vamos hacer es decir a nuestra aplicación que cuando cargue la pantalla, cargue y comience la animación de nuestro Gif. Para ello utilizaremos el bloque «llamar animatedGif» dentro de la extensión. Dentro de su propiedad «layout» introduciremos la disposición vertical u horizontal en la que queramos que aparezca. en mi caso le pondré «DisposicionHorizontal1» . En su propiedad imagen solo tendremos que introducir una etiqueta de texto con el nombre de nuestra animación en mi caso «86mQ.gif«
Ahora lo que haremos será crear una pequeña barra de carga que se ira incrementando a medida que pase el tiempo, y después añadiremos el texto que visualizara el porcentaje de carga. Para ello lo primero que haremos será crear una variable global a la que le daremos el nombre «Porcentaje». Esta variable contendrá el valor actual de la carga y será inicializada a 0.
Utilizaremos el reloj para que cuando se dispare, si el valor de la variable global es menor de 100 incremente esta en uno. También multiplicaremos por dos el ancho de nuestra etiqueta «TXTBarra». Por último mostraremos el valor de nuestra variable global en la etiqueta «TxtNúmero».
Por último solo tendríamos que añadir el bloque «else» al «if» para que en caso de querer ejecutar una acción después de la carga, como por ejemplo, abrir una segunda pantalla o mostrar una notificación.
Bien con esto terminamos, hemos visto como agregar un componente Extensión a nuestro proyecto y como simular la carga de elementos en nuestra app. Si te a gustado, o tienes alguna duda escríbelo en los comentarios y no olvides suscribirte al blog, recibirás un regalo de bienvenida. Un saludo y hasta la próxima
