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

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

Nachdem Sie die Funktion aktiviert haben, werden in Ihrer App Animationen für den Wechsel zum Startbildschirm, zwischen Aktivitäten und zwischen Aufgaben angezeigt.

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:

• Tabellenunterseite
• Seitenleisten
• 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 „Zurück“-Animationen für den Wechsel zwischen Aktivitäten und den Startbildschirm in der Android-Einstellungs-App.

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 In-App-Property-Animationen und ‑Übergänge, benutzerdefinierte aktivitätsübergreifende Animationen und benutzerdefinierte fragmentübergreifende Animationen mit vorausschauenden Rückwärtsgesten erstellen.

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

Mit AndroidX Activity 1.8.0-alpha01 oder höher können Sie die APIs für den Fortschritt der Vorhersage der Rückwärtsgeste verwenden, um benutzerdefinierte Animationen für die Vorhersage der Rückwärtsgeste in Ihrer App zu entwickeln. Fortschritts-APIs sind hilfreich, um Ansichten zu animieren, haben aber Einschränkungen bei der Animation von Übergängen zwischen Fragmenten. In OnBackPressedCallback haben wir die Methoden handleOnBackProgressed, handleOnBackCancelled und handleOnBackStarted eingeführt, um Objekte zu animieren, während der Nutzer wischt. 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 jedoch auch ähnliche Plattform-APIs in der OnBackAnimationCallback-Benutzeroberfläche, die in der Android 14 Developer Preview 1 und höher getestet werden können.

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 Vorhersagebasierte Zurück-Übergänge zu erstellen.

1. Verwenden Sie TransitionManager#controlDelayedTransition anstelle von beginDelayedTransition, um Übergänge abzuspielen, wenn der Nutzer wischt.
2. Erstellen Sie die Umstellung innerhalb von handleOnBackStarted.
3. Spielen Sie den Übergang mit dem Zurück-Ereignis innerhalb von handleOnBackProgressed ab, indem Sie currentFraction mit BackEvent.progress verknüpfen. Dadurch wird angezeigt, wie weit der Nutzer nach links gewischt hat.
4. Schließen Sie die Umstellung ab, nachdem der Nutzer die Zurück-Geste in handleOnBackPressed ausgeführt hat.
5. Setzen Sie zum Schluss den Übergangsstatus in handleOnBackCancelled zurück.

Im folgenden Video, im Kotlin-Code und in der XML-Datei wird eine benutzerdefinierte Überblendung zwischen zwei Boxen gezeigt, die mit OnBackPressedCallback implementiert wurde:

    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 der Funktion „Vorhersage für Rückwärtsübergänge“ Folgendes:

• Verwenden Sie isSeekingSupported, um zu prüfen, ob die Umstellung die Funktion „Predictive Back“ unterstützt.
• Überschreiben Sie isSeekingSupported, um für Ihre benutzerdefinierten Übergänge „wahr“ zurückzugeben.
• Erstellen Sie einen Controller pro Animation.
• Vorhersagende Zurück-Übergänge werden von AndroidX-Übergängen unterstützt, aber nicht von Framework-Übergängen. Migrieren Sie von Framework-Übergängen zu Animator- und AndroidX-Übergängen.
• Vorhersagende Rückwärtsübergänge werden auf Geräten mit Android 14 und höher unterstützt und sind nicht abwärtskompatibel.
• Auch mit XML-Szenen erstellte Übergänge werden 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 die Vorhersagefunktion für die Schaltfläche „Zurück“ unter Android 14 und höher unterstützen, können Sie overrideActivityTransition anstelle von overridePendingTransition verwenden. Das bedeutet, dass die Übergangsanimation abgespielt wird, wenn der Nutzer wischt.

Stellen Sie sich als Beispiel ein Szenario vor, in dem Aktivität B über Aktivität A im Back-Stack liegt. So verwalten Sie benutzerdefinierte Aktivitätsanimationen:

• Rufen Sie in der Methode onCreate von Aktivität B entweder den Beginn- oder den Endübergang 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.

• Wenn Sie OVERRIDE_TRANSITION_CLOSE angeben, ist enterAnim die Eintrittsanimation für Aktivität A und exitAnim die Ausstiegsanimation für Aktivität B.

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

Es gibt zwei Ansätze für die Implementierung von „Vorheriger Schritt“ mit Fragmenten.

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. Ob die Geste über einen Grenzwert hinausgeht, bestimmt, ob sie abgeschlossen wird und Sie zum vorherigen Fragment zurückkehren oder ob sie abgebrochen wird und Sie beim aktuellen Fragment bleiben. Weitere Informationen finden Sie unter Mithilfe von Animationen zwischen Fragmenten wechseln.

Beachten Sie die folgenden Faktoren:

• Importiere Übergänge 1.5.0 oder höher und Fragmente 1.7.0 oder höher. Die Unterstützung der Vorhersage der Rücksprünge innerhalb von Fragmenten hängt weitgehend davon ab, dass Transitions Animationen suchen können. Das ist nur mit Transitions 1.5.0 oder höher möglich.
• Verwenden Sie Fragmente mit FragmentManager oder der Navigationskomponente, um den Backstack zu verwalten. Predictive Back wird nicht unterstützt, wenn Sie Ihren eigenen Back-Stack verwalten. Migrieren Sie von Backstacks, die FragmentManager nicht kennt.
• Einige Bibliotheken unterstützen die Funktion „Vorherige Seite“. Sehen Sie in der Dokumentation nach.
• Die Klasse Animator und die Bibliothek AndroidX Transition werden unterstützt.
• Die Animation-Klasse und die Transition-Bibliothek des Frameworks werden nicht unterstützt.
• Vorhersagende Animationen funktionieren nur auf Geräten mit Android 14 oder höher.

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

• Die Navigationskomponente animieren
• Animieren Sie mit setCustomAnimations.
• Mit setEnterTransition, setExitTransition, setReenterTransition und setReturnTransition können Sie Ein- und Ausblendungsübergänge animieren.
• Animieren Sie Übergänge für freigegebene Elemente mit setSharedElementEnterTransition und setSharedElementReturnTransition.

Einige Material Motions unterstützen die Vorhersage der Rückgabe ab 1.12.02-alpha02 oder höher, darunter MaterialFadeThrough, MaterialSharedAxis und MaterialFade. Hinweis: MaterialContainerTransform unterstützt keine Vorschau.

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 fragmentübergreifenden Übergang mit freigegebenen Elementen, der den Designrichtlinien für die vorausschauende Suche entspricht:

Erstellen Sie eine OnBackPressedCallback. Skalieren und verschieben Sie das Fragment in handleOnBackProgressed. und dann aus dem hinteren Stapel herausspringen. Führe als Nächstes die Übergabe des freigegebenen Elements mit setSharedElementReturnTransition außerhalb des Callbacks aus.

Weitere Informationen finden Sie im Code-Beispiel auf GitHub.

Voraussetzungen

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

Zusätzliche Ressourcen

• Codebeispiele für die Funktion „Vorherige Seite“
• Grundlagen zu Systemback-Video
• Die Zukunft von Android-Videos gestalten