Cómo crear una SPLASH SCREEN

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í.

XM zW YdMeyX21o OKlWFb0L0gzyfHP6OmrdsQ6z uHrB  LysYsYCOUlM aNdBciGSYaoNRqDcP3GrvXO46WDvckdNK3IvrPE7kJ0QbxM1wcj466kksU hrRn4uPd4j zDykooD - Cómo crear una SPLASH SCREENrd5oYfY5mTxcUvPykig4w66Lvx6nfb TiDiryVRgq5AbG7EwHE Y hGlySkDWDx2paSO0rgVnCPrfEgWCUFDU PvCryCzDaLjwvtVLFSLsGgH2Sis4OI YaEeG1LsJB0 fDQTHB8 - Cómo crear una SPLASH SCREEN

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«.

O1t0HB1R pyxb2xhf2QzQWIGJ5rla CL9nf12XFUak0B 657CKS2mMtoMnN1KozSzDSN7IDVwxT7VLqqANYAqIf0C 5dLlsdFjn5Om5F1pPMObu6DrJkyD4G4fz9If5d7NGlXCPx - Cómo crear una SPLASH SCREEN

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.

ZOUKEFIVESz0QUFm2zMPJ2vFrtx2QSWZJ0RZqx6pzD5nNJyGHnU0z5i5CBJZYyy F5dyeIdV1jDmDil siyu8WcgJKEmDkBkAYW HYE1kob1FkBDArHKEOz2s5mL8e9fZFXOKTdR - Cómo crear una SPLASH SCREEN

Cd7Oy2IDrjsmJV9mosLScZMHmLLJTObUfnlYJWi4 R5Yc5HXeC5mu9cMjG3Bm kN2zFE43mUmFP8ey 470h76xfPb2 ygK7wZsDmFi7NypUGy3vP147lE3vNbCsqG   HD 9Q0wy - Cómo crear una SPLASH SCREEN

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.

kEK0Sv0t3U6OVaNkdJjtdf9JSPjEcDeDTA9IVw3pZgcJeIaqGr6yiqaMqmIfYt5i8uUQg 4yam 6evM L Y FnJPpbSpxOvXuHEE6 3jJoMgrjInCFMRAInYB9Uj  MAYWaBSDLh - Cómo crear una SPLASH SCREEN

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.

zODpalcrvuzGOgjiwY9cg3BQsDiGTAd17dQEfEstmpw00uDkzmQCDR8IlG yXMt9YsERhZneWfTJlH 9xceNB6eE6YHlgUZMC31TAFNxnL3FnEX8nrzyPYUgoduKMIliBpjTo5Lz - Cómo crear una SPLASH SCREEN

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«

D4x6N5NjWQrU4 Ia NbrbzfYg0Dmn7g5Fu16r4v6pueIRl4j JuIS ts9kICzg 1xn3YDeRRdwq0PcDtda zGy5Nmj0LhiScq2XSPfRCiCMXLI eDI0hcN0SDSZQP6 rHqYS9ezb - Cómo crear una SPLASH SCREEN

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.

9A0S8tES2qRAA lh dIQ2kdde07pp MSkfpZ63ocnbKvx3VJxyTasmuN2mLatKkSa8kPeyJibinUfDeaXimlLOddtiUPJ xFPboVAqSboBrH4kQE2VcH qKyFerlPGjLmQv8sfTy - Cómo crear una SPLASH SCREEN

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».

rj9EJOL063RECtboi1Cw9jyB7pA3wzUuUH6lg4OJGPlDrjNKOCzDlZ38 cT1NXe1XtmU oc5JXqtAUoAHMI2duI  LZbgsMqXH2xGaCOYQqF9We9WApuHiMxqqya7eUIyZqY4ubW - Cómo crear una SPLASH SCREEN

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.

sjIZW3ve qlAvbKM4bDuWvFc77egSXpbnATnbEVJHTK0vZZWx2TelrcIzWGmiWd5qcvKWG4x005Xd4apmY8xlWw4hYU80FyGABVF HFZbvh4Ci9Xwnyz9K4VkoV6lM AzhAle 5g - Cómo crear una SPLASH SCREEN

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

Deja un comentario

error: Content is protected !!