Übergänge zwischen Zielen animieren

Mit der Navigationskomponente können Sie Aktionen sowohl Eigenschaften hinzufügen als auch Animationen ansehen. Wie Sie eigene Animationen erstellen, erfahren Sie in den Animationsressourcen.

Die Navigation enthält auch einige Standardanimationen, die Ihnen den Einstieg erleichtern. So fügen Sie einer Aktion Animationen hinzu:

1. Klicken Sie im Navigationseditor auf die Aktion, bei der die Animation stattfinden soll.
2. Klicken Sie im Bereich Animationen des Steuerfelds Attribute auf den Drop-down-Pfeil neben der Animation, die Sie hinzufügen möchten. Sie können zwischen den folgenden Typen wählen:
   • Ziel eingeben
   • Ein Ziel verlassen
   • Eingabe eines Ziels über eine Pop-Aktion, eine Aktion, bei der während der Navigation zusätzliche Ziele aus dem Back Stack entfernt werden.
   • Ein Ziel mit einer Pop-Aktion verlassen
3. Wählen Sie eine Animation aus der Liste der Projektanimationen aus.

Nachdem Sie die Animationen hinzugefügt haben, klicken Sie auf den Tab Text, um zur XML-Textansicht zu wechseln. Der XML-Code für die Animationen wird jetzt im entsprechenden <action>-Element angezeigt. Im folgenden Beispiel ist specifyAmountFragment das Quellziel für die Aktion confirmationAction:

<fragment
    android:id="@+id/specifyAmountFragment"
    android:name="com.example.buybuddy.buybuddy.SpecifyAmountFragment"
    android:label="fragment_specify_amount"
    tools:layout="@layout/fragment_specify_amount">
    <action
        android:id="@+id/confirmationAction"
        app:destination="@id/confirmationFragment"
        app:enterAnim="@anim/slide_in_right"
        app:exitAnim="@anim/slide_out_left"
        app:popEnterAnim="@anim/slide_in_left"
        app:popExitAnim="@anim/slide_out_right" />
</fragment>

Übergänge für gemeinsame Elemente zwischen Zielen hinzufügen

Wenn eine Ansicht von zwei Zielen gemeinsam genutzt wird, können Sie mit einem gemeinsamen Elementübergang festlegen, wie die Ansicht bei der Navigation von einem Ziel zum anderen übergeht. Übergänge für gemeinsame Elemente sind Teil des Transition Framework.

Gemeinsame Elemente werden programmatisch und nicht über die Navigations-XML-Datei bereitgestellt. Aktivitäts- und Fragmentziele haben jeweils eine abgeleitete Klasse der Navigator.Extras-Schnittstelle, die zusätzliche Optionen für die Navigation akzeptiert, einschließlich gemeinsam genutzter Elemente. Sie können diese Extras beim Aufrufen von navigate() übergeben.

Gemeinsames Element geht zu Fragmentziel über

Mit der Klasse FragmentNavigator.Extras können Sie gemeinsam genutzte Elemente von einem Ziel zum nächsten anhand ihres Übergangsnamens zuordnen. Dies funktioniert ähnlich wie bei FragmentTransaction.addSharedElement(). Sie können die Extras dann an navigate() übergeben, wie im folgenden Beispiel gezeigt:

val extras = FragmentNavigatorExtras(view1 to "hero_image")

view.findNavController().navigate(
    R.id.confirmationAction,
    null, // Bundle of args
    null, // NavOptions
    extras)

FragmentNavigator.Extras extras = new FragmentNavigator.Extras.Builder()
    .addSharedElement(view1, "hero_image")
    .build();

Navigation.findNavController(view).navigate(
    R.id.details,
    null, // Bundle of args
    null, // NavOptions
    extras);

Gemeinsames Element geht zu einem Aktivitätsziel über

Aktivitäten benötigen ActivityOptionsCompat, um Übergänge zu geteilten Elementen zu steuern, wie in der Dokumentation Eine Aktivität mit einem gemeinsam genutzten Element starten und im folgenden Beispiel beschrieben:

// Rename the Pair class from the Android framework to avoid a name clash
import android.util.Pair as UtilPair
...
val options = ActivityOptionsCompat.makeSceneTransitionAnimation(activity,
        UtilPair.create(view1, "hero_image"))
val extras = ActivityNavigatorExtras(options)
view.findNavController().navigate(
    R.id.details,
    null, // Bundle of args
    null, // NavOptions
    extras)

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "hero_image"));

ActivityNavigatorExtras extras = new ActivityNavigatorExtras.Builder()
    .setActivityOptions(options)
    .build();


Navigation.findNavController(view).navigate(
    R.id.details,
    null, // Bundle of args
    null, // NavOptions
    extras);

Pop-Animationen auf Aktivitätsübergänge anwenden

Wenn Sie zu oder von einem Activity gehen, werden Pop-Animationen nicht automatisch angewendet. Stattdessen müssen Sie ActivityNavigator.applyPopAnimationsToPendingTransition() über das Activity-Ziel aufrufen, in dem die Animation stattfinden soll:

override fun finish() {
    super.finish()
    ActivityNavigator.applyPopAnimationsToPendingTransition(this)
}

@Override
public void finish() {
    super.finish();
    ActivityNavigator.applyPopAnimationsToPendingTransition(this);
}