Cómo crear una LaunchScreen (o SplashScreen en SwiftUI)

Hoy en SwiftBeta vamos a crear una LaunchScreen o también llamada SplashScreen para nuestra app. Pero ¿qué es la LaunchScreen? es la vista que aparece al inicio de lanzar tu aplicación. Esta transición suele durar muy poco, y es apenas visible, pero aporta un toque diferente a tu app. También depende del tiempo de carga de tu app, en algunos casos se puede mostrar durante unos segundos.

Va a ser un video muy sencillo, en el que vas a aprender a crear esta vista inicial cada vez que se lance tu aplicación.

Antes de continuar, si quieres apoyar el contenido que subo cada semana, suscríbete. De esta manera seguiré publicando contenido completamente grautito en Youtube.

Creamos proyecto en Xcode

Lo primero de todo que vamos a crear es una app de ejemplo en Xcode 15, lo abrimos y creamos un nuevo proyecto. En interface muy importante hay que marcar SwiftUI. En mi caso, voy a llamar al proyecto SwiftBetaLaunchScreen.

Una vez creado el proyecto, creamos un nuevo fichero. Pulsamos COMMAND+N y en el buscador escribimos Launch, aquí aparece el tipo de archivo que necesitamos. Le damos el nombre por defecto, el de Launch Screen.

Launch Screen

Una vez hemos creado el nuevo fichero, vemos que su interfaz es diferente a lo que estamos acostumbrados con SwiftUI (esto no es el Canvas), aquí estamos utilizando el Storyboard de UIKit.

El Storyboard de UIKit es muy parecido al Canvas de SwiftUI, si queremos añadir una imagen podemos usar el símbolo + que aparece arriba a la derecha. Si clickamos podemos escoger entre diferentes subvistas. En nuestro caso vamos a escoger un UIImageView.

UILabel

Ahora mismo en nuestra vista tenemos 2 subvistas un UILabel, y un UIImageView. En el primero vamos a poner un mensaje muy sencillo "¡Suscríbete a SwiftBeta! 🚀". Al hacerlo vemos que el texto queda muy justo, podemos ajustarlo, al hacer más pequeño el recuadro del UILabel, aparecen una líneas naranjas, estas líneas son las constraints que usamos en UIKit para posicionar las vistas. Usamos Auto Layout, si quieres aprender más, tengo una serie de videos donde lo explico, te lo dejo por aquí arriba.
Para solucionar el error, vamos a uno de los iconos que aparecen aquí abajo a la derecha del Storuboard, y pulsamos en el segundo de la derecha, el que tiene pinta de triangulo, aquí vamos a indicar que nos queremos quedar con estas constraints al pulsar "Update Constraints Constants" y automáticamente las líneas naranjas pasan a azul, indicando que ya están configuradas correctamente.

UIImageView

Lo siguiente que vamos hacer es añadir una imagen a nuestro UIImageView, y a crear las constraints. Descarga la imagen del post, y arrastrala al proyecto de Xcode, en la carpeta Assets.

Una vez añadida al proyecto, ya podemos mostrarla en nuestro UIImageView de nuestra Launch Screen. Pulsamos en UIImageView, y vamos al inspector de atributos, aquí hay un campo para indicar la imagen que queremos cargar, y incluso si pulsas al desplegable te aparece automáticamente. Escoge la imagen y automáticamente se verá dentro del UIImageView.

El inspector de atributos y mucho más, está explicado en este video de Storyboards del canal, uno muy completo con varios consejos, por si tienes interes en como crear interfaces de tu app con UIKit.

Una vez añadida la imagen, vamos a crear la constraints, con nuestro UIImageView seleccionado, pulsamos la tecla control, y sin soltar arrastramos hasta tocar el UILabel, una vez estamos tocando el area del UILabel soltamos y allí vemos que aparece un popup, escogemos Vertical Spacing. Con esta constraint estamos indicando la distancia que queremos del UIImageView al UILabel.

La siguiente constraint que vamos a añadir es la del width y height. Volvemos a pulsar CONTROL y desplazamos hacía la derecha y mientras estamos en la misma área del UIImageView soltamos, aquí aparece la opción width, soltamos y ya tenemos otra constraint. Con esto estamos indicando que queremos el width del tamaño actual del UIImageView, vamos hacer lo mismo para el height. Pulsamos CONTROL, y desplazamos hacía arriba y soltamos. Ya tenemos el tamaño de nuestro UIImageView.
Finalmente, vamos a centrar en el eje horizontal, y ya tendríamos todas las contrains.

Configuramos App Icons and Launch Screen

Antes de compilar, debemos hacer un último paso, nos vamos al proyecto y seleccionamos nuestro target. Aquí vamos a la sección de App Icons and Launch Screen y especificamos el fichero Launch Screen con la vista que acabamos de configurar. Si pulsas en el desplegable te debe aparece un único fichero llamado Launch Screen.

Si ahora compilas, vamos a ver el resultado. Aparece un segundo la vista que acabamos de crear, y si quieres verlo más claro, podemos ir a una de las opciones del simulador para ralentizar las animaciones del simulador. Para hacerlo, vamos a  Debug -> Slow Animations, si volvemos a compilar vemos claramente la Splash Screen que hemos creado.

Conclusión

En el video de hoy hemos aprendido a cómo crear una LaunchScreen o SplashScreen, que no es más que crear una vista que aparece mientras se está cargando tu aplicación, esto es muy útil para mostrar al usuario información en lugar de una vista de loading. Hay muchas aplicaciones que sacan ventaja de estos segundos, como la app de Twitter que tienen una animación de su logo bastante chula, en tu caso podrías hacer algo similar o algo más simple como lo que hemos desarrollado hoy.

Y hasta aquí el video de hoy!