233. Xamarin (3) - Splash

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