Startbildschirme

Ab Android 12 werden die Mit der SplashScreen API können Apps gestartet werden. mit Animation, darunter eine In-App-Bewegung beim Start und ein Ladebildschirm mit Ihr App-Symbol und einen Übergang zu Ihrer App selbst. Ein SplashScreen ist eine Window und deckt daher eine Activity

Der Ladebildschirm bringt Standard-Designelemente in jede App. Markteinführung, aber es ist auch anpassbar, sodass Ihre App ihr unverwechselbares Branding bewahren kann.

Neben der SplashScreen-Plattform-API können Sie auch den SplashScreen compat-Bibliothek, die die SplashScreen API umschließt.

So funktioniert der Ladebildschirm

Wenn ein Nutzer eine App startet, während der App-Prozess nicht ausgeführt wird (ein kaltes start) zurück oder Activity ist nicht erstellt wurde (ein Warmstart), der folgende Ereignisse eintreten:

1. Das System zeigt den Ladebildschirm mit Designs und Animationen an, definieren.

2. Wenn die App bereit ist, wird der Ladebildschirm geschlossen und die App angezeigt.

Der Ladebildschirm wird während einer Heißstart.

Elemente und Mechanismen des Ladebildschirms

Die Elemente des Ladebildschirms werden durch XML-Ressourcendateien in der Android-Manifestdatei Für jedes Element gibt es einen hellen und einen dunklen Modus.

Die anpassbaren Elemente eines Ladebildschirms sind das App-Symbol, Hintergrund und Fensterhintergrund:

</ph> <ph type="x-smartling-placeholder">

Betrachten Sie die folgenden Elemente, die in Abbildung 2 dargestellt sind:

1 Das App-Symbol muss ein Vektor-Drawable sein. Es statisch oder animiert sein. Animationen können eine unbegrenzte Dauer haben, empfehlen wir,1.000 Millisekunden nicht zu überschreiten. Das Launcher-Symbol ist das Standardsymbol.

2 Der Symbolhintergrund ist optional und nützlich, wenn benötigen Sie mehr Kontrast zwischen dem Symbol und dem Fensterhintergrund. Wenn Sie ein adaptives Symbol, Hintergrund wird angezeigt, wenn ausreichend Kontrast zum Fensterhintergrund vorhanden ist.

3 Wie bei adaptiven Symbolen wird ein Drittel der Vordergrund wird maskiert.

4 Der Fensterhintergrund besteht aus einem deckende Farbe. Wenn der Fensterhintergrund festgelegt und eine einfarbige Farbe ist, wird er verwendet. wenn das Attribut nicht festgelegt ist.

Abmessungen des Ladebildschirms

Für das Ladebildschirmsymbol gelten dieselben Spezifikationen wie für adaptive Symbole, wie folgt:

• Markenbild: muss 200 × 80 dp groß sein.
• App-Symbol mit Symbolhintergrund: Dieses muss 240 × 240 dp groß sein und in eine Kreis mit einem Durchmesser von 160 dp.
• App-Symbol ohne Symbolhintergrund: Dieses muss 288 × 288 dp groß sein und in Kreis mit einem Durchmesser von 192 dp.

Wenn die volle Größe eines Bildes 300 × 300 dp beträgt, muss das Symbol innerhalb eines Kreises mit einem Durchmesser von 200 dp. Alles außerhalb des Kreises dreht sich unsichtbar (maskiert).

</ph> <ph type="x-smartling-placeholder">

Animationen auf dem Ladebildschirm und Startsequenz

Zusätzliche Latenz ist häufig mit dem Starten einer App bei einem Kaltstart verbunden. Das Hinzufügen eines animierten Symbols zu Ihrem Ladebildschirm wirkt ästhetisch ansprechender und bieten eine höhere Nutzerfreundlichkeit. Nutzerstudien zeigen, dass wahrgenommene Start-ups bei der Wiedergabe von Animationen.

Eine Ladebildschirmanimation ist in die Startsequenzkomponenten eingebettet, wie in Abbildung 4 dargestellt.

</ph> <ph type="x-smartling-placeholder">

1. Animation starten: Diese besteht aus der Systemansicht zum Ladebildschirm. Es wird vom System gesteuert und ist nicht anpassbar.

2. Ladebildschirm (erscheint im Abschnitt „Warten“ der Sequenz): der Begrüßungsbildschirm kann angepasst werden, sodass Sie Ihre eigene Logoanimation und Branding. Es muss den Anforderungen entsprechen. die auf dieser Seite beschrieben wurden.

3. Animation beenden: Hierbei handelt es sich um die Animation, durch die der Ladebildschirm ausgeblendet wird. Wenn du es anpassen möchtest, verwende das SplashScreenView und die zugehörigen . Sie können jede beliebige Animation darauf ausführen und die Einstellungen Deckkraft und Farbe. Entfernen Sie in diesem Fall den Ladebildschirm manuell, die Animation abgeschlossen ist.

Beim Starten der Symbolanimation haben Sie beim Start der App die Möglichkeit, die wenn die App früher bereit ist. Die App löst onResume() aus oder der Ladebildschirm automatisch abgeschaltet wird, achten Sie also darauf, dass die Bewegung ganz bequem übersprungen. Der Ladebildschirm darf nur mit onResume() geschlossen werden wenn die App optisch stabil ist, sodass keine zusätzlichen Kreisel erforderlich. Eine unvollständige Benutzeroberfläche kann für Nutzende verwirrend sein einen Eindruck von Unvorhersehbarkeit oder Manipulation zu vermitteln.

Anforderungen an Animationen auf dem Ladebildschirm

Der Ladebildschirm muss die folgenden Spezifikationen erfüllen:

• Legen Sie eine Hintergrundfarbe für ein einzelnes Fenster ohne Transparenz fest. Tag und Nacht werden vom Typ SplashScreen-kompatible Bibliothek.

• Achten Sie darauf, dass das animierte Symbol die folgenden Spezifikationen erfüllt:

  • Format:Das Symbol muss ein Animierte VektorDrawable (AVD) XML.
  • Abmessungen:Ein AVD-Symbol muss viermal so groß wie ein adaptives Symbol sein. wie folgt an: <ph type="x-smartling-placeholder">
    </ph>
    • Der Symbolbereich muss 432 dp groß sein, also viermal so viele 108 dp-Bereich eines nicht maskierten adaptiven Symbols.
    • Die inneren zwei Drittel des Bildes sind auf dem Launcher-Symbol sichtbar, und muss 288 dp betragen, also viermal so viele macht den inneren maskierten Bereich eines adaptiven Symbols aus.
  • Dauer:Wir empfehlen,auf Smartphones 1.000 ms nicht zu überschreiten. Sie können verzögerten Start, dieser darf jedoch nicht länger als 166 ms sein. Wenn die App länger als 1.000 ms ist, sollten Sie eine Animationsschleife verwenden.

• Legen Sie einen geeigneten Zeitpunkt fest, um den Ladebildschirm zu schließen. wird der erste Frame Ihrer App gezeichnet. Sie können dies wie beschrieben im Abschnitt über den Ladebildschirm über einen längeren Zeitraum angezeigt werden lassen.

Ressourcen für den Ladebildschirm

Laden Sie die Beispiel-Starterkit Dort wird gezeigt, wie Animationen erstellt, formatiert und in eine AVD exportiert werden. Sie umfasst Folgendes:

• Adobe After Effects-Projektdatei der Animation.
• Finale exportierte AVD-XML-Datei.
• Beispiel-GIF der Animation.

Wenn Sie diese Dateien herunterladen, stimmen Sie Folgendem zu: Google-Nutzungsbedingungen:

In der Datenschutzerklärung von Google wird beschrieben, Daten verarbeitet werden.

Ladebildschirm in deiner App anpassen

Standardmäßig verwendet SplashScreen den windowBackground Ihres Designs, wenn windowBackground ist einfarbig. Zum Anpassen des Ladebildschirms fügen Sie zum App-Design hinzufügen.

Sie haben folgende Möglichkeiten, den Ladebildschirm Ihrer App anzupassen:

• Sie können Designattribute festlegen, um deren Darstellung zu ändern.

• Lass es für einen längeren Zeitraum sichtbar.

• Passen Sie die Animation für das Schließen des Ladebildschirms an.

Erste Schritte

Die SplashScreen-Hauptbibliothek bringt den Android 12-Ladebildschirm für alle API 23 an. Fügen Sie das folgende Snippet Ihre build.gradle-Datei:

dependencies {
    implementation "androidx.core:core-splashscreen:1.0.0"
}

dependencies {
    implementation("androidx.core:core-splashscreen:1.0.0")
}

Design für den Ladebildschirm festlegen, um dessen Darstellung zu ändern

Sie können zum Anpassen die folgenden Attribute in Ihrem Activity-Design angeben Ladebildschirms für Ihre App ein. Wenn Sie bereits einen alten Ladebildschirm haben bei der Attribute wie android:windowBackground verwendet werden, Eine alternative Ressourcendatei für Android 12 und höher wird bereitgestellt.

1. Verwenden Sie windowSplashScreenBackground um den Hintergrund mit einer bestimmten Farbe zu füllen:

   <item name="android:windowSplashScreenBackground">@color/...</item>
   

2. Verwenden Sie windowSplashScreenAnimatedIcon um das Symbol in der Mitte des Startfensters zu ersetzen.

   Gehen Sie für Apps, die nur auf Android 12 (API-Level 32) ausgerichtet sind, so vor:

   Ist das Objekt animierbar und durch AnimationDrawable und AnimatedVectorDrawable, windowSplashScreenAnimationDuration festlegen auf um die Animation abzuspielen, während das Startfenster zu sehen ist. Dies ist nicht erforderlich da die Dauer direkt vom AnimatedVectorDrawable

   <item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>
   

3. Verwenden Sie windowSplashScreenAnimationDuration um die Dauer der Animation des Ladebildschirms anzugeben. Festlegen hat keinen Einfluss auf die tatsächliche Dauer des Ladebildschirms. angezeigt, aber Sie können sie beim Anpassen des Begrüßungsbildschirm-Exits abrufen. Animation mit SplashScreenView.getIconAnimationDuration Im folgenden Abschnitt finden Sie den Ladebildschirm länger auf dem Bildschirm zu sehen, .

   <item name="android:windowSplashScreenAnimationDuration">1000</item>
   

4. windowSplashScreenIconBackgroundColor verwenden , um einen Hintergrund für das Ladebildschirmsymbol festzulegen. Dies ist nützlich, wenn Der Kontrast zwischen dem Fensterhintergrund und dem Symbol reicht nicht aus.

   <item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>
   

5. Sie können windowSplashScreenBrandingImage um ein Bild unten auf dem Ladebildschirm anzuzeigen. Die in den Designrichtlinien wird davon abgeraten, ein Markenbild zu verwenden.

   <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>
   

6. Sie können windowSplashScreenBehavior festlegen, ob das Symbol in Ihrer App immer auf dem Ladebildschirm Android 13 oder höher. Der Standardwert ist 0, d. h., das Symbol wird auf Der Ladebildschirm, wenn die Startaktivität den splashScreenStyle auf SPLASH_SCREEN_STYLE_ICON, oder dem Systemverhalten folgt, wenn bei der Startaktivität keine . Wenn Sie nie einen leeren Ladebildschirm anzeigen möchten, das animierte Symbol, das angezeigt werden soll, auf den Wert icon_preferred.

   <item name="android:windowSplashScreenBehavior">icon_preferred</item>
   

Ladebildschirm über einen längeren Zeitraum anzeigen lassen

Der Ladebildschirm wird geschlossen, sobald Ihre App den ersten Frame gezeichnet hat. Wenn Sie eine geringe Datenmenge laden müssen, z. B. das Laden von In-App-Einstellungen von einem asynchron lokale Laufwerke speichern, können Sie ViewTreeObserver.OnPreDrawListener um die App anzuhalten und ihren ersten Frame zu zeichnen.

Wenn Ihre Startaktivität beendet ist, bevor Sie gezeichnet haben, beispielsweise Inhaltsansicht festlegen und vor dem onResume (Pre-Draw) abgeschlossen werden Listener wird nicht benötigt.

// Create a new event for the activity.
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // Set the layout for the content view.
    setContentView(R.layout.main_activity)

    // Set up an OnPreDrawListener to the root view.
    val content: View = findViewById(android.R.id.content)
    content.viewTreeObserver.addOnPreDrawListener(
        object : ViewTreeObserver.OnPreDrawListener {
            override fun onPreDraw(): Boolean {
                // Check whether the initial data is ready.
                return if (viewModel.isReady) {
                    // The content is ready. Start drawing.
                    content.viewTreeObserver.removeOnPreDrawListener(this)
                    true
                } else {
                    // The content isn't ready. Suspend.
                    false
                }
            }
        }
    )
}

// Create a new event for the activity.
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Set the layout for the content view.
    setContentView(R.layout.main_activity);

    // Set up an OnPreDrawListener to the root view.
    final View content = findViewById(android.R.id.content);
    content.getViewTreeObserver().addOnPreDrawListener(
            new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    // Check whether the initial data is ready.
                    if (mViewModel.isReady()) {
                        // The content is ready. Start drawing.
                        content.getViewTreeObserver().removeOnPreDrawListener(this);
                        return true;
                    } else {
                        // The content isn't ready. Suspend.
                        return false;
                    }
                }
            });
}

Animation zum Schließen des Ladebildschirms anpassen

Sie können die Animation des Ladebildschirms weiter anpassen, indem Sie Activity.getSplashScreen()

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    splashScreen.setOnExitAnimationListener { splashScreenView ->
        // Create your custom animation.
        val slideUp = ObjectAnimator.ofFloat(
            splashScreenView,
            View.TRANSLATION_Y,
            0f,
            -splashScreenView.height.toFloat()
        )
        slideUp.interpolator = AnticipateInterpolator()
        slideUp.duration = 200L

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.doOnEnd { splashScreenView.remove() }

        // Run your animation.
        slideUp.start()
    }
}

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    getSplashScreen().setOnExitAnimationListener(splashScreenView -> {
        final ObjectAnimator slideUp = ObjectAnimator.ofFloat(
                splashScreenView,
                View.TRANSLATION_Y,
                0f,
                -splashScreenView.getHeight()
        );
        slideUp.setInterpolator(new AnticipateInterpolator());
        slideUp.setDuration(200L);

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                splashScreenView.remove();
            }
        });

        // Run your animation.
        slideUp.start();
    });
}

Zu Beginn dieses Callbacks ist das Ereignis animiertes Vektor-Drawable auf dem Ladebildschirm beginnt. Je nach Dauer des App-Starts oder Drawable-Elementen in der Mitte der Animation sein. Verwenden Sie SplashScreenView.getIconAnimationStart wann die Animation gestartet wurde. Sie können die verbleibende Dauer berechnen, Symbolanimation:

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenView.iconAnimationDuration
// Get the start time of the animation.
val animationStart = splashScreenView.iconAnimationStart
// Calculate the remaining duration of the animation.
val remainingDuration = if (animationDuration != null && animationStart != null) {
    (animationDuration - Duration.between(animationStart, Instant.now()))
        .toMillis()
        .coerceAtLeast(0L)
} else {
    0L
}

// Get the duration of the animated vector drawable.
Duration animationDuration = splashScreenView.getIconAnimationDuration();
// Get the start time of the animation.
Instant animationStart = splashScreenView.getIconAnimationStart();
// Calculate the remaining duration of the animation.
long remainingDuration;
if (animationDuration != null && animationStart != null) {
    remainingDuration = animationDuration.minus(
            Duration.between(animationStart, Instant.now())
    ).toMillis();
    remainingDuration = Math.max(remainingDuration, 0L);
} else {
    remainingDuration = 0L;
}

Weitere Informationen

• Migrieren Sie Ihre bestehende Implementierung des Ladebildschirms zu Android 12 und höher
• Jetzt in der Android-App eine reale Implementierung eines Ladebildschirms,