Pantalla de presentaciónSplash Screen

Una aplicación Android tarda algún tiempo en iniciarse, especialmente cuando la aplicación se inició por primera vez en un dispositivo. Una pantalla de presentación puede mostrar el inicio hasta el usuario o para indicar la personalización de marca de progreso.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 se ejecuta la aplicación en un dispositivo (en ocasiones, esto se conoce como un 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). Es posible que muestre la pantalla de presentación iniciarse progreso al 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.

Esta guía explica 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. Creación de un recurso puede dibujar en la pantalla de presentación.Creating a drawable resource for the splash screen.

  2. Definir un nuevo tema que se mostrará el recurso puede 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 que creó 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 de ejemplo Xamarin logotipo seguido por la pantalla de la aplicaciónExample Xamarin logo splash screen followed by app screen

RequisitosRequirements

Esta guía se da por supuesto que la aplicación está destinada a nivel de API de Android (Android 4.0.3) 15 o superior.This guide assumes that the application targets Android API level 15 (Android 4.0.3) or higher. La aplicación también debe tener la Xamarin.Android.Support.v4 y Xamarin.Android.Support.v7.AppCompat paquetes de NuGet 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 en esta guía se puede encontrar en el SplashScreen proyecto de ejemplo para esta guía.All of the code and XML in this guide may be found in the SplashScreen sample project for this guide.

Implementación de una pantalla de presentaciónImplementing A Splash Screen

La forma más rápida para representar y mostrar la pantalla de presentación es crear un tema personalizado y aplicarlo a una actividad que se comporta de 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 se aplica a los recursos drawable (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 drawable, realiza las inicializaciones y las tareas se inicia.The splash screen is implemented as an Activity that displays the branded drawable, performs any initializations, and starts up any tasks. Una vez que se arranca la aplicación, la actividad de la pantalla de presentación inicia la actividad principal y se elimina 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.

Creación de un Drawable para la pantalla de presentaciónCreating a Drawable for the Splash Screen

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

En esta guía, usamos un lista capa para centrar la imagen de pantalla de bienvenida en la aplicación.In this guide, we use a Layer List to center the splash screen image in the application. El fragmento de código siguiente es un ejemplo de un drawable de recursos mediante un layer-list:The following snippet is an example of a drawable resource using a layer-list:

<?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"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>
</layer-list>

Esto layer-list se centrar la imagen de bienvenida splash.png en segundo plano especificado por el @color/splash_background recursos.This layer-list will center the splash image splash.png on the background specified by the @color/splash_background resource. Coloque este archivo XML en el recursos/drawable carpeta (por ejemplo, Resources/drawable/splash_screen.xml).Place this XML file in the Resources/drawable folder (for example, Resources/drawable/splash_screen.xml).

Una vez creada la pantalla de presentación con estas características, el siguiente paso es crear un tema de la pantalla de presentación.After the splash screen drawable has been created, the next step is to create a theme for the splash screen.

Implementación de un temaImplementing a Theme

Para crear un tema personalizado para la actividad de la pantalla de presentación, editar (o agregue) el archivo values/styles.xml y cree un nuevo style (elemento) 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. Un ejemplo values/style.xml archivo se muestra a continuación con un style denominado MyTheme.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>
  </style>
</resources>

MyTheme.Splash es muy spartan – declara el fondo de la ventana, explícitamente quita de la barra de título de la ventana y declara que es la 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 emula la interfaz de usuario de la aplicación antes de la actividad aumenta el primer diseño, puede usar windowContentOverlay lugar 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 el splash_screen.xml drawable para que se 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 tenemos una nueva actividad de Android iniciar que tiene la imagen de presentación y realiza cualquier tarea 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 de la pantalla de presentación completa: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, reemplazando 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 un drawable 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 NoHistory=true atributo para que la actividad se quita 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 Cancelar el proceso de inicio, también puede invalidar OnBackPressed y hacer que no hacen 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 ralentiza o retrasar 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. Cuando haya finalizado 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 MainLauncher atributo 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 quite el MainLauncher de atributo 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 que se implementa en los pasos anteriores se mostrará correctamente en 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 disponer de las pantallas de presentación independiente para los modos vertical y horizontal (por ejemplo, si la imagen de bienvenida es la 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 el recursos/drawable carpeta, agregue la versión horizontal de la imagen de pantalla de presentación que desee utilizar.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 del panorama del logotipo que se usó en los ejemplos anteriores (usa 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 el recursos/drawable carpeta, cree una versión del panorama de la layer-list drawable 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 de mapa de bits a la versión del panorama de la imagen de 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. Crear el recursos, los valores-land carpeta 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 land (estos se pueden copiar y modificar desde existente values/colors.xmly values/style.xml archivos).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. Modificar valores-land/style.xml para que use la versión horizontal de la drawable para windowBackground.Modify values-land/style.xml so that it uses the landscape version of the drawable for windowBackground. En este ejemplo, splash_screen_land.xml se usa: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. Modificar valores-land/colors.xml para configurar los colores que desee usar para la versión del panorama 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, se cambia el color de fondo de presentación a azul para 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. Compile y vuelva a ejecutar la aplicación.Build and run the app again. Girar el dispositivo para el modo horizontal mientras todavía se muestra 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 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 del modo de 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 realiza la transición para el 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 se inicia la aplicación 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 de la vertical a 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. Lamentablemente, esta transición de vertical a horizontal inicial tiene lugar incluso cuando ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape se especifica 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 evitar esta limitación es crear una imagen de pantalla de presentación único que representa 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

Esta guía describe una forma de implementar una pantalla de presentación en una aplicación de Xamarin.Android; es decir, aplicar un tema personalizado para 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.