6 月 3 日の「#Android11: The Beta Launch Show」にぜひご参加ください。

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

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

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

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

アニメーションを追加したら、[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>
    

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

遷移アニメーション以外にも、Navigation コンポーネントは、デスティネーション間に共有要素遷移を追加することができます。共有要素遷移内に組み込む View インスタンスを参照する必要があるため、共有要素遷移は、ナビゲーション XML ファイルではなくプログラムによって指定します。

各タイプのデスティネーションは、Navigator.Extras インターフェースのサブクラス通じてこのプログラマティック API を実装します。Extras は、navigate() 呼び出しに渡されます。

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

FragmentNavigator.Extras クラスを使用すると、フラグメント デスティネーションへの navigate() 呼び出しに、共有要素をアタッチできます。以下の例をご覧ください。

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

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

アクティビティは、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(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);
    

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

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

Kotlin

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

Java

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