Existen varias formas de crear una pantalla de splash, la que te voy a enseñar es una de las mas sencillas.
Antes que nada debemos agregar a nuestro proyecto una nueva pagina de contenido.
Vamos a crear una imagen, la que usaremos como pantalla de splash, esta imagen la vamos a agregar en el proyecto de Android y en el proyecto de IOS como se muestra a continuación.
Ahora codifiquemos un poco.
En el nuevo formulario vamos a establecer como fondo de pantalla la imagen que estamos usando como splash
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="DigitalID.Inicio"
>
<ContentPage.Content>
<StackLayout>
<Image x:Name="ImagenSplash" Source="d2" Aspect="Fill" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
La imagen se debe poner en un control de imagen para evitar que se distorsione.
Y veamos ahora el código en C#
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace DigitalID
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Inicio : ContentPage
{
public Inicio()
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
}
protected override async void OnAppearing()
{
base.OnAppearing();
await ImagenSplash.ScaleTo(1, 2500);
await ImagenSplash.ScaleTo(300, 2500, Easing.Linear);
Application.Current.MainPage = new NavigationPage(new MainPage());
}
}
}
Expliquemos un poco que hace el código.
1. Eliminamos el Navigation Bar para que la imagen ocupe toda la pantalla.
public Inicio() { InitializeComponent(); NavigationPage.SetHasNavigationBar(this, false); }
2. Ejecutamos una pequeña animación que también nos da los tiempos de carga de la pantalla y redireccionamos a la pantalla principal.
protected override async void OnAppearing()
{
base.OnAppearing();
await ImagenSplash.ScaleTo(1, 2500);
await ImagenSplash.ScaleTo(300, 2500, Easing.Linear);
Application.Current.MainPage = new NavigationPage(new MainPage());
}
Ahora solo nos falta un punto, hacer que esta sea nuestra primer pantalla en el proyecto, para esto en el archivo app.xaml.cs establecemos la nueva forma de inicio
public App()
{
InitializeComponent();
//MainPage = new MainPage();
MainPage = new NavigationPage(new Inicio());
}
Todo esto es un plan del Alien de Mexico, Felices lineas
