Unterstützung für vorausschauende Zurück-Animationen hinzufügen

Wenn Sie die Systemback-APIs verwenden, können Sie In-App-Animationen aktivieren und benutzerdefinierte Übergänge unterstützen.

Video: Vorhersagbare Rückenanimationen

Nach der Aktivierung zeigt Ihre App Animationen für den Rücken zu Hause, für verschiedene Aktivitäten und für aufgabenübergreifende Aktivitäten an.

Sie können Ihre Abhängigkeit von Material-Komponenten auch auf Version 1.10.0 von MDC Android aktualisieren, um Animationen zu Material-Komponenten wie die folgenden zu erhalten:

• Tabellenblätter unten
• Seitenblätter
• Suche

Weitere Informationen finden Sie in der Entwicklerhilfe für Materialkomponenten auf GitHub (in englischer Sprache).

Das Video zeigt ein kurzes Beispiel für vorausschauende Rückwärtsanimationen für Cross-Aktivität und den Rücken zu Hause in der Android-App „Einstellungen“.

1. In der Animation wischt der Nutzer zurück, um zum vorherigen Bildschirm mit den Einstellungen zurückzukehren – ein Beispiel für eine aktivitätsübergreifende Animation.
2. Auf dem vorherigen Bildschirm wischt der Nutzer ein zweites Mal zurück und zeigt eine Vorschau des Startbildschirms mit dem Hintergrund an – ein Beispiel für die Zurück-zu-Startseite-Animation.
3. Der Nutzer wischt weiter nach rechts und zeigt eine Animation des Fensters, das zum Symbol auf dem Startbildschirm verkleinert wird.
4. Der Nutzer ist jetzt vollständig zum Startbildschirm zurückgekehrt.

Weitere Informationen

Benutzerdefinierte In-App-Übergänge und -Animationen hinzufügen

Sie können benutzerdefinierte Animationen und Übergänge für In-App-Properties, benutzerdefinierte aktivitätsübergreifende Animationen und benutzerdefinierte fragmentierte Animationen mit automatischen Touch-Gesten erstellen.

Benutzerdefinierte Übergänge mit der Progress API hinzufügen

Mit AndroidX Activity 1.8.0-alpha01 oder höher können Sie die Predictive Back Progress APIs verwenden, um benutzerdefinierte Animationen für die vorausschauende Zurück-Touch-Geste in Ihrer App zu entwickeln. Progress APIs sind bei der Animation von Ansichten hilfreich, haben aber bei der Animation von Übergängen zwischen Fragmenten Einschränkungen. In OnBackPressedCallback haben wir die Methoden handleOnBackProgressed, handleOnBackCancelled und handleOnBackStarted eingeführt, um Objekte zu animieren, während der Nutzer zurückwischt. Verwende diese Methoden, wenn du mehr als die vom System bereitgestellten Standardanimationen oder die Animationen der Material Component anpassen möchtest.

Wir gehen davon aus, dass die meisten Apps die abwärtskompatiblen AndroidX APIs verwenden. Es gibt aber auch ähnliche Plattform-APIs innerhalb der OnBackAnimationCallback-Oberfläche, die in Android 14-Entwicklervorschau 1 und höher getestet werden können.

Hinweis :Hier erfahren Sie, wie Sie benutzerdefinierte In-App-Übergänge und -Animationen entwerfen.

Progress APIs mit AndroidX Transitions verwenden

Die Progress APIs können mit AndroidX Transitions 1.5.0-alpha01 oder höher unter Android 14 und höher verwendet werden, um Predictive Back-Übergänge zu erstellen.

1. Verwende TransitionManager#controlDelayedTransition anstelle von beginDelayedTransition, um Übergänge abzuspielen, wenn der Nutzer zurückwischt.
2. Erstellen Sie den Übergang innerhalb von handleOnBackStarted.
3. Spielen Sie den Übergang mit dem Ereignis „Zurück“ in handleOnBackProgressed ab, indem Sie currentFraction mit BackEvent.progress in Beziehung setzen. Dadurch wird angezeigt, wie weit der Nutzer zurückgewischt hat.
4. Schließen Sie den Übergang ab, nachdem der Nutzer die Zurück-Geste in handleOnBackPressed per Commit bestätigt hat.
5. Setzen Sie zum Schluss den Übergangsstatus in handleOnBackCancelled zurück.

Das folgende Video, der Kotlin-Code und die XML-Datei zeigen einen benutzerdefinierten Übergang zwischen zwei mit OnBackPressedCallback implementierten Feldern:

    class MyFragment : Fragment() {

    val transitionSet = TransitionSet().apply {
        addTransition(Fade(Fade.MODE_OUT))
        addTransition(ChangeBounds())
        addTransition(Fade(Fade.MODE_IN))
    }
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val callback = object : OnBackPressedCallback(enabled = false) {

            var controller: TransitionSeekController? = null

            @RequiresApi(34)
            override fun handleOnBackStarted(backEvent: BackEvent) {
                // Create the transition
                controller = TransitionManager.controlDelayedTransition(
                    binding.card,
                    transitionSet
                )
                changeTextVisibility(ShowText.SHORT)
            }

            @RequiresApi(34)
            override fun handleOnBackProgressed(backEvent: BackEvent) {
                // Play the transition as the user swipes back
                if (controller?.isReady == true) {
                    controller?.currentFraction = backEvent.progress
                }
            }

            override fun handleOnBackPressed() {
                // Finish playing the transition when the user commits back
                controller?.animateToEnd()
                this.isEnabled = false
            }

            @RequiresApi(34)
            override fun handleOnBackCancelled() {
                // If the user cancels the back gesture, reset the state
                transition(ShowText.LONG)
            }
        }

        binding.shortText.setOnClickListener {
            transition(ShowText.LONG)
            callback.isEnabled = true
        }

        this.requireActivity().onBackPressedDispatcher.addCallback(callback)
    }

    private fun transition(showText: ShowText) {
        TransitionManager.beginDelayedTransition(
            binding.card,
            transitionSet
        )
        changeTextVisibility(showText)
    }

    enum class ShowText { SHORT, LONG }
    private fun changeTextVisibility(showText: ShowText) {
        when (showText) {
            ShowText.SHORT -> {
                binding.shortText.isVisible = true
                binding.longText.isVisible = false
            }
            ShowText.LONG -> {
                binding.shortText.isVisible = false
                binding.longText.isVisible = true
            }
        }
    }
}
  

<?xml version="1.0" encoding="utf-8"?>
...
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...>

        <TextView
            android:id="@+id/short_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            ... />

        <TextView
            android:id="@+id/long_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            .../>

    </androidx.constraintlayout.widget.ConstraintLayout>

Beachten Sie bei der Arbeit mit Predictive Back-Übergängen Folgendes:

• Verwenden Sie isSeekingSupported, um zu prüfen, ob die Umstellung die Funktion „Predictive Back“ unterstützt.
• Überschreiben Sie isSeekingSupported, damit für Ihre benutzerdefinierten Übergänge "true" zurückgegeben wird.
• Erstellen Sie einen Controller pro Animation.
• Predictive Back-Übergänge werden bei AndroidX-Übergängen unterstützt, jedoch nicht bei Framework-Übergängen. Wir empfehlen eine Migration weg von Framework-Übergängen.
• Predictive Back-Übergänge werden auf Geräten mit Android 14 und höher unterstützt und sind nicht abwärtskompatibel.
• Mit XML-Szenen erstellte Übergänge werden ebenfalls unterstützt. Legen Sie in handleOnBackStarted für TransitionSeekController das Ergebnis von TransitionManager.createSeekController und nicht das Ergebnis von controlDelayedTransition fest.

Benutzerdefinierte Aktivitätsübergänge unter Android 14 und höher hinzufügen

Damit benutzerdefinierte Aktivitätsübergänge Predictive Back unter Android 14 und höher unterstützen, können Sie overrideActivityTransition anstelle von overridePendingTransition verwenden. Das bedeutet, dass die Übergangsanimation beim Zurückwischen wiedergegeben wird.

Stellen Sie sich als Beispiel ein Szenario vor, in dem Aktivität B über Aktivität A im Back-Stack liegt. Benutzerdefinierte Activity-Animationen würden Sie so verarbeiten:

• Rufe in der Methode onCreate von Aktivität B entweder öffnende oder schließende Übergänge auf.
• Wenn der Nutzer zu Aktivität B wechselt, verwende OVERRIDE_TRANSITION_OPEN. Wenn der Nutzer wischt, um zu Aktivität A zurückzukehren, verwende OVERRIDE_TRANSITION_CLOSE.

• Bei Angabe von OVERRIDE_TRANSITION_CLOSE ist enterAnim die Eingabeanimation von Aktivität A und exitAnim die Exit-Animation von Aktivität B.

  Hinweis: Wenn exitAnim nicht festgelegt oder auf 0 gesetzt ist, wird stattdessen die standardmäßige Vorhersageanimation für aktivitätsübergreifende Aktivitäten abgespielt, die im vorherigen Video gezeigt wurde.

Unterstützung für „Predictive Back mit Fragmenten“ hinzufügen

Für die Implementierung von Predictive Back mit Fragmenten gibt es zwei Ansätze.

Vorhandene APIs verwenden

Wir empfehlen, vorhandene APIs zu verwenden. Mit diesen APIs kannst du vom Rand des Bildschirms wischen, um die Übergänge von Animator oder Androidx mit der Touch-Geste zu beeinflussen. Unabhängig davon, ob Sie die Bewegung über einen Grenzwert hinaus bewegen, wird bestimmt, ob sie abgeschlossen ist und zum vorherigen Fragment zurückkehrt oder ob sie abgebrochen wird und Sie beim aktuellen Fragment bleiben. Weitere Informationen finden Sie unter Mit Animationen zwischen Fragmenten wechseln.

Beachten Sie die folgenden Faktoren:

• Importieren Sie Transitions 1.5.0 oder höher und Fragments 1.7.0 oder höher. Ein großer Teil der vorausschauenden Unterstützung von „Zurück“ innerhalb von Fragmenten beruht darauf, dass Übergänge Animationen suchen können. Dies ist erst ab Transitions 1.5.0 möglich.
• Verwenden Sie Fragmente mit FragmentManager oder der Navigationskomponente, um den Back Stack zu verarbeiten. Predictive Back wird nicht unterstützt, wenn Sie Ihren eigenen Back-Stack verwalten.
• Einige Bibliotheken unterstützen die Funktion „Predictive Back“. Sehen Sie in der Dokumentation nach.
• Die Klasse Animator und die Bibliothek AndroidX Transition werden unterstützt.
• Die Animation-Klasse und die Framework-Transition-Bibliothek werden nicht unterstützt.
• Voraussagende Animationen funktionieren nur auf Geräten mit Android 14 oder höher.

Verwenden Sie in den folgenden Situationen prädiktive Rückwärtsfragmente:

• Navigationskomponente animieren:
• Animieren Sie mit setCustomAnimations.
• Animieren Sie Einstiegs- und Ausstiegsübergänge mit setEnterTransition, setExitTransition, setReenterTransition und setReturnTransition.
• Animieren Sie Übergänge von gemeinsam genutzten Elementen mit setSharedElementEnterTransition und setSharedElementReturnTransition.

Einige Materialbewegungen unterstützen die Vorhersage ab 1.12.02-alpha02, einschließlich MaterialFadeThrough, MaterialSharedAxis und MaterialFade. Hinweis: MaterialContainerTransform unterstützt keine Vorschläge.

Callbacks verwenden

Sie können einen fragmentierten Übergang mithilfe von Callbacks erstellen. Dabei gibt es jedoch eine bekannte Einschränkung, wenn Nutzer das vorherige Fragment beim Zurückwischen nicht sehen können. So erstellen Sie einen fragmentierten Übergang mit gemeinsam genutzten Elementen, der dem Leitfaden für das vorausschauende Design entspricht:

Erstellen Sie ein OnBackPressedCallback. Skalieren und verschieben Sie das Fragment innerhalb von handleOnBackProgressed. Dann platzierst du sie aus dem Back Stack. Führen Sie als Nächstes den Wechsel des gemeinsamen Elements mithilfe von setSharedElementReturnTransition außerhalb des Callbacks aus.

Weitere Informationen finden Sie im Code-Beispiel auf GitHub.

Voraussetzungen

In den folgenden Tabellen sehen Sie, was von den Entwickleroptionen, targetSdkVersion und compileSdkVersion, der Geräteversion, Abhängigkeiten, Manifest-Flags und Fragment-Flags gesteuert wird. Die erste Tabelle bezieht sich auf Codeanforderungen.

Kategorie	Animation	CompileSdk	Ziel-SDK	android:enableOnBackInvokedCallback	Abhängigkeit
Systemanimationen	Zurück zur Startseite	33	Noch	RICHTIG	Keine
	Aktivitätenübergreifend	34	Noch	RICHTIG	Keine
	Aufgabenübergreifend	34	Noch	RICHTIG	Keine
Plattform	Benutzerdefinierte aktivitätsübergreifende Aktivitäten	34	Noch	RICHTIG	Keine
	Progress API-Plattform	34	Noch	RICHTIG	Keine
Materialkomponenten	Ansicht am unteren Rand	34	Noch	RICHTIG	Materialkomponente 1.10.0
	Seitenblatt	34	Noch	RICHTIG	Materialkomponente 1.10.0
	Navigationsleiste	34	Noch	RICHTIG	Materialkomponente 1.10.0
	Suche	34	Noch	RICHTIG	Materialkomponente 1.10.0
Jetpack-Animationen	Benutzerdefiniertes AndroidX-Cross-Fragment	34	Noch	RICHTIG	AndroidX Fragment 1.7
	Benutzerdefinierte AndroidX-Übergänge	34	Noch	RICHTIG	AndroidX Transition 1.5
	Progress API-Jetpack	34	Noch	RICHTIG	AndroidX Activity 1.8

In der folgenden Tabelle sind die Anforderungen aufgeführt, die Nutzern das Ansehen von Animationen ermöglichen.

Kategorie	Animation	Entwickleroption aktiviert	Geräteversion
Systemanimationen	Zurück zur Startseite	RICHTIG	33
	Aktivitätenübergreifend	RICHTIG	34
	Aufgabenübergreifend	RICHTIG	34
Plattform	Benutzerdefinierte aktivitätsübergreifende Aktivitäten	RICHTIG	34
	Progress API-Plattform	FALSCH	34
Materialkomponenten	Ansicht am unteren Rand	FALSCH	34
	Seitenblatt	FALSCH	34
	Navigationsleiste	FALSCH	34
	Suche	FALSCH	34
Jetpack-Animationen	Benutzerdefiniertes AndroidX-Cross-Fragment	FALSCH	34
	Benutzerdefinierte AndroidX-Übergänge	FALSCH	34
	Progress API-Jetpack	FALSCH	34

Zusätzliche Ressourcen

• Codebeispiele für Predictive Back
• Grundlagen zu Systemback-Video
• Video: Die Zukunft von Android entwickeln