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 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:

• Untere Blätter
• Seitenleisten
• Suche

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

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 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 zum Hinzufügen der Unterstützung für vorausschauende Rückwärts-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 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. Verwenden Sie diese Methoden, wenn Sie mehr als nur die vom System bereitgestellten Standardanimationen oder die Animationen der Material-Komponenten anpassen möchten.

Wir gehen davon aus, dass die meisten Apps die abwärtskompatiblen AndroidX APIs verwenden. Es gibt aber 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-Übergängen 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 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 der Funktion „Vorhersage für Rückwärtsübergänge“ Folgendes:

• Mit isSeekingSupported können Sie prüfen, ob der Übergang die Vorhersagefunktion für 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 abgespielt wird, wenn der Nutzer wischt.

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

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

Berücksichtigen Sie dabei 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 Rückstapel 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:

• Die Navigationskomponente animieren
• Mit setCustomAnimations animieren
• 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

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 einen OnBackPressedCallback. Skalieren und verschieben Sie das Fragment in handleOnBackProgressed. und dann aus dem hinteren Stapel herausspringen. Führen Sie 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 durch targetSdkVersion und compileSdkVersion, die 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 für ein Video des Rückbereichs des Systems
• Die Zukunft von Android-Videos gestalten