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 . Agrega la imagen a la carpeta Resources\Images.
En .NET MAUI se recomienda el formato Scalable Vector Graphics (SVG).
Step . Una vez que hayas hecho click en las propiedades, establece el Build Action con MauiSplashScreen como valor.
¡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:
<ItemGroup> | |
<MauiSplashScreen Include="Resources\Images\yoursplashscreen.svg" /> | |
</ItemGroup> |
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
<MauiSplashScreen Include="Resources\Images\yoursplashscreen.svg" Color="#e2889b"" /> |
O como color de .NET MAUI
<MauiSplashScreen Include="Resources\Images\yoursplashscreen.svg" Color="Pink" /> |
¡Y eso es todo!
Reglas específicas de la plataforma
Android 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