Pantalla de presentaciónSplash Screen

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

Una aplicación Android tarda algún tiempo en iniciarse, sobre todo cuando la aplicación se inicia por primera vez en un dispositivo. Una pantalla de presentación puede mostrar el progreso de inicio al usuario o para indicar la personalización de marca.An Android app takes some time to start up, especially when the app is first launched on a device. A splash screen may display start up progress to the user or to indicate branding.

Información generalOverview

Una aplicación Android tarda algún tiempo en iniciarse, especialmente durante la primera vez que la aplicación se ejecuta en un dispositivo (en ocasiones, esto se conoce como Inicio en frío).An Android app takes some time to start up, especially during the first time the app is run on a device (sometimes this is referred to as a cold start). La pantalla de presentación puede mostrar el progreso de inicio del usuario, o puede mostrar información de personalización de marca para identificar y promover la aplicación.The splash screen may display start up progress to the user, or it may display branding information to identify and promote the application.

En esta guía se describe una técnica para implementar una pantalla de presentación en una aplicación de Android.This guide discusses one technique to implement a splash screen in an Android application. Se tratan los pasos siguientes:It covers the following steps:

  1. Crear un recurso dibujable para la pantalla de presentación.Creating a drawable resource for the splash screen.

  2. Definir un nuevo tema que mostrará el recurso que se va a dibujar.Defining a new theme that will display the drawable resource.

  3. Agregar una nueva actividad a la aplicación que se usará como la pantalla de presentación definida por el tema creado en el paso anterior.Adding a new Activity to the application that will be used as the splash screen defined by the theme created in the previous step.

pantalla de presentación del logotipo de Xamarin de ejemplo seguida de la pantalla de la aplicaciónExample Xamarin logo splash screen followed by app screen

RequisitosRequirements

En esta guía se da por supuesto que la aplicación tiene como destino el nivel de API de Android 21 o superior.This guide assumes that the application targets Android API level 21 or higher. La aplicación también debe tener los paquetes de NuGet Xamarin. Android. support. V4 y Xamarin. Android. support. V7. AppCompat agregados al proyecto.The application must also have the Xamarin.Android.Support.v4 and Xamarin.Android.Support.v7.AppCompat NuGet packages added to the project.

Todo el código y XML de esta guía se pueden encontrar en el proyecto de ejemplo SplashScreen de esta guía.All of the code and XML in this guide may be found in the SplashScreen sample project for this guide.

Implementar una pantalla de presentaciónImplementing A Splash Screen

La forma más rápida de presentar y mostrar la pantalla de presentación es crear un tema personalizado y aplicarlo a una actividad que muestre la pantalla de presentación.The quickest way to render and display the splash screen is to create a custom theme and apply it to an Activity that exhibits the splash screen. Cuando se representa la actividad, carga el tema y aplica el recurso que se dibuja (al que hace referencia el tema) al fondo de la actividad.When the Activity is rendered, it loads the theme and applies the drawable resource (referenced by the theme) to the background of the activity. Este enfoque evita la necesidad de crear un archivo de diseño.This approach avoids the need for creating a layout file.

La pantalla de presentación se implementa como una actividad que muestra la marca dibujable, realiza las inicializaciones y inicia cualquier tarea.The splash screen is implemented as an Activity that displays the branded drawable, performs any initializations, and starts up any tasks. 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 retroceso de la aplicación.Once the app has bootstrapped, the splash screen Activity starts the main Activity and removes itself from the application back stack.

Crear un dibujable para la pantalla de presentaciónCreating a Drawable for the Splash Screen

La pantalla de presentación mostrará un XML que se podrá dibujar en el fondo de la actividad de la pantalla de presentación.The splash screen will display an XML drawable in the background of the splash screen Activity. Es necesario usar una imagen de mapa de imágenes (como PNG o JPG) para que se muestre la imagen.It is necessary to use a bitmapped image (such as a PNG or JPG) for the image to display.

La aplicación de ejemplo define una dibujable denominada splash_screen. XML.The sample application defines a drawable called splash_screen.xml. Este dibujo usa una lista de capas para centrar la imagen de la pantalla de presentación en la aplicación, tal como se muestra en el siguiente código XML:This drawable uses a Layer List to center the splash screen image in the application as shown in the following 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>

Esta layer-list centra la imagen de la pantalla de presentación en un color de fondo especificado por el recurso de @color/splash_background.This layer-list centers the splash image on a background color specified by the @color/splash_background resource. La aplicación de ejemplo define este color en el archivo Resources/Values/colors. XML :The sample application defines this color in the Resources/values/colors.xml file:

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

Para obtener más información sobre los objetos de Drawable, consulte la documentación de Google en Android drawable.For more information about Drawable objects see the Google documentation on Android Drawable.

Implementar un temaImplementing a Theme

Para crear un tema personalizado para la actividad de la pantalla de presentación, edite (o agregue) el archivo Values/Styles. XML y cree un nuevo elemento style para la pantalla de presentación.To create a custom theme for the splash screen Activity, edit (or add) the file values/styles.xml and create a new style element for the splash screen. A continuación se muestra un archivo Values/Style. XML de ejemplo con un style denominado mis archivos . Splash:A sample values/style.xml file is shown below with a style named 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>

. Splash es muy Spartan – declara el fondo de la ventana, quita explícitamente la barra de título de la ventana y declara que está en pantalla completa.MyTheme.Splash is very spartan – it declares the window background, explicitly removes the title bar from the window, and declares that it is full-screen. Si desea crear una pantalla de presentación que eMule la interfaz de usuario de la aplicación antes de que la actividad infla el primer diseño, puede usar windowContentOverlay en lugar de windowBackground en la definición de estilo.If you want to create a splash screen that emulates the UI of your app before the activity inflates the first layout, you can use windowContentOverlay rather than windowBackground in your style definition. En este caso, también debe modificar splash_screen. XML drawable para que muestre una emulación de la interfaz de usuario.In this case, you must also modify the splash_screen.xml drawable so that it displays an emulation of your UI.

Crear una actividad de presentaciónCreate a Splash Activity

Ahora necesitamos una nueva actividad para que Android inicie con la imagen de bienvenida y realice las tareas de inicio.Now we need a new Activity for Android to launch that has our splash image and performs any startup tasks. El código siguiente es un ejemplo de una implementación completa de la pantalla de presentación:The following code is an example of a complete splash screen implementation:

[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, invalidando el tema predeterminado de la aplicación.SplashActivity explicitly uses the theme that was created in the previous section, overriding the default theme of the application. No es necesario cargar un diseño en OnCreate como el tema declara una función dibujable como fondo.There is no need to load a layout in OnCreate as the theme declares a drawable as the background.

Es importante establecer el atributo de NoHistory=true para que la actividad se quite de la pila de retroceso.It is important to set the NoHistory=true attribute so that the Activity is removed from the back stack. Para evitar que el botón atrás cancele el proceso de inicio, también puede invalidar OnBackPressed y hacer que no haga nada:To prevent the back button from canceling the startup process, you can also override OnBackPressed and have it do nothing:

public override void OnBackPressed() { }

El trabajo de inicio se realiza de forma asincrónica en OnResume.The startup work is performed asynchronously in OnResume. Esto es necesario para que el trabajo de inicio no se ralentice o retrase la apariencia de la pantalla de inicio.This is necessary so that the startup work does not slow down or delay the appearance of the launch screen. Una vez completado el trabajo, SplashActivity iniciará MainActivity y el usuario puede empezar a interactuar con la aplicación.When the work has completed, SplashActivity will launch MainActivity and the user may begin interacting with the app.

Esta nueva SplashActivity se establece como la actividad del iniciador de la aplicación estableciendo el atributo MainLauncher en true.This new SplashActivity is set as the launcher activity for the application by setting the MainLauncher attribute to true. Dado que SplashActivity es ahora la actividad del iniciador, debe editar MainActivity.csy quitar el atributo MainLauncher de MainActivity:Because SplashActivity is now the launcher activity, you must edit MainActivity.cs, and remove the MainLauncher attribute from MainActivity:

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

Modo horizontalLandscape Mode

La pantalla de presentación implementada en los pasos anteriores se mostrará correctamente en el modo vertical y horizontal.The splash screen implemented in the previous steps will display correctly in both portrait and landscape mode. 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 la pantalla de presentación está en pantalla completa).However, in some cases it is necessary to have separate splash screens for portrait and landscape modes (for example, if the splash image is full-screen).

Para agregar una pantalla de presentación para el modo horizontal, siga estos pasos:To add a splash screen for landscape mode, use the following steps:

  1. En la carpeta Resources/drawable , agregue la versión horizontal de la imagen de la pantalla de presentación que desee usar.In the Resources/drawable folder, add the landscape version of the splash screen image you want to use. En este ejemplo, splash_logo_land. png es la versión horizontal del logotipo que se usó en los ejemplos anteriores (utiliza letras en blanco en lugar de azul).In this example, splash_logo_land.png is the landscape version of the logo that was used in the above examples (it uses white lettering instead of blue).

  2. En la carpeta Resources/drawable , cree una versión horizontal del layer-list dibujable que se definió anteriormente (por ejemplo, splash_screen_land. XML).In the Resources/drawable folder, create a landscape version of the layer-list drawable that was defined earlier (for example, 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.In this file, set the bitmap path to the landscape version of the splash screen image. En el ejemplo siguiente, splash_screen_land. XML usa splash_logo_land. png:In the following example, splash_screen_land.xml uses 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.Create the Resources/values-land folder if it doesn't already exist.

  4. Agregue los archivos colors. XML y style. XML a valores-terrenos (se pueden copiar y modificar desde los archivos valores/colores. XML y valores/estilo. XML existentes).Add the files colors.xml and style.xml to values-land (these can be copied and modified from the existing values/colors.xml and values/style.xml files).

  5. Modifique Values-Land/Style. XML para que use la versión horizontal de drawable para windowBackground.Modify values-land/style.xml so that it uses the landscape version of the drawable for windowBackground. En este ejemplo, se usa splash_screen_land. XML :In this example, splash_screen_land.xml is used:

    <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 quiere usar para la versión horizontal de la pantalla de presentación.Modify values-land/colors.xml to configure the colors you want to use for the landscape version of the splash screen. En este ejemplo, el color de fondo de la pantalla de presentación cambia a azul para el modo horizontal:In this example, the splash background color is changed to blue for landscape mode:

    <?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. Vuelva a compilar y ejecutar la aplicación.Build and run the app again. Gire el dispositivo al modo horizontal mientras se sigue mostrando la pantalla de presentación.Rotate the device to landscape mode while the splash screen is still displayed. La pantalla de presentación cambia a la versión horizontal:The splash screen changes to the landscape version:

    rotación de la pantalla de presentación en modo horizontalRotation of splash screen to landscape mode

Tenga en cuenta que el uso de una pantalla de presentación en modo horizontal no siempre proporciona una experiencia sin problemas.Note that the use of a landscape-mode splash screen does not always provide a seamless experience. De forma predeterminada, Android inicia la aplicación en modo vertical y la cambia al modo horizontal, incluso si el dispositivo ya está en modo horizontal.By default, Android launches the app in portrait mode and transitions it to landscape mode even if the device is already in landscape mode. 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 el giro desde el vertical hasta la pantalla de presentación horizontal.As a result, if the app is launched while the device is in landscape mode, the device briefly presents the portrait splash screen and then animates rotation from the portrait to the landscape splash screen. Desafortunadamente, esta transición inicial vertical a horizontal tiene lugar incluso cuando se especifica ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape en las marcas de la actividad de presentación.Unfortunately, this initial portrait-to-landscape transition takes place even when ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape is specified in the splash Activity's flags. La mejor manera de solucionar esta limitación es crear una única imagen de pantalla de presentación que se represente correctamente en los modos vertical y horizontal.The best way to work around this limitation is to create a single splash screen image that renders correctly in both portrait and landscape modes.

ResumenSummary

En esta guía se describe 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.This guide discussed one way to implement a splash screen in a Xamarin.Android application; namely, applying a custom theme to the launch activity.