.NET Maui

Splash Screen en .NET MAUI 💚

XammySplashScreen

Al abrir una App en nuestros dispositivos Android e iOS, normalmente vemos una especie de bienvenida que se muestra a pantalla completa, esta suele estar compuesta por una imagen de un logo y un color de fondo que dura unos segundos antes de mostrarnos las características de la App. A esto se le llama Splash Screen. Pero… ¿El único propósito del Splash Screen es darnos una “bienvenida”? No, además nos permite mantener informado y entretenido al usuario mientras se cargan los procesos relacionados con la inicialización de la App, posteriormente el Splash Screen desaparece y la App es habilitada para su uso.

¡En este artículo aprenderemos una forma súper simple de integrarlo en .NET MAUI! 💕 Para hacerlo, dividiré el tema en tres partes:

🔹 Agregando la imagen principal a nuestro SplashScreen.

🔹 Configuración del color de fondo.

🔹 Reglas específicas de la plataforma.


¡Empecemos!

Agregando la imagen principal a nuestro SplashScreen

¡Es muy fácil! Consiste en dos pasos:

Paso  1⃣. Agrega la imagen a la carpeta Resources\Images.

En .NET MAUI se recomienda el formato Scalable Vector Graphics (SVG).

This image has an empty alt attribute; its file name is Screen-Shot-2022-02-16-at-2.39.21-PM.png

Step 2⃣. Una vez que hayas hecho click en las propiedades, establece el Build Action con MauiSplashScreen como valor.

This image has an empty alt attribute; its file name is Screen-Shot-2022-02-16-at-2.50.52-PM.png

⚠ ¡Asegúrate de tener una única imagen configurada para estos propósitos!

¡Y listo! 😎 Si vas a tu archivo YourProjectName.csproj, verás un código como el siguiente:


Configuración del color de fondo

Para seguir dándole vida a nuestra Splash Screen, ¡no puedes olvidarte de agregarle un color de fondo! Para hacerlo, solo tienes que ir a tu archivo YourProjectName.csproj y agregar la propiedad Color con el valor que desees.

Tenemos dos formas de añadir los colores:

🔹 Especificado como color hexadecimal

🔹 O como color de .NET MAUI

¡Y eso es todo! 😎


🔧 Reglas específicas de la plataforma

La imagen tiene un atributo ALT vacío; su nombre de archivo es if_android_313085.pngAndroid tiene algunas reglas de nomenclatura que debemos tener en cuenta a la hora de nombrar nuestros archivos para el Splash Screen, te dejo algunas a continuación:

🔹 El nombre debe estar en minúscula.

🔹 También debe comenzar y terminar con una letra.

🔹Además, deben tener únicamente caracteres alfanuméricos o Guiones Bajos (underscores).

⚠ Para más información sobre estas y otras normas, puedes acceder aquí.


De esta manera podemos trabajar con el Splash Screen en nuestras aplicaciones MAUI!

¡Espero que este artículo te haya sido de mucha ayuda! 🙋‍♀️
¡Hasta la próxima! 💚💕

Artículo en inglés: https://askxammy.com/splash-screen-in-net-maui-💚/

Referencias: https://docs.microsoft.com/en-us/dotnet/maui/user-interface/images/splashscreen?tabs=ios?WT.mc_id=DT-MVP-5003353

Tagged , ,

Leave a Reply

Your email address will not be published. Required fields are marked *