Unterstützung für integrierte und benutzerdefinierte Animationen für die intelligente „Zurück“-Touch-Geste

Wenn Sie Ihre App bereits auf die neuen System-Back-APIs umgestellt haben, können Sie die Funktion „Vorherige Rückgabe“ aktivieren, um automatisch In-App-Animationen zu erhalten und benutzerdefinierte Übergänge zu unterstützen.

Unterstützung für integrierte In-App-Animationen hinzufügen

Video: Prognosebasierte Rückwärtsanimationen

Nachdem Sie die Funktion aktiviert haben, werden in Ihrer App Animationen für die Rückkehr zur Startseite, für aktivitätsübergreifende und für aufgabenübergreifende Aktionen 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 aktivitätsübergreifend und zurück zu Hause mithilfe der Android-App "Einstellungen".

  1. In der Animation wischt der Nutzer zurück, um zu den vorherigen Einstellungen zurückzukehren. Bildschirm – ein Beispiel für eine aktivitätsübergreifende Animation.
  2. Auf dem vorherigen Bildschirm wischen Nutzende ein zweites Mal zurück, zeigt eine Vorschau des Startbildschirms mit Hintergrund – ein Beispiel für die Back-to-Home-Animation.
  3. Der Nutzer wischt weiter nach rechts. Daraufhin wird eine Animation des Fensters angezeigt, das sich auf das Symbol auf dem Startbildschirm verkleinert.
  4. Der Nutzer ist jetzt vollständig zum Startbildschirm zurückgekehrt.

Weitere Informationen zur Unterstützung der Vorhersagefunktion

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

Mit der Progress API und der benutzerdefinierten Methode für aktivitätsübergreifende AnimationenoverrideActivityTransition können Sie benutzerdefinierte In-App-Property-Animationen und ‑Übergänge erstellen.

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

Mit AndroidX Activity 1.8.0-alpha01 oder höher können Sie die Funktion Predictive Back Progress APIs zur Entwicklung benutzerdefinierter Animationen „Zurück“-Touch-Geste in Ihrer App. Innerhalb von OnBackPressedCallback haben wir handleOnBackProgressed, handleOnBackCancelled und handleOnBackStarted-Methoden zum Animieren von Objekten, während der Nutzer zurückwischt. Verwenden Sie diese Methoden, wenn Sie etwas Individuelleres als die Standardanimationen der neuen Systemanimationen oder der Material Component-Animationen benötigen.

Wir gehen davon aus, dass die meisten Apps die abwärtskompatiblen AndroidX APIs verwenden. Es gibt jedoch ähnliche Plattform-APIs innerhalb des OnBackAnimationCallback die für den Test in der Entwicklervorschau 1 von Android 14 und höher verfügbar ist.

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 Vorhersagen für Rückwärtsü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 in handleOnBackProgressed ab, indem Sie currentFraction mit BackEvent.progress verknüpfen. So wird angezeigt, wie weit der Nutzer nach links gewischt hat.
  4. Schließen Sie den Übergang ab, nachdem der Nutzer die Zurück-Touch-Geste in handleOnBackPressed
  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:

  • 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. Wir empfehlen, von Framework-Übergängen wegzukommen.
  • Predictive Back-Übergänge werden auf Geräten mit Android 14 und höher nicht abwärtskompatibel.
  • Mit XML-Szenen erstellte Übergänge werden ebenfalls unterstützt. In handleOnBackStarted, setze TransitionSeekController auf das Ergebnis von TransitionManager.createSeekController anstelle des Ergebnisses von controlDelayedTransition

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

Damit benutzerdefinierte Aktivitätsübergänge die Vorhersagefunktion für die Rückwärtsnavigation 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 findet über Aktivität A im Back Stack statt. Sie verwalten benutzerdefinierte So können Sie Aktivitätsanimationen ansehen:

  • 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, verwenden Sie OVERRIDE_TRANSITION_CLOSE.

  • Bei Angabe von OVERRIDE_TRANSITION_CLOSE ist enterAnim die Aktivität A Animation starten und exitAnim ist die Exit-Animation von Aktivität B.