Begrüßungsbildschirm

  • Artikel

Eine Android-App benötigt einige Zeit zum Starten, insbesondere, wenn die App zum ersten Mal auf einem Gerät gestartet wird. Ein Begrüßungsbildschirm zeigt möglicherweise den Status des Startvorgangs für den Benutzer an oder zeigt das Branding an.

Übersicht

Eine Android-App benötigt einige Zeit zum Starten, insbesondere während der ersten Ausführung der App auf einem Gerät (manchmal wird dies als Kaltstart bezeichnet). Der Begrüßungsbildschirm zeigt möglicherweise den Status des Startvorgangs für den Benutzer an, oder er zeigt Brandinginformationen an, um die Anwendung zu identifizieren und zu bewerben.

In diesem Handbuch wird eine Technik zum Implementieren eines Begrüßungsbildschirms in einer Android-Anwendung erläutert. Er umfasst folgende Schritte:

  1. Erstellen einer zeichnungsfähigen Ressource für den Begrüßungsbildschirm.

  2. Definieren eines neuen Designs, das die zeichnungsfähige Ressource anzeigt.

  3. Hinzufügen einer neuen Aktivität zur Anwendung, die als Begrüßungsbildschirm verwendet wird, der durch das im vorherigen Schritt erstellte Design definiert wird.

Beispiel für den Begrüßungsbildschirm des Xamarin-Logos gefolgt vom App-Bildschirm

Anforderungen

In diesem Handbuch wird davon ausgegangen, dass die Anwendung auf Android-API-Ebene 21 oder höher ausgerichtet ist. Die Anwendung muss außerdem die Pakete "Xamarin.Android.Support.v4 " und "Xamarin.Android.Support.v7.AppCompat NuGet" zum Projekt hinzugefügt haben.

Implementieren eines Begrüßungsbildschirms

Die schnellste Möglichkeit zum Rendern und Anzeigen des Begrüßungsbildschirms besteht darin, ein benutzerdefiniertes Design zu erstellen und auf eine Aktivität anzuwenden, die den Begrüßungsbildschirm anzeigt. Wenn die Aktivität gerendert wird, lädt sie das Design und wendet die zeichnungsfähige Ressource (referenziert durch das Design) auf den Hintergrund der Aktivität an. Dieser Ansatz vermeidet die Notwendigkeit, eine Layoutdatei zu erstellen.

Der Begrüßungsbildschirm wird als Aktivität implementiert, die das Branding zeichnen kann, alle Initialisierungen durchführt und alle Aufgaben startet. Sobald die App bootstrapped hat, startet die Aktivität des Begrüßungsbildschirms die Standard Aktivität und entfernt sich selbst aus dem Anwendungsrückstapel.

Erstellen eines Zeichnungsbildschirms für den Begrüßungsbildschirm

Der Begrüßungsbildschirm zeigt eine XML-Zeichnung im Hintergrund der Aktivität des Begrüßungsbildschirms an. Es ist erforderlich, ein Bitmapbild (z. B. ein PNG oder JPG) für das Anzuzeigende Bild zu verwenden.

Die Beispielanwendung definiert eine zeichnungsfähige splash_screen.xml. Diese zeichnungsfähige Funktion verwendet eine Layerliste , um das Bild des Begrüßungsbildschirms in der Anwendung zu zentrieren, wie in der folgenden XML dargestellt:

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

Dadurch layer-list wird das Begrüßungsbild auf eine von der @color/splash_background Ressource angegebene Hintergrundfarbe zentriert. Die Beispielanwendung definiert diese Farbe in der Datei "Ressourcen/Werte/colors.xml ":

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

Weitere Informationen zu Drawable Objekten finden Sie in der Google-Dokumentation unter Android Drawable.

Implementieren eines Designs

Um ein benutzerdefiniertes Design für die Aktivität des Begrüßungsbildschirms zu erstellen, bearbeiten (oder hinzufügen) Sie die Dateiwerte /styles.xml , und erstellen Sie ein neues style Element für den Begrüßungsbildschirm. Eine Beispielwerte /style.xml Datei wird unten mit dem style Namen "MyTheme.Splash" angezeigt:

<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 ist sehr spartanisch – er deklariert den Fensterhintergrund, entfernt explizit die Titelleiste aus dem Fenster und deklariert, dass es sich um den Vollbildmodus handelt. Wenn Sie einen Begrüßungsbildschirm erstellen möchten, der die Benutzeroberfläche Ihrer App emuliert, bevor die Aktivität das erste Layout aufbläht, können Sie anstelle windowBackground der Formatdefinition verwendenwindowContentOverlay. In diesem Fall müssen Sie auch die splash_screen.xml zeichnen, sodass sie eine Emulation Der Benutzeroberfläche anzeigt.

Erstellen einer Begrüßungsaktivität

Jetzt benötigen wir eine neue Aktivität für Android, um das Begrüßungsimage zu starten und alle Startaufgaben auszuführen. Der folgende Code ist ein Beispiel für eine vollständige Implementierung des Begrüßungsbildschirms:

[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 verwendet explizit das Design, das im vorherigen Abschnitt erstellt wurde, wobei das Standarddesign der Anwendung außer Kraft gesetzt wird. Es ist nicht erforderlich, ein Layout zu OnCreate laden, da das Design als Hintergrund gezeichnet werden kann.

Es ist wichtig, das NoHistory=true Attribut so festzulegen, dass die Aktivität aus dem Hintergrundstapel entfernt wird. Um zu verhindern, dass die Schaltfläche "Zurück" den Startvorgang abbricht, können Sie ihn auch außer Kraft setzen OnBackPressed und nichts tun:

public override void OnBackPressed() { }

Die Startarbeit wird asynchron in OnResume. Dies ist erforderlich, damit die Startarbeit nicht verlangsamt oder die Darstellung des Startbildschirms verzögert wird. Wenn die Arbeit abgeschlossen ist, wird sie gestartetMainActivity, SplashActivity und der Benutzer beginnt möglicherweise mit der Interaktion mit der App.

Diese neue SplashActivity wird als Startprogrammaktivität für die Anwendung festgelegt, indem das MainLauncher Attribut auf truefestgelegt wird. Da SplashActivity es sich nun um die Startprogrammaktivität handelt, müssen Sie das Attribut bearbeiten MainActivity.csund daraus MainLauncherMainActivityentfernen:

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

Querformatmodus

Der in den vorherigen Schritten implementierte Begrüßungsbildschirm wird im Hoch- und Querformat ordnungsgemäß angezeigt. In einigen Fällen ist es jedoch erforderlich, separate Begrüßungsbildschirme für Hoch- und Querformatmodi zu verwenden (z. B. wenn das Begrüßungsbild vollbildig ist).

Führen Sie die folgenden Schritte aus, um einen Begrüßungsbildschirm für den Querformatmodus hinzuzufügen:

  1. Fügen Sie im Ordner "Ressourcen/zeichnungsfähig " die Querformatversion des Bilds für den Begrüßungsbildschirm hinzu, das Sie verwenden möchten. In diesem Beispiel ist splash_logo_land.png die Querformatversion des Logos, das in den obigen Beispielen verwendet wurde (es verwendet weißen Buchstaben anstelle von Blau).

  2. Erstellen Sie im Ordner "Ressourcen/zeichnungsfähig " eine Querformatversion der layer-list zuvor definierten Zeichnungsdatei (z . B. splash_screen_land.xml). Legen Sie in dieser Datei den Bitmappfad auf die Querformatversion des Begrüßungsbildschirmbilds fest. Im folgenden Beispiel verwendet splash_screen_land.xml 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. Erstellen Sie den Ordner "Resources/values-land ", wenn er noch nicht vorhanden ist.

  4. Fügen Sie die Dateien colors.xml und style.xml zu Werten hinzu (diese können aus den vorhandenen Werten/colors.xml und Werten/style.xml Dateien kopiert und geändert werden).

  5. Ändern Sie werte-land/style.xml so, dass sie die Querformatversion der Zeichnungsfläche verwendet windowBackground. In diesem Beispiel wird splash_screen_land.xml verwendet:

    <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. Ändern Sie werteland/colors.xml , um die Farben zu konfigurieren, die Sie für die Querformatversion des Begrüßungsbildschirms verwenden möchten. In diesem Beispiel wird die Hintergrundfarbe des Begrüßungshintergrunds für den Querformatmodus in Blau geändert:

    <?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. Erstellen Sie die App, und führen Sie sie erneut aus. Drehen Sie das Gerät in den Querformatmodus, während der Begrüßungsbildschirm weiterhin angezeigt wird. Der Begrüßungsbildschirm ändert sich in die Querformatversion:

    Drehung des Begrüßungsbildschirms in den Querformatmodus

Beachten Sie, dass die Verwendung eines Begrüßungsbildschirms im Querformat nicht immer eine nahtlose Erfahrung bietet. Standardmäßig startet Android die App im Hochformatmodus und übergibt sie in den Querformatmodus, auch wenn sich das Gerät bereits im Querformatmodus befindet. Wenn die App gestartet wird, während sich das Gerät im Querformatmodus befindet, zeigt das Gerät kurz den Hochformat-Begrüßungsbildschirm an und animiert dann die Drehung vom Hochformat zum Begrüßungsbildschirm im Querformat. Leider findet dieser anfängliche Querformatübergang auch dann statt, wenn ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape er in den Flags der Begrüßungsaktivität angegeben ist. Die beste Möglichkeit, diese Einschränkung zu umgehen, besteht darin, ein einzelnes Begrüßungsbildschirmbild zu erstellen, das sowohl im Hoch- als auch im Querformat korrekt gerendert wird.

Zusammenfassung

In diesem Leitfaden wurde eine Möglichkeit zum Implementieren eines Begrüßungsbildschirms in einer Xamarin.Android-Anwendung erläutert. das Anwenden eines benutzerdefinierten Designs auf die Startaktivität.