Partager via


Écran de démarrage

Une application Android prend un certain temps pour démarrer, en particulier lorsque l’application est lancée pour la première fois sur un appareil. Un écran de démarrage peut afficher la progression du démarrage de l’utilisateur ou indiquer la personnalisation.

Vue d’ensemble

Une application Android prend un certain temps pour démarrer, en particulier lors de la première exécution de l’application sur un appareil (parfois appelé démarrage à froid). L’écran de démarrage peut afficher la progression de démarrage de l’utilisateur ou afficher des informations de personnalisation pour identifier et promouvoir l’application.

Ce guide décrit une technique permettant d’implémenter un écran de démarrage dans une application Android. Il décrit les étapes suivantes :

  1. Création d’une ressource dessinable pour l’écran de démarrage.

  2. Définition d’un nouveau thème qui affiche la ressource dessinable.

  3. Ajout d’une nouvelle activité à l’application qui sera utilisée comme écran de démarrage défini par le thème créé à l’étape précédente.

Exemple d’écran de démarrage du logo Xamarin suivi de l’écran d’application

Spécifications

Ce guide suppose que l’application cible le niveau 21 ou supérieur de l’API Android. L’application doit également avoir les packages NuGet Xamarin.Android.Support.v4 et Xamarin.Android.Support.v7.AppCompat ajoutés au projet.

Implémentation d’un écran de démarrage

Le moyen le plus rapide d’afficher et d’afficher l’écran de démarrage consiste à créer un thème personnalisé et à l’appliquer à une activité qui affiche l’écran de démarrage. Lorsque l’activité est affichée, elle charge le thème et applique la ressource dessinable (référencée par le thème) à l’arrière-plan de l’activité. Cette approche évite la création d’un fichier de disposition.

L’écran de démarrage est implémenté en tant qu’activité qui affiche le dessinable de marque, effectue toutes les initialisations et démarre toutes les tâches. Une fois l’application démarrée, l’activité de l’écran de démarrage démarre l’activité principale et se supprime de la pile arrière de l’application.

Création d’un dessinable pour l’écran de démarrage

L’écran de démarrage affiche un dessin XML en arrière-plan de l’activité de l’écran de démarrage. Il est nécessaire d’utiliser une image bitmap (telle qu’une image PNG ou JPG) pour que l’image s’affiche.

L’exemple d’application définit un dessinable appelé splash_screen.xml. Ce dessinable utilise une liste de couches pour centrer l’image de l’écran de démarrage dans l’application, comme indiqué dans le code xml suivant :

<?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>

Cela layer-list centre l’image de démarrage sur une couleur d’arrière-plan spécifiée par la @color/splash_background ressource. L’exemple d’application définit cette couleur dans le fichier Resources/values/colors.xml :

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

Pour plus d’informations sur Drawable les objets, consultez la documentation Google sur Android Drawable.

Implémentation d’un thème

Pour créer un thème personnalisé pour l’activité de l’écran de démarrage, modifiez (ou ajoutez) les valeurs de fichier /styles.xml et créez un style élément pour l’écran de démarrage. Un exemple de fichier de valeurs/style.xml est illustré ci-dessous avec un style nom nommé 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 est très spartan : il déclare l’arrière-plan de la fenêtre, supprime explicitement la barre de titre de la fenêtre et déclare qu’il est plein écran. Si vous souhaitez créer un écran de démarrage qui émule l’interface utilisateur de votre application avant que l’activité augmente la première disposition, vous pouvez utiliser windowContentOverlay plutôt que windowBackground dans votre définition de style. Dans ce cas, vous devez également modifier le splash_screen.xml dessinable afin qu’il affiche une émulation de votre interface utilisateur.

Créer une activité de démarrage

Nous avons maintenant besoin d’une nouvelle activité pour Android pour lancer qui a notre image de démarrage et effectue toutes les tâches de démarrage. Le code suivant est un exemple d’implémentation complète de l’écran de démarrage :

[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 utilise explicitement le thème créé dans la section précédente, en remplaçant le thème par défaut de l’application. Il n’est pas nécessaire de charger une disposition, OnCreate car le thème déclare un dessinable comme arrière-plan.

Il est important de définir l’attribut NoHistory=true afin que l’activité soit supprimée de la pile arrière. Pour empêcher le bouton Précédent d’annuler le processus de démarrage, vous pouvez également remplacer OnBackPressed et ne rien faire :

public override void OnBackPressed() { }

Le travail de démarrage est effectué de manière asynchrone dans OnResume. Cela est nécessaire pour que le travail de démarrage ne ralentit pas ou retarde l’apparence de l’écran de lancement. Une fois le travail terminé, SplashActivity lancez MainActivity et l’utilisateur peut commencer à interagir avec l’application.

Cette nouvelle SplashActivity est définie en tant qu’activité du lanceur pour l’application en définissant l’attribut MainLauncher sur true. Étant donné que SplashActivity l’activité du lanceur est maintenant, vous devez modifier MainActivity.cset supprimer l’attribut MainLauncher de MainActivity:

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

Mode paysage

L’écran de démarrage implémenté dans les étapes précédentes s’affiche correctement en mode portrait et paysage. Toutefois, dans certains cas, il est nécessaire d’avoir des écrans de démarrage distincts pour les modes portrait et paysage (par exemple, si l’image de démarrage est en plein écran).

Pour ajouter un écran de démarrage pour le mode paysage, procédez comme suit :

  1. Dans le dossier Ressources/dessinable , ajoutez la version paysage de l’image d’écran de démarrage que vous souhaitez utiliser. Dans cet exemple, splash_logo_land.png est la version paysage du logo utilisé dans les exemples ci-dessus (il utilise la lettre blanche au lieu de bleu).

  2. Dans le dossier Ressources/dessinable , créez une version paysage du layer-list dessinable défini précédemment (par exemple, splash_screen_land.xml). Dans ce fichier, définissez le chemin d’accès bitmap à la version paysage de l’image d’écran de démarrage. Dans l’exemple suivant, splash_screen_land.xml utilise 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. Créez le dossier Resources/values-land s’il n’existe pas déjà.

  4. Ajoutez les fichiers colors.xml et style.xml aux valeurs terrestres (ceux-ci peuvent être copiés et modifiés à partir des fichiers de valeurs/colors.xml et valeurs/style.xml existants).

  5. Modifiez les valeurs-terre/style.xml afin qu’elle utilise la version paysage du dessinable pour windowBackground. Dans cet exemple, splash_screen_land.xml est utilisé :

    <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. Modifiez les valeurs-land/colors.xml pour configurer les couleurs que vous souhaitez utiliser pour la version paysage de l’écran de démarrage. Dans cet exemple, la couleur d’arrière-plan de démarrage est remplacée en bleu pour le mode paysage :

    <?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. Générez et exécutez de nouveau l’application. Faites pivoter l’appareil en mode paysage pendant que l’écran de démarrage est toujours affiché. L’écran de démarrage passe à la version paysage :

    Rotation de l’écran de démarrage en mode paysage

Notez que l’utilisation d’un écran de démarrage en mode paysage ne fournit pas toujours une expérience transparente. Par défaut, Android lance l’application en mode Portrait et la passe en mode paysage même si l’appareil est déjà en mode paysage. Par conséquent, si l’application est lancée alors que l’appareil est en mode paysage, l’appareil présente brièvement l’écran de démarrage portrait, puis anime la rotation du portrait vers l’écran de démarrage paysage. Malheureusement, cette transition portrait-paysage initiale a lieu même lorsqu’elle ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape est spécifiée dans les indicateurs de l’activité de démarrage. La meilleure façon de contourner cette limitation consiste à créer une image d’écran de démarrage unique qui s’affiche correctement dans les modes portrait et paysage.

Résumé

Ce guide a abordé une façon d’implémenter un écran de démarrage dans une application Xamarin.Android ; à savoir, l’application d’un thème personnalisé à l’activité de lancement.