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:
Das System zeigt den Ladebildschirm mit Designs und Animationen an, definieren.
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 type="x-smartling-placeholder">![Ein Bild, das die Elemente auf einem Begrüßungsbildschirm zeigt](https://developer.android.com/static/images/guide/topics/ui/splash-screen/splash-screen-composition.png?authuser=0000&hl=de)
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 type="x-smartling-placeholder">![Ein Bild mit unterschiedlichen Symbolabmessungen für einen einfarbigen und transparenten Hintergrund](https://developer.android.com/static/images/guide/topics/ui/splash-screen/splash-screen-icon-dimensions.png?authuser=0000&hl=de)
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 type="x-smartling-placeholder">![Ein Bild, das die Startreihenfolge in zwölf aufeinanderfolgenden Frames zeigt, beginnend mit dem Tippen auf das Launcher-Symbol, das beim Vergrößern den Bildschirm füllt](https://developer.android.com/static/images/ui/splash-sequence.png?authuser=0000&hl=de)
Animation starten: Diese besteht aus der Systemansicht zum Ladebildschirm. Es wird vom System gesteuert und ist nicht anpassbar.
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.
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
<ph type="x-smartling-placeholder">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:
Cool
dependencies { implementation "androidx.core:core-splashscreen:1.0.0" }
Kotlin
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.
Verwenden Sie
windowSplashScreenBackground
um den Hintergrund mit einer bestimmten Farbe zu füllen:<item name="android:windowSplashScreenBackground">@color/...</item>
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
undAnimatedVectorDrawable
,windowSplashScreenAnimationDuration
festlegen auf um die Animation abzuspielen, während das Startfenster zu sehen ist. Dies ist nicht erforderlich da die Dauer direkt vomAnimatedVectorDrawable
<item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>
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 mitSplashScreenView.getIconAnimationDuration
Im folgenden Abschnitt finden Sie den Ladebildschirm länger auf dem Bildschirm zu sehen, .<item name="android:windowSplashScreenAnimationDuration">1000</item>
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>
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>
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 densplashScreenStyle
aufSPLASH_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 Werticon_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.
Kotlin
// 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 } } } ) }
Java
// 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()
Kotlin
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() } }
Java
@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:
Kotlin
// 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 }
Java
// 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,