Adding a SplashScreen [Xamarin.Forms]


Normalmente cuando nos encontramos desarrollando una aplicación, nos fijamos en todos los detalles gráficos, el mas representativo creo (ademas del icono) es el SplashScreen, puesto que es la primera imagen que se muestra al usuario.

En este pequeño articulo veremos como generarla desde Xamarin.Forms, recordemos que el SplashScreen al ser una pantalla que será presentada mientras nuestra aplicación está siendo cargada, debe ser implementada para cada plataforma.

Para esto ya deberemos de haber generado nuestra aplicación, si tienen alguna duda, les recomiendo leer mi articulo: “My first App in Xamarin.Forms“.

Android

La creación del SplashScreen en Android, creo que es la más complicada y las mas solicitada, por ello empezaremos con esta.

El primer paso es crear una imagen (o solicitarle a un diseñador el apoyo para contar con esta), el formato que se recomienda es .PNG, aunque también puede ser .JPG:

SS

A continuación hay que agregarla al proyecto, para esto arrastremos el archivo de imagen al proyecto Android en la carpeta Resources y en el correspondiente drawable. 

image02.PNG

Nota: tomemos en cuenta que todas las imagenes en Android se almacenan en la carpeta Resources y se separan en subcarpetas debido a su tamaño y densidad.

El siguiente paso es configurar el archivo “styles.xml” del proyecto .Droid, este archivo se encuentra en la siguiente ruta: Resources -> values ​​-> styles.xml.

image03

Para esto, agreguemos el siguiente fragmento de código(este debe de estar dentro de los recursos):

<!– Splash Screen –>
<style name=”Theme.Splash” parent=”android:Theme”>
<item name=”android:windowBackground”>@drawable/SS</item>
<item name=”android:windowNoTitle”>true</item>
<item name=”android:windowFullscreen”>true</item>
<item name=”colorPrimaryDark”>#313131</item>
</style>

Después de esto, generemos una actividad (Activity), el cual para este ejemplo llamare “SplashActivity.cs”. Para crear dicha clase debemos de posicionarnos sobre el proyecto Android y hacer clic con el botón derecho –  “Add -> New Item” – como se muestra en la siguiente imagen:

image04

image05

Posteriormente modifiquemos el código para que quede de la siguiente manera:


using Android.OS;
using Android.App;

namespace SplashScreenDemo.Droid
{
    [Activity(Theme = "@style/Theme.Splash", MainLauncher = true, NoHistory = true)]
    public class SplashActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            StartActivity(typeof(MainActivity));
        }
    }
}

Por último abramos el archivo MainActivity y cambiemos la propiedad MainLauncher a falso (false), una vez realizado esto, el SplashScreen estará listo en el proyecto Android.

image06

Resultado

SplashScreen.gif

iOS

Para plasmar lo anterior en iOS, hay que considerar que la solución ya genera las imagenes para las distintas resoluciones que maneja Apple en sus dispositivos físicos, las cuales son:

320 × 480
640 × 960
640 × 1136
768 × 1004
etc…

Estas las podemos encontrar en la carpeta de Resources:

iOS-01

Lo único que debemos de hacer es reemplazarlas por las que queremos mostrar:

iOS-02

Una vez realizado esto es irnos al Info.plist y en la pestaña de Visual Assets cambiar la ruta de selección por la de LaunchImage:

iOS-03

Resultado:

SplashScreeniOS

Si nos percatamos, es más simple crear un SplashScreen para la plataforma iOS, teniendo en cuenta el trabajo llevado a crear en la plataforma Android.

Descarga el código completo de este ejemplo desde mi GitHub.

GitIronMan

Hasta la próxima

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s