Schermata iniziale

Articolo
03/08/2024

L'avvio di un'app Android richiede tempo, soprattutto quando l'app viene avviata per la prima volta in un dispositivo. Una schermata iniziale può visualizzare lo stato di avanzamento dell'avvio per l'utente o per indicare la personalizzazione.

Panoramica

Un'app Android richiede del tempo per l'avvio, soprattutto durante la prima esecuzione dell'app in un dispositivo (talvolta viene definita avvio a freddo). La schermata iniziale può visualizzare lo stato di avanzamento dell'avvio per l'utente oppure può visualizzare informazioni di personalizzazione per identificare e promuovere l'applicazione.

Questa guida illustra una tecnica per implementare una schermata iniziale in un'applicazione Android. Vengono illustrati i passaggi seguenti:

Creazione di una risorsa disegnabile per la schermata iniziale.
Definizione di un nuovo tema che visualizzerà la risorsa disegnabile.
Aggiunta di una nuova attività all'applicazione che verrà usata come schermata iniziale definita dal tema creato nel passaggio precedente.

Requisiti

Questa guida presuppone che l'applicazione sia destinata al livello API Android 21 o superiore. L'applicazione deve avere anche i pacchetti NuGet Xamarin.Android.Support.v4 e Xamarin.Android.Support.v7.AppCompat aggiunti al progetto.

Tutto il codice e il codice XML in questa guida sono disponibili nel progetto di esempio SplashScreen per questa guida.

Implementazione di una schermata iniziale

Il modo più rapido per eseguire il rendering e la visualizzazione della schermata iniziale consiste nel creare un tema personalizzato e applicarlo a un'attività che mostra la schermata iniziale. Quando viene eseguito il rendering dell'attività, carica il tema e applica la risorsa disegnabile (a cui fa riferimento il tema) allo sfondo dell'attività. Questo approccio evita la necessità di creare un file di layout.

La schermata iniziale viene implementata come attività che visualizza l'elemento disegnabile, esegue le inizializzazioni e avvia tutte le attività. Dopo che l'app è stata avviata, l'attività della schermata iniziale avvia l'attività principale e si rimuove dallo stack back dell'applicazione.

Creazione di un elemento drawable per la schermata iniziale

La schermata iniziale visualizzerà un codice XML disegnabile in background dell'attività della schermata iniziale. È necessario usare un'immagine bitmap (ad esempio png o JPG) per visualizzare l'immagine.

L'applicazione di esempio definisce un oggetto drawable denominato splash_screen.xml. Questo elemento disegnabile usa un elenco livelli per centrare l'immagine della schermata iniziale nell'applicazione, come illustrato nel codice XML seguente:

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

Questa operazione layer-list centra l'immagine iniziale su un colore di sfondo specificato dalla @color/splash_background risorsa. L'applicazione di esempio definisce questo colore nel file Resources/values/colors.xml :

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

Per altre informazioni sugli Drawable oggetti, vedere la documentazione di Google su Android Drawable.

Implementazione di un tema

Per creare un tema personalizzato per l'attività della schermata iniziale, modificare (o aggiungere) i valori del file /styles.xml e creare un nuovo style elemento per la schermata iniziale. Di seguito è riportato un stylefile di valori di esempio/style.xml denominato 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 è molto spartano: dichiara lo sfondo della finestra, rimuove in modo esplicito la barra del titolo dalla finestra e dichiara che è a schermo intero. Se vuoi creare una schermata iniziale che emula l'interfaccia utente della tua app prima che l'attività gonfia il primo layout, puoi usare windowContentOverlay anziché windowBackground nella definizione dello stile. In questo caso, devi anche modificare il splash_screen.xml disegnabile in modo da visualizzare un'emulazione dell'interfaccia utente.

Creare un'attività iniziale

Ora è necessaria una nuova attività per Android per l'avvio con l'immagine iniziale ed esegue tutte le attività di avvio. Il codice seguente è un esempio di implementazione completa della schermata iniziale:

[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 in modo esplicito il tema creato nella sezione precedente, sostituendo il tema predefinito dell'applicazione. Non è necessario caricare un layout in OnCreate perché il tema dichiara un elemento drawable come sfondo.

È importante impostare l'attributo in modo che l'attività NoHistory=true venga rimossa dallo stack back. Per impedire al pulsante Indietro di annullare il processo di avvio, è anche possibile eseguire l'override OnBackPressed e non eseguire alcuna operazione:

public override void OnBackPressed() { }

Il lavoro di avvio viene eseguito in modo asincrono in OnResume. Questo è necessario in modo che il lavoro di avvio non rallenta o ritarda l'aspetto della schermata di avvio. Al termine del lavoro, SplashActivity avvierà MainActivity e l'utente può iniziare a interagire con l'app.

Questo nuovo SplashActivity viene impostato come attività di avvio per l'applicazione impostando l'attributo MainLauncher su true. Poiché SplashActivity è ora l'attività di avvio, è necessario modificare MainActivity.cse rimuovere l'attributo MainLauncher da MainActivity:

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

Modalità orizzontale

La schermata iniziale implementata nei passaggi precedenti verrà visualizzata correttamente in modalità verticale e orizzontale. Tuttavia, in alcuni casi è necessario disporre di schermate iniziali separate per le modalità verticale e orizzontale (ad esempio, se l'immagine iniziale è a schermo intero).

Per aggiungere una schermata iniziale per la modalità orizzontale, seguire questa procedura:

Nella cartella Resources/drawable aggiungere la versione orizzontale dell'immagine della schermata iniziale da usare. In questo esempio, splash_logo_land.png è la versione orizzontale del logo usato negli esempi precedenti (usa lettere bianche anziché blu).

Nella cartella Resources/drawable creare una versione orizzontale dell'elemento layer-list drawable definito in precedenza, ad esempio splash_screen_land.xml. In questo file impostare il percorso bitmap sulla versione orizzontale dell'immagine della schermata iniziale. Nell'esempio seguente 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>

Creare la cartella Resources/values-land se non esiste già.
Aggiungere i file colors.xml e style.xml a valori-land (questi file possono essere copiati e modificati dai file di valori/colors.xml e valori/style.xml esistenti).

Modificare valori-terra/style.xml in modo che usi la versione orizzontale dell'oggetto drawable per windowBackground. In questo esempio viene usato 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>

Modificare valori-terra/colors.xml per configurare i colori da usare per la versione orizzontale della schermata iniziale. In questo esempio il colore di sfondo iniziale viene modificato in blu per la modalità orizzontale:

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

Compilare ed eseguire di nuovo l'app. Ruotare il dispositivo in modalità orizzontale mentre la schermata iniziale è ancora visualizzata. La schermata iniziale passa alla versione orizzontale:

Si noti che l'uso di una schermata iniziale in modalità orizzontale non offre sempre un'esperienza perfetta. Per impostazione predefinita, Android avvia l'app in modalità verticale e la passa alla modalità orizzontale anche se il dispositivo è già in modalità orizzontale. Di conseguenza, se l'app viene avviata mentre il dispositivo è in modalità orizzontale, il dispositivo presenta brevemente la schermata iniziale verticale e quindi anima la rotazione dal verticale alla schermata iniziale orizzontale. Sfortunatamente, questa transizione iniziale da verticale a orizzontale avviene anche quando ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape viene specificata nei flag dell'attività iniziale. Il modo migliore per aggirare questa limitazione consiste nel creare una singola immagine della schermata iniziale che esegue correttamente il rendering in modalità verticale e orizzontale.

Riepilogo

Questa guida ha illustrato un modo per implementare una schermata iniziale in un'applicazione Xamarin.Android; ovvero l'applicazione di un tema personalizzato all'attività di avvio.