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: Animationen mit vorhersehbaren Rücken

Nachdem du die Option aktiviert hast, zeigt deine App Animationen für den Rückweg nach Hause sowie für übergreifende Aktivitäten und Aufgaben an.

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

• Tabellen unten
• Seitenblätter
• Suche

Weitere Informationen finden Sie in der Entwicklerdokumentation zu Materialkomponenten auf GitHub (in englischer Sprache).

Das Video zeigt ein kurzes Beispiel für vorausschauende Rückwärtsanimationen für Cross-Aktivität und „Zurück nach Hause“ in 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. Auf dem vorherigen Bildschirm wischt der Nutzer ein zweites Mal zurück und zeigt eine Vorschau des Startbildschirms mit seinem Hintergrund an – ein Beispiel für die Animation „Zurück zum Startbildschirm“.
3. Der Nutzer wischt weiter nach rechts und zeigt eine Animation an, in der das Fenster auf das Symbol auf dem Startbildschirm verkleinert wird.
4. Der Nutzer kehrt nun vollständig zum Startbildschirm zurück.

Weitere Informationen zur Unterstützung von vorausschauenden Zurück-Touch-Gesten

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

Sie können benutzerdefinierte Animationen und Übergänge für In-App-Eigenschaften, benutzerdefinierte aktivitätsübergreifende Animationen und benutzerdefinierte fragmentierte Animationen mit vorausschauenden Zurück-Gesten erstellen.

Benutzerdefinierte Übergänge mithilfe 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-Geste in Ihrer App zu entwickeln. Progress APIs sind hilfreich bei der Animation von Ansichten, haben aber Einschränkungen bei der Animation von Übergängen zwischen Fragmenten. In OnBackPressedCallback haben wir die Methoden handleOnBackProgressed, handleOnBackCancelled und handleOnBackStarted zum Animieren von Objekten eingeführt, während der Nutzer zurückwischt. Verwenden Sie diese Methoden, wenn Sie mehr als die vom System bereitgestellten Standardanimationen oder Animationen der Materialkomponente anpassen müssen.

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

Hinweis :Benutzerdefinierte In-App-Übergänge und -Animationen erstellen

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 vorausschauende Rü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. Spielen Sie den Übergang mit dem Zurück-Ereignis in handleOnBackProgressed ab. Setzen Sie dazu currentFraction und BackEvent.progress in Beziehung, um anzuzeigen, wie weit der Nutzer zurückgewischt hat.
4. Schließen Sie den Übergang ab, nachdem der Nutzer die „Zurück“-Touch-Geste in handleOnBackPressed ausgeführt hat.
5. Setzen Sie abschließend den Status des Übergangs innerhalb von handleOnBackCancelled zurück.

Im folgenden Video, mit Kotlin-Code und XML wird ein benutzerdefinierter Übergang zwischen zwei Feldern gezeigt, die mit OnBackPressedCallback implementiert wurden:

    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>

Bei der Arbeit mit „Predictive Back“-Übergängen ist Folgendes zu beachten:

• Verwenden Sie isSeekingSupported, um zu prüfen, ob der Übergang die Funktion „Predictive Back“ unterstützt.
• Überschreiben Sie isSeekingSupported, um für Ihre benutzerdefinierten Übergänge „true“ zurückzugeben.
• Erstellen Sie einen Controller pro Animation.
• Vorhergesagte Rückübergänge werden bei AndroidX-Übergängen unterstützt, aber nicht bei Framework-Übergängen. Wir empfehlen eine Migration weg von Framework-Übergängen.
• Vorausschauende Rückü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 den TransitionSeekController auf das Ergebnis von TransitionManager.createSeekController und nicht auf das Ergebnis von controlDelayedTransition fest.

Unter Android 14 und höher benutzerdefinierte Aktivitätsübergänge hinzufügen

Damit benutzerdefinierte Aktivitätsübergänge unter Android 14 und höher die Funktion „Zurückkehren“ unterstützen, können Sie overrideActivityTransition anstelle von overridePendingTransition verwenden. Das bedeutet, dass die Übergangsanimation wiedergegeben wird, wenn der Nutzer nach hinten wischt.

Stellen Sie sich für ein Beispiel vor, wie dies funktionieren könnte, stellen Sie sich ein Szenario vor, in dem Aktivität B auf Aktivität A im Back-Stack liegt. Benutzerdefinierte Aktivitätsanimationen würden Sie so behandeln:

• Rufen Sie entweder öffnenden oder schließenden Übergängen in der Methode onCreate von Aktivität B auf.
• Wenn der Nutzer Aktivität B aufruft, 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 Einstiegsanimation 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 Animation zur aktivitätsübergreifenden Vorhersage, die im vorherigen Video gezeigt wurde, wiedergegeben.

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

Bei der Implementierung der Funktion „Predictive Back“ mit Fragmenten gibt es zwei Ansätze.

Vorhandene APIs verwenden

Wir empfehlen, vorhandene APIs zu verwenden. Mit diesen APIs können Sie vom Bildschirmrand wischen, um Ihre Animator- oder Androidx-Übergänge mit der Touch-Geste zu bearbeiten. Das Verschieben einer Geste über einen Schwellenwert bestimmt, ob sie abgeschlossen ist und zum vorherigen Fragment zurückkehren oder sie abgebrochen wird und auf dem aktuellen Fragment bleibt. Weitere Informationen finden Sie unter Mithilfe von Animationen zwischen Fragmenten wechseln.

Beachten Sie die folgenden Faktoren:

• Importieren Sie Transitions 1.5.0 oder höher und Fragmente 1.7.0 oder höher. Ein Großteil der Unterstützung der vorausschauenden Rückwärtsunterstützung in Fragmenten stützt sich darauf, dass Übergänge in der Lage sind, Animationen zu suchen, was nur in Transitions 1.5.0 oder höher möglich ist.
• Verwenden Sie Fragmente entweder mit FragmentManager oder mit der Navigationskomponente, um den Back-Stack zu verarbeiten. Predictive Back wird nicht unterstützt, wenn du deinen eigenen Back-Stack verwaltest.
• Einige Bibliotheken umfassen Unterstützung für den prädiktiven Rücken. Sehen Sie sich dazu die Dokumentation an.
• Die Klasse Animator und die AndroidX Transition-Bibliothek werden unterstützt.
• Die Klasse Animation und die Framework Transition-Bibliothek werden nicht unterstützt.
• Vorhersageanimationen funktionieren nur auf Geräten mit Android 14 oder höher.

Verwenden Sie in den folgenden Situationen prädiktive Back-Fragmente:

• Animieren Sie die Navigationskomponente.
• Animieren mit setCustomAnimations.
• Animieren Sie die Ein- und Ausstiegsübergänge mit setEnterTransition, setExitTransition, setReenterTransition und setReturnTransition.
• Übergänge für gemeinsame Elemente werden mit setSharedElementEnterTransition und setSharedElementReturnTransition animiert.

Einige Materialbewegungen unterstützen ab 1.12.02-alpha02 und höher vorausschauende Bewegungen, einschließlich MaterialFadeThrough, MaterialSharedAxis und MaterialFade. Hinweis: MaterialContainerTransform unterstützt keine automatische Vervollständigung.

Callbacks verwenden

Sie können einen fragmentierten Übergang mithilfe von Callbacks erstellen. Bei der Verwendung von Callbacks gibt es jedoch eine bekannte Einschränkung, bei der Nutzer das vorherige Fragment nicht sehen können, wenn sie zurückwischen. So erstellen Sie einen fragmentierten Übergang von gemeinsam genutzten Elementen, der dem Designleitfaden für vorausschauende Back-ups entspricht:

Erstellen Sie ein OnBackPressedCallback. Innerhalb von handleOnBackProgressed wird das Fragment skaliert und verschoben. Dann hebst du sie vom Back Stack ab. Führen Sie als Nächstes den Übergang zu gemeinsam genutzten Elementen mit setSharedElementReturnTransition außerhalb des Callbacks aus.

Weitere Informationen finden Sie im Codebeispiel auf GitHub.

Voraussetzungen

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

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

Die folgende Tabelle bezieht sich auf die Anforderungen, die das Ansehen von Animationen zulassen müssen.

Kategorie	Animation	Entwickleroption aktiviert	Geräteversion
Systemanimationen	Zurück zur Startseite	RICHTIG	33
	Cross-Aktivität	RICHTIG	34
	Aufgabenübergreifend	RICHTIG	34
Plattform	Benutzerdefinierte ü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

Weitere Ressourcen

• Codebeispiele für vorausschauende Back-ups
• Grundlagen für das Systembackvideo
• Videos für die Zukunft von Android