Begrüßungsbildschirm

  • Artikel

Beispiel herunterladen Das Beispiel herunterladen

Der Start einer Android-App dauert einige Zeit, insbesondere wenn die App zum ersten Mal auf einem Gerät gestartet wird. Ein Begrüßungsbildschirm kann dem Benutzer den Startfortschritt anzeigen oder das Branding angeben.

Übersicht

Der Start einer Android-App dauert einige Zeit, insbesondere wenn die App zum ersten Mal auf einem Gerät ausgeführt wird (manchmal wird dies auch als Kaltstart bezeichnet). Auf dem Begrüßungsbildschirm wird dem Benutzer möglicherweise der Startfortschritt angezeigt, oder es werden Brandinginformationen angezeigt, um die Anwendung zu identifizieren und zu bewerben.

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

  1. Erstellen einer ziehbaren 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.

Beispielbildschirm für das Xamarin-Logo gefolgt vom App-Bildschirm

Anforderungen

In diesem Leitfaden wird davon ausgegangen, dass die Anwendung auf Android-API-Ebene 21 oder höher ausgerichtet ist. Außerdem müssen der Anwendung die NuGet-Pakete Xamarin.Android.Support.v4 und Xamarin.Android.Support.v7.AppCompat hinzugefügt werden.

Der gesamte Code und XML in diesem Handbuch finden Sie im SplashScreen-Beispielprojekt für dieses Handbuch.

Implementieren eines Begrüßungsbildschirms

Die schnellste Möglichkeit zum Rendern und Anzeigen des Begrüßungsbildschirms besteht darin, ein benutzerdefiniertes Design zu erstellen und es 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 (auf die das Design verweist) auf den Hintergrund der Aktivität an. Bei diesem Ansatz wird das Erstellen einer Layoutdatei vermieden.

Der Begrüßungsbildschirm ist als Aktivität implementiert, die das zeichenbare Zeichen anzeigt, alle Initialisierungen ausführt und alle Aufgaben startet. Sobald die App bootstrapped wurde, startet die Begrüßungsbildschirmaktivität die Standard Aktivität und entfernt sich selbst aus dem Rückstapel der Anwendung.

Erstellen eines Drawable für den Begrüßungsbildschirm

Auf dem Begrüßungsbildschirm wird eine XML-Zeichnung im Hintergrund der Begrüßungsbildschirmaktivität angezeigt. Es ist erforderlich, ein Bitmapbild (z. B. PNG oder JPG) für das Anzuzeigende Bild zu verwenden.

Die Beispielanwendung definiert einen drawable namens splash_screen.xml. Diese Zeichnung verwendet eine Ebenenliste , um das Begrüßungsbildschirmbild in der Anwendung zu zentrieren, wie im folgenden XML-Code gezeigt:

<?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 Resources/values/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 zu Android Drawable.

Implementieren eines Designs

Um ein benutzerdefiniertes Design für die Begrüßungsbildschirmaktivität zu erstellen, bearbeiten (oder fügen Sie) die Dateiwerte/styles.xml hinzu, und erstellen Sie ein neues style Element für den Begrüßungsbildschirm. Unten wird eine Beispieldatei mit werten/style.xml mit dem style Namen MyTheme.Splash gezeigt:

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

Erstellen einer Splash-Aktivität

Jetzt benötigen wir eine neue Aktivität für Android, die unser Begrüßungsimage enthält und alle Startaufgaben ausführt. 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, und überschreibt das Standarddesign der Anwendung. Es ist nicht erforderlich, ein Layout in OnCreate zu laden, da das Design ein zeichnungsfähiges als Hintergrund deklariert.

Es ist wichtig, das NoHistory=true Attribut so festzulegen, dass die Aktivität aus dem Back-Stapel entfernt wird. Um zu verhindern, dass die Zurück-Schaltfläche den Startvorgang abbricht, können Sie auch überschreiben OnBackPressed und nichts tun lassen:

public override void OnBackPressed() { }

Die Startarbeit wird asynchron in OnResumeausgeführt. Dies ist erforderlich, damit die Startarbeit das Erscheinungsbild des Startbildschirms nicht verlangsamt oder verzögert. Wenn die Arbeit abgeschlossen ist, wird gestartetMainActivity, SplashActivity und der Benutzer kann mit der Interaktion mit der App beginnen.

Diese neue SplashActivity wird als Startprogrammaktivität für die Anwendung festgelegt, indem sie das MainLauncher -Attribut auf truefestlegen. Da SplashActivity jetzt die Startprogrammaktivität ist, müssen Sie bearbeiten MainActivity.csund das MainLauncher Attribut aus MainActivityentfernen:

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

Querformatmodus

Der in den vorherigen Schritten implementierte Begrüßungsbildschirm wird sowohl im Hoch- als auch im Querformat ordnungsgemäß angezeigt. In einigen Fällen ist es jedoch erforderlich, separate Begrüßungsbildschirme für den Hoch- und Querformatmodus zu verwenden (z. B. wenn das Begrüßungsbild vollbildlich 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/Drawable die Querformatversion des Begrüßungsbildschirmbilds 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ße Schrift anstelle von Blau).

  2. Erstellen Sie im Ordner Resources/drawable eine Querformatversion des drawable, das layer-list zuvor definiert wurde (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.xmlsplash_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 , falls er noch nicht vorhanden ist.

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

  5. Ändern Sie values-land/style.xml so, dass die Querformatversion des drawable für windowBackgroundverwendet wird. 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 values-land/colors.xml , um die Farben zu konfigurieren, die Sie für die Querformatversion des Begrüßungsbildschirms verwenden möchten. In diesem Beispiel wird die Farbe 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 Oberfläche bietet. Standardmäßig startet Android die App im Hochformatmodus und übergibt sie in den Querformatmodus, auch wenn sich das Gerät bereits im Querformat befindet. Wenn die App gestartet wird, während sich das Gerät im Querformat 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 Übergang zwischen Hoch- und Querformat auch dann statt, wenn ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape 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 ordnungsgemäß gerendert wird.

Zusammenfassung

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