Animuj przejścia między miejscami docelowymi

Komponent Nawigacja umożliwia dodawanie do działań zarówno właściwości, jak i wyświetlania animacji. Aby dowiedzieć się, jak tworzyć własne animacje, zapoznaj się z materiałami animowanymi.

Nawigacja zawiera też kilka domyślnych animacji, które ułatwiają rozpoczęcie pracy. Aby dodać animacje do działania, wykonaj te czynności:

  1. W edytorze nawigacji kliknij działanie, w którym ma nastąpić animacja.
  2. W sekcji Animacje w panelu Atrybuty kliknij strzałkę menu obok animacji, którą chcesz dodać. Możesz wybrać jeden z tych typów:
    • Podawanie miejsca docelowego
    • Opuszczanie miejsca docelowego
    • Wpisanie miejsca docelowego za pomocą działania wyskakującego, czyli działania, które podczas nawigacji powoduje wyskakiwanie dodatkowych miejsc docelowych poza stos.
    • Zamykanie miejsca docelowego za pomocą polecenia wyskakującego
  3. Wybierz animację z wyświetlonej listy animacji projektu.
sekcji animacji w panelu atrybutów.
Rysunek 1. Sekcja Animacje w panelu Atrybuty.

Po dodaniu animacji kliknij kartę Tekst, by przełączyć się na widok tekstu XML. Kod XML animacji pojawi się w odpowiednim elemencie <action>. W tym przykładzie specifyAmountFragment jest źródłowym miejscem docelowym działania 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>

Dodaj wspólne przejścia elementów między miejscami docelowymi

Gdy widok jest wspólny dla 2 miejsc docelowych, możesz użyć przejścia wspólnych elementów, aby określić sposób przechodzenia widoku podczas nawigowania z jednego miejsca docelowego do drugiego. Przejścia współdzielonych elementów są częścią ram przejścia.

Udostępnione elementy są dostarczane w sposób programowy, a nie przez plik XML nawigacyjne. Miejsca docelowe aktywności i fragmentów mają podklasę interfejsu Navigator.Extras, która akceptuje dodatkowe opcje nawigacji, w tym elementy współdzielone. Możesz przekazać te Extras podczas wywołania metody navigate().

Wspólny element przechodzi do miejsca docelowego fragmentu

Klasa FragmentNavigator.Extras umożliwia mapowanie udostępnionych elementów z jednego miejsca docelowego do drugiego według nazwy przejścia, podobnie jak w przypadku FragmentTransaction.addSharedElement(). Następnie możesz przekazać dodatki do navigate(), jak pokazano na tym przykładzie:

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

Przenosi wspólny element do miejsca docelowego aktywności

Działania wykorzystują ActivityOptionsCompat do kontrolowania przenoszenia elementów udostępnianych zgodnie z opisem w dokumentacji rozpoczynania działania przy użyciu elementu udostępnianego oraz w przykładzie poniżej:

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

Zastosuj animacje pop do przejść aktywności

Gdy przejdziesz do elementu Activity lub z niego dotrzesz, animacje nie są stosowane automatycznie. Zamiast tego musisz wywołać metodę ActivityNavigator.applyPopAnimationsToPendingTransition() z docelowego miejsca docelowego Activity, w którym ma nastąpić animacja:

Kotlin

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

Java

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