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.

Video 1 : Animationen für die Vorhersage von Zurück-Gesten

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

Sie können auch ein Upgrade Ihrer Material-Komponentenabhängigkeit auf Version 1.10.0 von MDC Android durchführen, um Animationen für Material-Komponenten wie die folgenden zu erhalten:

Weitere Informationen finden Sie in der Entwicklerleitlinie für Material-Komponenten auf GitHub.

Das Video zeigt ein kurzes Beispiel für intelligente „Zurück“-Geste-Animationen für den Wechsel zwischen Aktivitäten und den Startbildschirm in den Android-Einstellungen.

  1. In der Animation wischt der Nutzer zurück, um zum vorherigen Einstellungsbildschirm zurückzukehren. Das ist ein Beispiel für eine aktivitätsübergreifende Animation.
  2. Auf dem vorherigen Bildschirm wischt der Nutzer ein zweites Mal zurück und sieht eine Vorschau des Startbildschirms mit dem Hintergrundbild – ein Beispiel für die Animation „Zurück zum Startbildschirm“.
  3. Der Nutzer wischt weiter nach rechts. Es wird eine Animation angezeigt, in der das Fenster auf das Symbol auf dem Startbildschirm verkleinert wird.
  4. Der Nutzer ist nun vollständig zum Startbildschirm zurückgekehrt.

Weitere Informationen zum Hinzufügen von Unterstützung für vorhersagende Zurück-Gesten

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 vorhersagbaren 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 Vorhersage-Zurück-Vorgang verwenden, um benutzerdefinierte Animationen für die Vorhersage-Zurück-Geste in Ihrer App zu entwickeln. Progress-APIs sind hilfreich, um Ansichten zu animieren, haben aber Einschränkungen beim Animieren 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 zurückwischt. Verwenden Sie diese Methoden, wenn Sie mehr als die vom System bereitgestellten Standardanimationen oder die Animationen von Material-Komponenten anpassen müssen.

Wir gehen davon aus, dass die meisten Apps die abwärtskompatiblen AndroidX-APIs verwenden. Es gibt aber auch ähnliche Plattform-APIs innerhalb der OnBackAnimationCallback-Schnittstelle, die in 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 Vorhersage-Zurück-Übergänge zu erstellen.

  1. Verwenden Sie TransitionManager#controlDelayedTransition anstelle von beginDelayedTransition, um Übergänge abzuspielen, wenn der Nutzer zurückwischt.
  2. Erstellen Sie den Übergang in handleOnBackStarted.
  3. Spiele den Übergang mit dem Back-Ereignis innerhalb von handleOnBackProgressed ab, indem du currentFraction mit BackEvent.progress in Beziehung setzt. So wird sichtbar, wie weit der Nutzer zurückgewischt hat.
  4. Schließen Sie den Übergang ab, nachdem der Nutzer die Zurück-Geste in handleOnBackPressed ausgeführt hat.
  5. Setzen Sie zum Schluss den Status des Übergangs in handleOnBackCancelled zurück.

Im folgenden Video, Kotlin-Code und XML wird ein benutzerdefinierter Übergang zwischen zwei mit OnBackPressedCallback implementierten Feldern demonstriert:

    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 Übergangsanimation die Funktion „Vorhersagende Zurück-Geste“ unterstützt.
  • Überschreiben Sie isSeekingSupported, um für Ihre benutzerdefinierten Übergänge „true“ zurückzugeben.
  • Erstellen Sie einen Controller pro Animation.
  • Die Übergänge für die Funktion „Zurück mit Vorhersage“ werden mit AndroidX-Übergängen unterstützt, nicht aber mit Framework-Übergängen. Stellen Sie die Framework-Übergänge auf Animator- und AndroidX-Übergänge um.
  • Die Vorhersage für die Zurück-Geste wird auf Geräten mit Android 14 und höher unterstützt und ist nicht abwärtskompatibel.
  • Mit XML-Szenen erstellte Übergänge werden ebenfalls unterstützt. Legen Sie in handleOnBackStarted TransitionSeekController auf das Ergebnis von TransitionManager.createSeekController anstelle des Ergebnisses von controlDelayedTransition fest.

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

Damit benutzerdefinierte Aktivitätsübergänge unter Android 14 und höher die Funktion „Vorhersagbarer Zurück-Vorgang“ unterstützen, können Sie overrideActivityTransition anstelle von overridePendingTransition verwenden. Das bedeutet, dass die Übergangsanimation abgespielt wird, wenn der Nutzer zurückwischt.

Zur Veranschaulichung stellen Sie sich ein Szenario vor, in dem sich Aktivität B im Backstack über Aktivität A befindet. So gehen Sie mit benutzerdefinierten Activity-Animationen um:

  • Rufen Sie entweder Öffnungs- oder Schließübergänge in der Methode onCreate von Aktivität B auf.
  • Wenn der Nutzer zu Aktivität B navigiert, verwenden Sie OVERRIDE_TRANSITION_OPEN. Wenn der Nutzer wischt, um zur Aktivität A zurückzukehren, verwenden Sie OVERRIDE_TRANSITION_CLOSE.
  • Wenn Sie OVERRIDE_TRANSITION_CLOSE angeben, ist enterAnim die Eingangsanimation von Aktivität A und exitAnim die Ausgangsanimation von Aktivität B.

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

Bei der Implementierung der intelligenten „Zurück“-Geste mit Fragmenten gibt es zwei Ansätze.

Bestehende APIs verwenden

Wir empfehlen, vorhandene APIs zu verwenden. Mit diesen APIs können Sie durch Wischen vom Bildschirmrand aus Ihre Animator- oder Androidx-Übergänge mit der Geste bearbeiten. Ob die Geste über einen Schwellenwert hinaus bewegt wird, bestimmt, ob sie abgeschlossen wird und Sie zum vorherigen Fragment zurückkehren oder ob sie abgebrochen wird und Sie im aktuellen Fragment bleiben. Weitere Informationen finden Sie unter Mit Animationen zwischen Fragmenten wechseln.

Berücksichtigen Sie die folgenden Faktoren:

  • Importieren Sie Transitions 1.5.0 oder höher und Fragments 1.7.0 oder höher. Ein Großteil der Unterstützung für die Vorhersage der Zurück-Geste in Fragmenten basiert darauf, dass Übergänge Animationen suchen können. Das ist erst ab Transitions 1.5.0 möglich.
  • Verwenden Sie Fragmente mit FragmentManager oder der Navigation Component, um den Backstack zu verwalten. Die Funktion „Vorhersageweise zurück“ wird nicht unterstützt, wenn Sie Ihren eigenen Backstack verwalten. Migrieren Sie von Backstacks, die FragmentManager nicht kennt.
  • Einige Bibliotheken unterstützen die Funktion „Vorhersagende Zurück-Geste“. Sehen Sie in der Dokumentation nach, um sicherzugehen.
  • Die Animator-Klasse und die AndroidX Transition-Bibliothek werden unterstützt.
  • Die Animation-Klasse und die Transition-Bibliothek des Frameworks werden nicht unterstützt.
  • Vorhersageanimationen funktionieren nur auf Geräten mit Android 14 oder höher.

Verwenden Sie vorhersagende Backcross-Fragmente in den folgenden Situationen:

Einige Material-Bewegungen unterstützen die Vorhersage von Zurück-Gesten ab 1.12.02-alpha02 oder höher, einschließlich MaterialFadeThrough, MaterialSharedAxis und MaterialFade. Hinweis: MaterialContainerTransform unterstützt keine Vorhersage für die Zurück-Geste.

Callbacks verwenden

Sie können mit Callbacks einen fragmentübergreifenden Übergang erstellen. Bei der Verwendung von Callbacks gibt es jedoch eine bekannte Einschränkung: Nutzer können das vorherige Fragment nicht sehen, wenn sie zurückwischen. So erstellen Sie einen fragmentübergreifenden Übergang für freigegebene Elemente, der den Designrichtlinien für die vorausschauende Zurück-Geste entspricht:

Erstellen Sie einen OnBackPressedCallback. Skaliere und verschiebe das Fragment in handleOnBackProgressed. Entferne dann das oberste Element vom Backstack. Führen Sie als Nächstes den Übergang des freigegebenen Elements mit setSharedElementReturnTransition außerhalb des Callbacks aus.

Weitere Informationen finden Sie im Codebeispiel auf GitHub.

Voraussetzungen

In der folgenden Tabelle sehen Sie, was durch targetSdkVersion und compileSdkVersion, Geräteversion, Abhängigkeiten, Manifest-Flags und Fragment-Flags gesteuert wird. In dieser Tabelle werden die Codeanforderungen beschrieben.

Kategorie Animation compileSdk targetSdk Geräteversion android:enableOnBackInvokedCallback Abhängigkeit
Systemanimationen Zurück zur Startseite 33 Gibt es 35 RICHTIG Keine
Aktivitätsübergreifend 34 Gibt es 35 RICHTIG Keine
Aufgabenübergreifend 34 Gibt es 35 RICHTIG Keine
Plattform Benutzerdefinierte Cross-Activity 34 Gibt es 35 RICHTIG Keine
Progress API Platform 34 Gibt es 34 RICHTIG Keine
Materialkomponenten Ansicht am unteren Rand 34 Gibt es 34 RICHTIG Materialkomponente 1.10.0
Seitenblatt 34 Gibt es 34 RICHTIG Materialkomponente 1.10.0
Navigationsleiste 34 Gibt es 34 RICHTIG Materialkomponente 1.10.0
Suchen 34 Gibt es 34 RICHTIG Materialkomponente 1.10.0
Jetpack Animations Benutzerdefinierte AndroidX-Fragmentübergänge 34 Gibt es 34 RICHTIG AndroidX Fragment 1.7
Benutzerdefinierte AndroidX-Übergänge 34 Gibt es 34 RICHTIG AndroidX Transition 1.5
Progress API Jetpack 34 Gibt es 34 RICHTIG AndroidX Activity 1.8

Zusätzliche Ressourcen