Unterstützung für Animationen für intelligente „Zurück“-Touchgeste in Views hinzufügen

Mit Views oder Compose können Sie benutzerdefinierte In-App-Property-Animationen und ‑Übergänge, benutzerdefinierte aktivitätsübergreifende Animationen und benutzerdefinierte fragmentübergreifende Animationen mit vorhersagenden Rückwärtsgesten erstellen. Wenn Sie die Compose-Methode ausprobieren möchten, lesen Sie den Abschnitt Unterstützung für die Animation „Vorhersagbares Zurück“ hinzufügen.

Benutzerdefinierte Übergänge mit 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 Vorhersage-Geste „Zurück“ in Ihrer App zu entwickeln. Progress APIs sind hilfreich für die 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 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öchten.

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 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 angezeigt, 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 Funktion „Vorhersagende Zurück-Gesten“ wird auf Geräten mit Android 14 und höher unterstützt und ist nicht abwärtskompatibel.
  • Auch mit XML-Szenen erstellte Übergänge werden unterstützt. Legen Sie in handleOnBackStarted TransitionSeekController auf das Ergebnis von TransitionManager.createSeekController anstelle des Ergebnisses von controlDelayedTransition fest.

Zusätzliche Ressourcen