Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

Cómo animar las transiciones entre destinos

El componente Navigation te permite agregar animaciones de propiedad y vista a las acciones. Para crear tus propias animaciones, consulta Recursos de animación.

Navigation también incluye varias animaciones predeterminadas para ayudarte a comenzar. Si deseas agregar animaciones a una acción, haz lo siguiente:

  1. En el Editor de Navigation, haz clic en la acción donde debería ocurrir la animación.
  2. En la sección Animations del panel Attributes, haz clic en la flecha desplegable que se muestra junto a la animación que quieres agregar. Puedes elegir entre los siguientes tipos:
    • Ingresar a un destino
    • Salir de un destino
    • Ingresar a un destino mediante una acción emergente
    • Salir de un destino mediante una acción emergente
  3. Elegir una animación de la lista de animaciones del proyecto que se muestra

Una vez que hayas agregado las animaciones, haz clic en la pestaña Text para activar o desactivar la vista de texto XML. El XML de las animaciones ahora se muestra en el elemento <action> correspondiente. En el siguiente ejemplo, specifyAmountFragment es el destino de origen de la acción 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>
    

Cómo agregar transiciones de elementos compartidos entre los destinos

Además de las animaciones de transición, Navigation permite agregar transiciones de elementos compartidos entre destinos. Las transiciones de elementos compartidos se proporcionan de manera programática y no a través de tu archivo en formato XML de navegación, ya que necesitan hacer referencia a las instancias de View que quieres incluir en la transición de elementos compartidos.

Cada tipo de destino implementa esta API programática a través de una subclase de la interfaz de Navigator.Extras. Los Extras se pasan a una llamada a navigate().

Transiciones de elementos compartidos del destino de fragmento

La clase FragmentNavigator.Extras te permite adjuntar elementos compartidos a las llamadas que navigate() hace a destinos de fragmento, como se muestra en el siguiente ejemplo:

Kotlin

    val extras = FragmentNavigatorExtras(
        imageView to "header_image",
        titleView to "header_title")
    view.findNavController().navigate(R.id.confirmationAction,
        null, // Bundle of args
        null, // NavOptions
        extras)
    

Java

    FragmentNavigator.Extras extras = new FragmentNavigator.Extras.Builder()
        .addSharedElement(imageView, "header_image")
        .addSharedElement(titleView, "header_title")
        .build();
    Navigation.findNavController(view).navigate(R.id.details,
        null, // Bundle of args
        null, // NavOptions
        extras);
    

Transiciones de elementos compartidos de un destino de actividad

Las actividades se basan en el objeto ActivityOptionsCompat para controlar las transiciones de elementos compartidos, como se indica en la documentación de Cómo iniciar una actividad con un elemento compartido y según se muestra en el ejemplo a continuación:

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(imageView, "header_image"),
            UtilPair.create(titleView, "header_title"))
    val extras = ActivityNavigator.Extras(options)
    view.findNavController().navigate(R.id.details,
        null, // Bundle of args
        null, // NavOptions
        extras)
    

Java

    ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
            Pair.create(imageView, "header_image"),
            Pair.create(titleView, "header_title"));

    ActivityNavigator.Extras extras = new ActivityNavigator.Extras.Builder()
        .setActivityOptions(options)
        .build();
    Navigation.findNavController(view).navigate(R.id.details,
        null, // Bundle of args
        null, // NavOptions
        extras);
    

Cómo aplicar animaciones emergentes a transiciones de actividades

Cuando navegas desde un elemento Activity o hacia él, las animaciones emergentes no se aplican automáticamente. En cambio, debes llamar a ActivityNavigator.applyPopAnimationsToPendingTransition() desde el destino de Activity de objetivo en el que debería ocurrir la animación:

Kotlin

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

Java

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