BegrüßungsbildschirmSplash Screen

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Eine Android-App nimmt einige Zeit in Betrieb, insbesondere wenn die APP zum ersten Mal auf einem Gerät gestartet wird. Ein Begrüßungsbildschirm kann den Startstatus für den Benutzer oder das Branding anzeigen.An Android app takes some time to start up, especially when the app is first launched on a device. A splash screen may display start up progress to the user or to indicate branding.

Übersicht überOverview

Eine Android-App kann einige Zeit in Anspruch nehmen, insbesondere beim ersten Ausführen der APP auf einem Gerät (manchmal auch als _Kaltstart_bezeichnet).An Android app takes some time to start up, especially during the first time the app is run on a device (sometimes this is referred to as a cold start). Der Begrüßungsbildschirm zeigt möglicherweise den Startstatus für den Benutzer an, oder es werden Brandinginformationen angezeigt, um die Anwendung zu identifizieren und höher zu Stufen.The splash screen may display start up progress to the user, or it may display branding information to identify and promote the application.

In diesem Leitfaden wird eine Technik zum Implementieren eines Begrüßungs Bildschirms in einer Android-Anwendung erläutert.This guide discusses one technique to implement a splash screen in an Android application. Dabei werden die folgenden Schritte behandelt:It covers the following steps:

  1. Erstellen einer drawable-Ressource für den Begrüßungsbildschirm.Creating a drawable resource for the splash screen.

  2. Definieren eines neuen Designs, mit dem die drawable-Ressource angezeigt wird.Defining a new theme that will display the drawable resource.

  3. Hinzufügen einer neuen Aktivität zur Anwendung, die als Begrüßungsbildschirm verwendet wird, der von dem im vorherigen Schritt erstellten Design definiert wird.Adding a new Activity to the application that will be used as the splash screen defined by the theme created in the previous step.

Beispiel-xamarin-Logo-Begrüßungsbildschirm, gefolgt vom APP-BildschirmExample Xamarin logo splash screen followed by app screen

-AnforderungenRequirements

Diese Anleitung setzt voraus, dass die Anwendung auf Android-API-Ebene 21 oder höher ausgerichtet ist.This guide assumes that the application targets Android API level 21 or higher. Die Anwendung muss außerdem über die nuget-Pakete xamarin. Android. Support. v4 und xamarin. Android. Support. V7. AppCompat verfügen, die dem Projekt hinzugefügt werden.The application must also have the Xamarin.Android.Support.v4 and Xamarin.Android.Support.v7.AppCompat NuGet packages added to the project.

Sämtlicher Code und XML in diesem Handbuch finden Sie möglicherweise im SplashScreen -Beispiel Projekt für dieses Handbuch.All of the code and XML in this guide may be found in the SplashScreen sample project for this guide.

Implementieren eines Begrüßungs BildschirmsImplementing A Splash Screen

Die schnellste Möglichkeit zum Rendering und zum Anzeigen des Begrüßungs Bildschirms ist das Erstellen eines benutzerdefinierten Designs und das Anwenden auf eine Aktivität, die den Begrüßungsbildschirm anzeigt.The quickest way to render and display the splash screen is to create a custom theme and apply it to an Activity that exhibits the splash screen. Wenn die Aktivität gerendert wird, wird das Design geladen, und die drawable-Ressource (auf die durch das Design verwiesen wird) wird auf den Hintergrund der Aktivität angewendet.When the Activity is rendered, it loads the theme and applies the drawable resource (referenced by the theme) to the background of the activity. Bei dieser Vorgehensweise entfällt die Notwendigkeit, eine Layoutdatei zu erstellen.This approach avoids the need for creating a layout file.

Der Begrüßungsbildschirm wird als Aktivität implementiert, die das Marken drawable-Element anzeigt, sämtliche Initialisierungen ausführt und alle Aufgaben startet.The splash screen is implemented as an Activity that displays the branded drawable, performs any initializations, and starts up any tasks. Nachdem die APP gestartet wurde, startet die Aktivität des Begrüßungs Bildschirms die Hauptaktivität und entfernt sich selbst aus dem Anwendungs-Back-Stack.Once the app has bootstrapped, the splash screen Activity starts the main Activity and removes itself from the application back stack.

Erstellen eines drawable-Element für den BegrüßungsbildschirmCreating a Drawable for the Splash Screen

Im Begrüßungsbildschirm wird im Hintergrund der Aktivität des Begrüßungs Bildschirms ein XML-drawable angezeigt.The splash screen will display an XML drawable in the background of the splash screen Activity. Zum Anzeigen des Bilds muss ein Bitmap-Bild (z. b. png oder JPG) verwendet werden.It is necessary to use a bitmapped image (such as a PNG or JPG) for the image to display.

Die Beispielanwendung definiert eine drawable namens splash_screen. XML.The sample application defines a drawable called splash_screen.xml. Diese drawable verwendet eine Ebenenliste , um das Begrüßungsbildschirm Bild in der Anwendung zu zentrieren, wie im folgenden XML-Code dargestellt:This drawable uses a Layer List to center the splash screen image in the application as shown in the following 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>

In diesem layer-list wird das Begrüßungs Bild auf eine Hintergrundfarbe festgelegt, die durch die @color/splash_background-Ressource angegeben wird.This layer-list centers the splash image on a background color specified by the @color/splash_background resource. Die Beispielanwendung definiert diese Farbe in der Datei Resources/Values/Colors. XML :The sample application defines this color in the Resources/values/colors.xml file:

<?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.For more information about Drawable objects see the Google documentation on Android Drawable.

Implementieren eines DesignsImplementing a Theme

Um ein benutzerdefiniertes Design für die Aktivität des Begrüßungs Bildschirms zu erstellen, bearbeiten Sie die Datei Values/Styles. XML , oder fügen Sie Sie hinzu, und erstellen Sie ein neues style-Element für den Begrüßungsbildschirm.To create a custom theme for the splash screen Activity, edit (or add) the file values/styles.xml and create a new style element for the splash screen. Eine Beispieldatei " values. XML " wird unten mit einem style mit dem Namen " mytheme. Splash" angezeigt:A sample values/style.xml file is shown below with a style named 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 ist sehr sparsam – es den Hintergrund des Fensters deklariert, die Titelleiste explizit aus dem Fenster entfernt und deklariert, dass es sich um einen voll Bildschirm handelt.MyTheme.Splash is very spartan – it declares the window background, explicitly removes the title bar from the window, and declares that it is full-screen. Wenn Sie einen Begrüßungsbildschirm erstellen möchten, mit dem die Benutzeroberfläche der APP emuliert wird, bevor die Aktivität das erste Layout auffüllt, können Sie in der Format Definition windowContentOverlay statt windowBackground.If you want to create a splash screen that emulates the UI of your app before the activity inflates the first layout, you can use windowContentOverlay rather than windowBackground in your style definition. In diesem Fall müssen Sie auch das drawable-Element von " splash_screen. XML " so ändern, dass es eine Emulation ihrer Benutzeroberfläche anzeigt.In this case, you must also modify the splash_screen.xml drawable so that it displays an emulation of your UI.

Erstellen einer Begrüßungs AktivitätCreate a Splash Activity

Nun benötigen wir eine neue Aktivität für Android zu starten, die über unser Begrüßungs Bild verfügt und alle Start Tasks ausführt.Now we need a new Activity for Android to launch that has our splash image and performs any startup tasks. Der folgende Code ist ein Beispiel für eine vollständige Splash-Screen-Implementierung:The following code is an example of a complete splash screen implementation:

[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 überschrieben wird.SplashActivity explicitly uses the theme that was created in the previous section, overriding the default theme of the application. Es ist nicht erforderlich, ein Layout in OnCreate zu laden, da das Design einen drawable als Hintergrund deklariert.There is no need to load a layout in OnCreate as the theme declares a drawable as the background.

Es ist wichtig, das NoHistory=true-Attribut so festzulegen, dass die Aktivität aus dem Hintergrund Stapel entfernt wird.It is important to set the NoHistory=true attribute so that the Activity is removed from the back stack. Wenn Sie verhindern möchten, dass der Startvorgang von der Schaltfläche "zurück" abgebrochen wird, können Sie auch OnBackPressed außer Kraft setzen und keine Aktion ausführen:To prevent the back button from canceling the startup process, you can also override OnBackPressed and have it do nothing:

public override void OnBackPressed() { }

Die Start Arbeit wird in OnResumeasynchron ausgeführt.The startup work is performed asynchronously in OnResume. Dies ist erforderlich, damit die Start Arbeit die Darstellung des Startbildschirms nicht verlangsamt oder verzögert.This is necessary so that the startup work does not slow down or delay the appearance of the launch screen. Wenn die Arbeit abgeschlossen ist, wird SplashActivity gestartet MainActivity und der Benutzer kann mit der Interaktion mit der APP beginnen.When the work has completed, SplashActivity will launch MainActivity and the user may begin interacting with the app.

Diese neue SplashActivity wird als Start Programm Aktivität für die Anwendung festgelegt, indem das MainLauncher-Attribut auf truefestgelegt wird.This new SplashActivity is set as the launcher activity for the application by setting the MainLauncher attribute to true. Da SplashActivity jetzt die Start Programm Aktivität ist, müssen Sie MainActivity.csbearbeiten und das MainLauncher-Attribut aus MainActivityentfernen:Because SplashActivity is now the launcher activity, you must edit MainActivity.cs, and remove the MainLauncher attribute from MainActivity:

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

QuerformatLandscape Mode

Der Begrüßungsbildschirm, der in den vorherigen Schritten implementiert wurde, wird im hoch-und Querformat ordnungsgemäß angezeigt.The splash screen implemented in the previous steps will display correctly in both portrait and landscape mode. In einigen Fällen ist es jedoch erforderlich, separate Begrüßungs Bildschirme für hoch-und Querformat (z. b. wenn das Begrüßungs Bild voll Bildschirm ist) zu haben.However, in some cases it is necessary to have separate splash screens for portrait and landscape modes (for example, if the splash image is full-screen).

Zum Hinzufügen eines Begrüßungs Bildschirms für den Querformat führen Sie die folgenden Schritte aus:To add a splash screen for landscape mode, use the following steps:

  1. Fügen Sie im Ordner Resources/drawable die Landscape-Version des Begrüßungsbildschirm Bilds hinzu, das Sie verwenden möchten.In the Resources/drawable folder, add the landscape version of the splash screen image you want to use. In diesem Beispiel ist splash_logo_land. png die Landscape-Version des Logos, das in den obigen Beispielen verwendet wurde (es wird eine weiße Beschriftung anstelle von Blue verwendet).In this example, splash_logo_land.png is the landscape version of the logo that was used in the above examples (it uses white lettering instead of blue).

  2. Erstellen Sie im Ordner Resources/drawable eine Landscape-Version der zuvor definierten layer-list drawable (z . b. splash_screen_land. XML).In the Resources/drawable folder, create a landscape version of the layer-list drawable that was defined earlier (for example, splash_screen_land.xml). Legen Sie in dieser Datei den bitmappfad auf die Querformat Version des Begrüßungsbildschirm Bilds fest.In this file, set the bitmap path to the landscape version of the splash screen image. Im folgenden Beispiel verwendet splash_screen_land. XML splash_logo_land. png:In the following example, splash_screen_land.xml uses 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 ", falls er nicht bereits vorhanden ist.Create the Resources/values-land folder if it doesn't already exist.

  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 Values/Style. XML -Dateien kopiert und geändert werden).Add the files colors.xml and style.xml to values-land (these can be copied and modified from the existing values/colors.xml and values/style.xml files).

  5. Ändern Sie Values-Land/Style. XML so, dass es die Landscape-Version der drawable für windowBackgroundverwendet.Modify values-land/style.xml so that it uses the landscape version of the drawable for windowBackground. In diesem Beispiel wird splash_screen_land. XML verwendet:In this example, splash_screen_land.xml is used:

    <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 Querformat Version des Begrüßungs Bildschirms verwenden möchten.Modify values-land/colors.xml to configure the colors you want to use for the landscape version of the splash screen. In diesem Beispiel wird die Begrüßungs Hintergrundfarbe für den Querformat in blau geändert:In this example, the splash background color is changed to blue for landscape mode:

    <?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 erneut, und führen Sie Sie aus.Build and run the app again. Drehen Sie das Gerät in den Querformat, während der Begrüßungsbildschirm weiterhin angezeigt wird.Rotate the device to landscape mode while the splash screen is still displayed. Der Begrüßungsbildschirm ändert sich in die Landscape-Version:The splash screen changes to the landscape version:

    Drehung des Begrüßungs Bildschirms in den QuerformatRotation of splash screen to landscape mode

Beachten Sie, dass die Verwendung eines Begrüßungs Bildschirms im Querformat nicht immer eine nahtlose Umgebung bereitstellt.Note that the use of a landscape-mode splash screen does not always provide a seamless experience. Standardmäßig wird die APP von Android im Hochformat gestartet und in den Querformat versetzt, auch wenn sich das Gerät bereits im Querformat befindet.By default, Android launches the app in portrait mode and transitions it to landscape mode even if the device is already in landscape mode. Wenn die APP gestartet wird, während sich das Gerät im Querformat befindet, stellt das Gerät den Begrüßungsbildschirm für Hochformat kurz her und animiert dann die Drehung vom Hochformat auf den Begrüßungsbildschirm des quer Bildes.As a result, if the app is launched while the device is in landscape mode, the device briefly presents the portrait splash screen and then animates rotation from the portrait to the landscape splash screen. Leider findet dieser erste Querformat Übergang statt, auch wenn ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape in den Flags der Begrüßungs Aktivität angegeben ist.Unfortunately, this initial portrait-to-landscape transition takes place even when ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape is specified in the splash Activity's flags. Die beste Möglichkeit, diese Einschränkung zu umgehen, besteht darin, ein einzelnes Begrüßungsbildschirm Bild zu erstellen, das im hoch-und Querformat ordnungsgemäß gerendert wird.The best way to work around this limitation is to create a single splash screen image that renders correctly in both portrait and landscape modes.

SummarySummary

In dieser Anleitung wurde eine Möglichkeit zum Implementieren eines Begrüßungs Bildschirms in einer xamarin. Android-Anwendung erörtert. Dies gilt insbesondere für das Anwenden eines benutzerdefinierten Designs auf die Start Aktivität.This guide discussed one way to implement a splash screen in a Xamarin.Android application; namely, applying a custom theme to the launch activity.