Pantalla de presentación

  • Artículo
  • 7 minutos para leer

Ejemplo de descarga Descarga del ejemplo

Una aplicación Android tarda algún tiempo en iniciarse, especialmente cuando la aplicación se inicia por primera vez en un dispositivo. Una pantalla de presentación puede mostrar el progreso del inicio al usuario o para indicar la personalción de marca.

Información general

Una aplicación Android tarda algún tiempo en iniciarse, especialmente durante la primera vez que se ejecuta la aplicación en un dispositivo (a veces esto se conoce como arranque en frío). La pantalla de presentación puede mostrar el progreso del inicio al usuario o puede mostrar información de personal de marca para identificar y promocionar la aplicación.

En esta guía se describe una técnica para implementar una pantalla de presentación en una aplicación Android. En él se tratan los pasos siguientes:

  1. Creación de un recurso drawable para la pantalla de presentación.

  2. Definir un nuevo tema que mostrará el recurso drawable.

  3. Agregar una nueva actividad a la aplicación que se usará como pantalla de presentación definida por el tema creado en el paso anterior.

Pantalla de presentación del logotipo de Xamarin de ejemplo seguida de la pantalla de la aplicación

Requisitos

En esta guía se da por supuesto que la aplicación tiene como destino el nivel de API de Android 21 o superior. La aplicación también debe tener los paquetes de NuGet Xamarin.Android.Support.v4 y Xamarin.Android.Support.v7.AppCompat agregados al proyecto.

Todo el código y XML de esta guía se pueden encontrar en el proyecto de ejemplo SplashScreen de esta guía.

Implementación de una pantalla de presentación

La manera más rápida de representar y mostrar la pantalla de presentación es crear un tema personalizado y aplicarlo a una actividad que muestre la pantalla de presentación. Cuando se representa la actividad, carga el tema y aplica el recurso drawable (al que hace referencia el tema) al fondo de la actividad. Este enfoque evita la necesidad de crear un archivo de diseño.

La pantalla de presentación se implementa como una actividad que muestra la marca drawable, realiza cualquier inicialización e inicia cualquier tarea. Una vez que la aplicación se ha arrancado, la actividad de la pantalla de presentación inicia la actividad principal y se quita de la pila de copia de seguridad de la aplicación.

Crear un drawable para la pantalla de presentación

La pantalla de presentación mostrará un XML dibujable en el fondo de la actividad de la pantalla de presentación. Es necesario usar una imagen de mapa de bits (por ejemplo, PNG o JPG) para que se muestre la imagen.

La aplicación de ejemplo define un drawable denominado splash_screen.xml. Este drawable usa una lista de capas para centrar la imagen de la pantalla de presentación en la aplicación, como se muestra en el siguiente xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/splash_background"/>
  </item>
  <item>
    <bitmap
        android:src="@drawable/splash_logo"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>
</layer-list>

Esto layer-list centra la imagen de presentación en un color de fondo especificado por el @color/splash_background recurso. La aplicación de ejemplo define este color en el archivo Resources/values/colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  ...
  <color name="splash_background">#FFFFFF</color>
</resources>

Para más información sobre Drawable los objetos, consulte la Drawable

Implementar un tema

Para crear un tema personalizado para la actividad de la pantalla de presentación, edite (o agregue) los valores de archivo o styles.xmly cree un nuevo elemento para la pantalla de presentación. A continuación se muestra style.xml ejemplo de valores o archivos con el nombre MyTheme.Splash:

<resources>
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
  </style>

  <style name="MyTheme" parent="MyTheme.Base">
  </style>

  <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen</item>
    <item name="android:windowNoTitle">true</item>  
    <item name="android:windowFullscreen">true</item>  
    <item name="android:windowContentOverlay">@null</item>  
    <item name="android:windowActionBar">true</item>  
  </style>
</resources>

MyTheme.Splash es muy importante: declara el fondo de la ventana, quita explícitamente la barra de título de la ventana y declara que es de pantalla completa. Si desea crear una pantalla de presentación que emula la interfaz de usuario de la aplicación antes de que la actividad infla el primer diseño, puede usar en lugar de en la definición windowContentOverlaywindowBackground de estilo. En este caso, también debe modificar el splash_screen.xml dibujar para que muestre una emulación de la interfaz de usuario.

Crear una actividad de presentación

Ahora necesitamos que se inicie una nueva actividad para Android que tenga la imagen de presentación y realice las tareas de inicio. El código siguiente es un ejemplo de una implementación completa de la pantalla de presentación:

[Activity(Theme = "@style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
public class SplashActivity : AppCompatActivity
{
    static readonly string TAG = "X:" + typeof(SplashActivity).Name;

    public override void OnCreate(Bundle savedInstanceState, PersistableBundle persistentState)
    {
        base.OnCreate(savedInstanceState, persistentState);
        Log.Debug(TAG, "SplashActivity.OnCreate");
    }

    // Launches the startup task
    protected override void OnResume()
    {
        base.OnResume();
        Task startupWork = new Task(() => { SimulateStartup(); });
        startupWork.Start();
    }

    // Simulates background work that happens behind the splash screen
    async void SimulateStartup ()
    {
        Log.Debug(TAG, "Performing some startup work that takes a bit of time.");
        await Task.Delay (8000); // Simulate a bit of startup work.
        Log.Debug(TAG, "Startup work is finished - starting MainActivity.");
        StartActivity(new Intent(Application.Context, typeof (MainActivity)));
    }
}

SplashActivity usa explícitamente el tema que se creó en la sección anterior, reemplazando el tema predeterminado de la aplicación. No es necesario cargar un diseño en OnCreate , ya que el tema declara un drawable como fondo.

Es importante establecer el atributo NoHistory=true para que la actividad se quite de la pila atrás. Para evitar que el botón Atrás cancele el proceso de inicio, también puede invalidar OnBackPressed y hacer que no haga nada:

public override void OnBackPressed() { }

El trabajo de inicio se realiza de forma asincrónica en OnResume . Esto es necesario para que el trabajo de inicio no se retrase ni retrase la apariencia de la pantalla de inicio. Una vez completado el trabajo, SplashActivity se iniciará y el usuario puede empezar a interactuar con la MainActivity aplicación.

Esta nueva SplashActivity se establece como la actividad del iniciador de la aplicación estableciendo el atributo en MainLaunchertrue . Dado SplashActivity que ahora es la actividad del iniciador, debe editar y quitar el atributo de MainActivity.csMainLauncherMainActivity :

[Activity(Label = "@string/ApplicationName")]
public class MainActivity : AppCompatActivity
{
    // Code omitted for brevity
}

Modo horizontal

La pantalla de presentación implementada en los pasos anteriores se mostrará correctamente en modo vertical y horizontal. Sin embargo, en algunos casos es necesario tener pantallas de presentación independientes para los modos vertical y horizontal (por ejemplo, si la imagen de presentación es de pantalla completa).

Para agregar una pantalla de presentación para el modo horizontal, siga estos pasos:

  1. En la carpeta Recursos/drawable, agregue la versión horizontal de la imagen de pantalla de presentación que desea usar. En este ejemplo, splash_logo_land.png es la versión horizontal del logotipo que se usó en los ejemplos anteriores (usa letras blancas en lugar de azul).

  2. En la carpeta Recursos/drawable, cree una versión horizontal del drawable que se definió anteriormente (por ejemplo, splash_screen_land.xml). En este archivo, establezca la ruta de acceso del mapa de bits en la versión horizontal de la imagen de la pantalla de presentación. En el ejemplo siguiente, splash_screen_land.xml usa splash_logo_land.png:

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/splash_background"/>
  </item>
  <item>
    <bitmap
        android:src="@drawable/splash_logo_land"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>
</layer-list>

  3. Cree la carpeta Resources/values-land si aún no existe.

  4. Agregue los archivos colors.xml y style.xmla values-land (estos se pueden copiar y modificar desde los archivos values/colors.xmly values/style.xml existentes).

  5. Modifique values-land/style.xml para que use la versión horizontal del drawable para . En este ejemplo, splash_screen_land.xml se usa:

    <resources>
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
  </style>
    <style name="MyTheme" parent="MyTheme.Base">
  </style>
  <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen_land</item>
    <item name="android:windowNoTitle">true</item>  
    <item name="android:windowFullscreen">true</item>  
    <item name="android:windowContentOverlay">@null</item>  
    <item name="android:windowActionBar">true</item>  
  </style>
</resources>

  6. Modifique values-land/colors.xml para configurar los colores que desea usar para la versión horizontal de la pantalla de presentación. En este ejemplo, el color de fondo de presentación se cambia a azul para el modo horizontal:

    <?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="primary">#2196F3</color>
  <color name="primaryDark">#1976D2</color>
  <color name="accent">#FFC107</color>
  <color name="window_background">#F5F5F5</color>
  <color name="splash_background">#3498DB</color>
</resources>

  7. Compile y ejecute la aplicación otra vez. Gira el dispositivo al modo horizontal mientras se muestra la pantalla de presentación. La pantalla de presentación cambia a la versión horizontal:

    Rotación de la pantalla de presentación al modo horizontal

Tenga en cuenta que el uso de una pantalla de presentación en modo horizontal no siempre proporciona una experiencia sin problemas. De forma predeterminada, Android inicia la aplicación en modo vertical y la pasa al modo horizontal incluso si el dispositivo ya está en modo horizontal. Como resultado, si la aplicación se inicia mientras el dispositivo está en modo horizontal, el dispositivo presenta brevemente la pantalla de presentación vertical y, a continuación, anima la rotación desde el vertical hasta la pantalla de presentación horizontal. Desafortunadamente, esta transición vertical a horizontal inicial tiene lugar incluso cuando se especifica en las marcas de la actividad ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape de presentación. La mejor manera de evitar esta limitación es crear una sola imagen de pantalla de presentación que se represente correctamente en los modos vertical y horizontal.

Resumen

En esta guía se ha analizado una manera de implementar una pantalla de presentación en una aplicación de Xamarin.Android. es decir, aplicar un tema personalizado a la actividad de inicio.