デスティネーション間の遷移をアニメーション化する

Navigation コンポーネントを使用すると、プロパティ アニメーションとビュー アニメーションの両方をアクションに追加できます。独自のアニメーションを作成する方法については、アニメーション リソースをご覧ください。

Navigation コンポーネントには、すぐに利用できるデフォルト アニメーションもいくつか用意されています。アクションにアニメーションを追加する手順は次のとおりです。

  1. Navigation Editor 内で、アニメーションを実行するアクションをクリックします。
  2. [Attributes] パネルの [Animations] で、追加するアニメーションの横にあるプルダウン矢印をクリックします。以下のタイプの中から選択できます。
    • デスティネーションに入る
    • デスティネーションを出る
    • ポップ アクション経由でデスティネーションに入る（ポップ アクションとは、ナビゲーション時にバックスタックから別のデスティネーションをポップオフするアクションです）
    • ポップ アクション経由でデスティネーションを出る
  3. 表示されたプロジェクト アニメーションのリストから、アニメーションを選択します。
[Attributes] パネルの [Animations] セクション
図 1. [Attributes] パネルの [Animations] セクション。

アニメーションを追加したら、[Text] タブをクリックして、XML テキストビューに切り替えます。アニメーションの XML が、対応する <action> 要素内に表示されます。以下の例で、specifyAmountFragment は、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>

デスティネーション間に共有要素遷移を追加する

2 つのデスティネーション間でビューを共有する場合、共有要素遷移を使用して、デスティネーション間を移動する際のビューの遷移方法を定義できます。共有要素遷移は、遷移フレームワークに含まれています。

共有要素は、ナビゲーション XML ファイルではなく、プログラムで指定します。アクティビティとフラグメントのデスティネーションにはそれぞれ、Navigator.Extras インターフェースのサブクラスがあり、共有要素などのナビゲーションの詳細な設定が可能です。navigate() を呼び出すときに、これらの Extras を渡すことができます。

共有要素のフラグメント デスティネーションへの遷移

FragmentNavigator.Extras クラスを使用すると、FragmentTransaction.addSharedElement() を使用する場合と同様に、あるデスティネーションから次のデスティネーションへと、共有要素を遷移名でマッピングできます。次の例に示すように、Extras を navigate() に渡します。

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

共有要素のアクティビティ デスティネーションへの遷移

アクティビティは、ActivityOptionsCompat を利用して共有要素遷移を制御します（以下の例を参照）。詳細については、共有要素を使ってアクティビティを開始するをご覧ください。

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

アクティビティ遷移に対してポップ アニメーションを適用する

Activity を出発点または宛先とするナビゲーションを行う際に、ポップ アニメーションが自動的に適用されることはありません。アニメーションを適用するには、アニメーションを発生させるターゲット Activity デスティネーションから ActivityNavigator.applyPopAnimationsToPendingTransition() を呼び出す必要があります。

Kotlin

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

Java

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