Animare le transizioni tra le destinazioni

Il componente Navigazione consente di aggiungere proprietà e visualizzare animazioni alle azioni. Per creare le tue animazioni, consulta le risorse per l'animazione.

La navigazione include anche diverse animazioni predefinite per iniziare. Per aggiungere animazioni a un'azione:

1. Nell'editor di navigazione, fai clic sull'azione in cui deve avvenire l'animazione.
2. Nella sezione Animazioni del riquadro Attributi, fai clic sulla freccia del menu a discesa accanto all'animazione che vuoi aggiungere. Puoi scegliere tra i seguenti tipi:
   • Inserimento di una destinazione
   • Uscita da una destinazione
   • Inserendo una destinazione tramite un'azione pop, un'azione che fa emergere ulteriori destinazioni dallo stack posteriore durante la navigazione.
   • Uscita da una destinazione tramite un'azione popup
3. Scegli un'animazione dall'elenco di animazioni del progetto visualizzato.

Figura 1. La sezione Animazioni del riquadro Attributi.

Dopo aver aggiunto le animazioni, fai clic sulla scheda Testo per passare alla visualizzazione del testo XML. Il codice XML per le animazioni viene ora visualizzato nell'elemento <action> corrispondente. Nell'esempio seguente, specifyAmountFragment è la destinazione di origine per l'azione 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>

Aggiungere transizioni di elementi condivisi tra le destinazioni

Quando una vista è condivisa tra due destinazioni, puoi utilizzare una transizione dell'elemento condiviso per definire la transizione della vista quando si naviga da una destinazione all'altra. Le transizioni degli elementi condivisi fanno parte del framework di transizione.

Nota: quando utilizzi le transizioni degli elementi condivisi, non devi usare il framework dell'animazione (enterAnim, exitAnim e così via dalla sezione precedente). Dovresti invece utilizzare solo il Framework di transizione per impostare le transizioni di entrata e di uscita.

Gli elementi condivisi vengono forniti in modo programmatico anziché tramite il file XML di navigazione. Ognuna di queste destinazioni include una sottoclasse dell'interfaccia Navigator.Extras che accetta opzioni aggiuntive per la navigazione, inclusi gli elementi condivisi. Puoi passare questo Extras durante la chiamata al numero navigate().

Nota: assicurati di acquisire familiarità con le transizioni degli elementi condivisi prima di continuare. Per le transizioni di elementi condivisi con frammenti, consulta Spostati tra i frammenti utilizzando le animazioni. Per le transizioni di elementi condivisi delle attività, consulta Avviare un'attività utilizzando un'animazione.

Transizioni di elementi condivisi nella destinazione di un frammento

La classe FragmentNavigator.Extras consente di mappare gli elementi condivisi da una destinazione all'altra in base al nome della transizione, in modo simile a come si utilizza FragmentTransaction.addSharedElement(). Puoi quindi passare gli extra a navigate(), come mostrato nell'esempio seguente:

Kotlin

val extras = FragmentNavigatorExtras(view1 to "hero_image")

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

Java

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);

Transizioni di elementi condivisi a una destinazione di attività

Le attività si basano su ActivityOptionsCompat per controllare le transizioni degli elementi condivisi, come descritto nella documentazione Avviare un'attività con un elemento condiviso e come mostrato nell'esempio di seguito:

Kotlin

// 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)

Java

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);

Applica animazioni pop alle transizioni delle attività

Quando accedi a o da un elemento Activity, le animazioni pop non vengono applicate automaticamente. Devi chiamare ActivityNavigator.applyPopAnimationsToPendingTransition() dalla destinazione Activity di destinazione in cui dovrebbe essere eseguita l'animazione:

Kotlin

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

Java

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