Pantalla de presentación
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 de inicio al usuario o indicar la personalización de marca.
Información general
Una aplicación de 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 de inicio del usuario, o puede mostrar información de personalización de marca para identificar y promover la aplicación.
En esta guía se describe una técnica para implementar una pantalla de presentación en una aplicación Android. Trata los pasos siguientes:
Crear un recurso dibujable para la pantalla de presentación.
Definir un nuevo tema que mostrará el recurso dibujable.
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.
Requisitos
En esta guía se supone que la aplicación tiene como destino el nivel 21 o superior de la API de Android. La aplicación también debe tener los paquetes NuGet Xamarin.Android.Support.v4 y Xamarin.Android.Support.v7.AppCompat agregados al proyecto.
Implementación de una pantalla de presentación
La forma 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 dibujable (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 el dibujo de marca, realiza las inicializaciones e inicia las tareas. 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.
Crear un elemento dibujable para la pantalla de presentación
La pantalla de presentación mostrará un XML dibujable en segundo plano de la actividad de la pantalla de presentación. Es necesario usar una imagen de mapa de bits (como PNG o JPG) para que se muestre la imagen.
La aplicación de ejemplo define un drawable denominado splash_screen.xml. Este dibujo 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>
Este layer-list centra la imagen de presentación en un color de fondo especificado por el recurso @color/splash_background. 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 obtener más información sobre Drawable objetos, vea la documentación de Google en Android Drawable.
Implementación de un tema
Para crear un tema personalizado para la actividad de la pantalla de presentación, edite (o agregue) el archivo valores o styles.xml y cree un nuevo elemento style para la pantalla de presentación. A continuación se muestra un archivo valores o styles.xml de ejemplo con un style denominado 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 espartano: 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 quiere 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 windowContentOverlay en lugar windowBackground de hacerlo en la definición de estilo. En este caso, también debe modificar el splash_screen.xml dibujable para que muestre una emulación de la interfaz de usuario.
Crear una actividad de presentación
Ahora necesitamos una nueva actividad para Android para iniciar que tenga nuestra 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 que se puede dibujar como fondo.
Es importante establecer el atributo NoHistory=true para que la actividad se quite de la pila posterior. 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 ralentice ni retrase la apariencia de la pantalla de inicio. Una vez completado el trabajo, SplashActivity se iniciará MainActivity y el usuario puede empezar a interactuar con la aplicación.
Este nuevo SplashActivity se establece como la actividad del iniciador de la aplicación estableciendo el MainLauncheratributo en true. Dado que SplashActivity ahora es la actividad del iniciador, debe editar MainActivity.cs, y quitar el MainLauncher atributo de MainActivity:
[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:
En la carpeta Recursos/dibujable, agregue la versión horizontal de la imagen de pantalla de presentación que desea usar. En este ejemplo, splash_logo_land.pnges la versión horizontal del logotipo que se usó en los ejemplos anteriores (usa letras blancas en lugar de azul).
En la carpeta Resources/drawable, cree una versión horizontal del
layer-listdibujable que se definió anteriormente (por ejemplo, splash_screen_land.xml). En este archivo, establezca la ruta de acceso del mapa de bits a 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>Cree la carpeta Resources/values-land si aún no existe.
Agregue los archivos colors.xml y style.xml a valores-tierra (estos se pueden copiar y modificar a partir de los valores o colors.xml existentes y archivos valores/style.xml).
Modifique valores-tierra/style.xml para que use la versión horizontal del objeto dibujable para
windowBackground. En este ejemplo, se usa splash_screen_land.xml:<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>Modifique valores-tierra/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 la 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>Compile y ejecute la aplicación otra vez. Gire el dispositivo al modo horizontal mientras se sigue mostrando la pantalla de presentación. La pantalla de presentación cambia a la versión 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 del retrato a la pantalla de presentación horizontal. 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. La mejor manera de solucionar 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 explicó 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.