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 : Predictive Back-Animationen

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 auch die Abhängigkeit von Material Components auf Version 1.10.0 von MDC für Android aktualisieren, um Material Components-Animationen wie die folgenden zu erhalten:

Weitere Informationen finden Sie in der Entwicklerleitfaden für Materialkomponenten auf GitHub.

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

  1. In der Animation wischt der Nutzer zurück, um zum vorherigen Einstellungsbildschirm zurückzukehren. Dies ist ein Beispiel für eine aktivitätsübergreifende Animation.
  2. Nun wischt der Nutzer auf dem vorherigen Bildschirm ein zweites Mal zurück. Daraufhin wird eine Vorschau des Startbildschirms mit dem Hintergrund angezeigt – ein Beispiel für die Animation zum Zurückkehren zum Startbildschirm.
  3. Der Nutzer wischt weiter nach rechts. Daraufhin wird eine Animation angezeigt, in der das Fenster auf das Symbol auf dem Startbildschirm schrumpft.
  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 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. Verwenden Sie diese Methoden, wenn Sie mehr als nur die vom System bereitgestellten Standardanimationen oder die Material-Komponenten-Animationen anpassen möchten.

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 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 die Umstellung ab, nachdem der Nutzer die Zurück-Geste in handleOnBackPressed ausgeführt hat.
  5. Setzen Sie abschließend den Status des Übergangs innerhalb von 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 Predictive Back-Übergängen Folgendes:

  • Mit isSeekingSupported können Sie prüfen, ob der Übergang die Funktion „Vorhersagendes Zurück“ 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 TransitionSeekController auf das Ergebnis von TransitionManager.createSeekController statt auf 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 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. So verwalten Sie benutzerdefinierte Aktivitätsanimationen:

  • 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, verwenden Sie 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 können Sie vom Rand des Displays wischen, um Ihre Animator- oder AndroidX-Übergänge mit der Geste zu bearbeiten. 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. Ein Großteil der vorausschauenden Unterstützung von „Zurück“ innerhalb von Fragmenten beruht darauf, dass Übergänge nach Animationen suchen können. Dies ist erst ab Transitions 1.5.0 möglich.
  • Verwenden Sie Fragmente mit FragmentManager oder der Navigationskomponente, um den Backstack zu verwalten. Die Vorhersagefunktion für die Schaltfläche „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 „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 vorausschauende Rückwärts-Cross-Fragmente in den folgenden Fällen:

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

Callbacks verwenden

Mithilfe von Callbacks können Sie einen fragmentübergreifenden Übergang erstellen. Es gibt jedoch eine bekannte Einschränkung bei der Verwendung von Callbacks: Wenn Nutzer zurückwischen, wird das vorherige Fragment nicht angezeigt. 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 Codebeispiel 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.

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 aktivitätsübergreifende Aktivitäten 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 Material Component 1.10.0
Navigationsleiste 34 Gibt es 34 RICHTIG Materialkomponente 1.10.0
Suchen 34 Gibt es 34 RICHTIG Materialkomponente 1.10.0
Jetpack-Animationen Benutzerdefiniertes AndroidX-Cross-Fragment 34 Gibt es 34 RICHTIG AndroidX Fragment 1.7
Benutzerdefinierte AndroidX-Übergänge 34 Gibt es 34 RICHTIG AndroidX-Übergang 1.5
Progress API Jetpack 34 Gibt es 34 RICHTIG AndroidX Activity 1.8

Zusätzliche Ressourcen