【Jetpack】ナビゲーションナビゲーションコンポーネント③ (ナビゲーショングラフのページジャンプアクションにジャンプアニメーションを追加)

コードアドレス:

• CSDN (このブログのコード スナップショット | ダウンロード 0 クレジットを推奨): https://download.csdn.net/download/han1202012/87951959
• GitHub (カバーされている可能性があります): https://github.com/han1202012/Navigation

1.ナビゲーショングラフにジャンプアニメーションを追加する

---

1. ナビゲーション グラフ構成のデザイン モードに入ります。

「res/navigation」配下のナビゲーショングラフのXml設定ファイルを開きます。

デザイン編集モードに入り、

2. ジャンプするアクションを選択します

[フラグメント] ページでジャンプ アクションを表す矢印を選択します。選択後、矢印が青になり、右側にジャンプ アクションのプロパティが表示されます。

基本プロパティでは、ジャンプ アクションの ID が「action_fragmentA_to_fragmentB」であることがわかります。

ジャンプの宛先ページは、fragmentB ページです。

[アニメーション] プロパティの左側にある三角形の矢印をクリックして、アニメーションのアニメーション関連のプロパティを展開します。

このうち、enterAnim は開始アニメーション、exitAnim は終了アニメーションで、これら 2 つのアニメーション オプションの後ろに「リソースを選択」ボタンがあります。

3. アニメーションに入るアクションジャンプに enterAnim を設定します。

EnterAnim の後に「リソースを選択」ボタンをクリックしてアニメーションを入力すると、下の「リソースを選択」ダイアログ ボックスで対応するアニメーションを選択できます。

enterAnim アニメーションを入力します。nav_default_enter_anim アニメーションを選択できます。

設定後、action_fragmentA_to_fragmentB ジャンプ アクションにより属性が追加されますapp:enterAnim="@anim/nav_default_enter_anim"。

    <fragment
        android:id="@+id/fragmentA"
        android:name="kim.hsl.nav.FragmentA"
        android:label="fragment_a"
        tools:layout="@layout/fragment_a" >
        <action
            android:id="@+id/action_fragmentA_to_fragmentB"
            app:destination="@id/fragmentB"
            app:enterAnim="@anim/nav_default_enter_anim" />
    </fragment>

4. exitAnim アクションジャンプの終了アニメーションを設定する

exitAnim がアニメーションを終了した後、[リソースを選択] ボタンをクリックすると、以下の [リソースを選択] ダイアログ ボックスで対応するアニメーションを選択できます。

システムに付属するデフォルトの終了アニメーション nav_default_exit_anim を終了アニメーションとして設定します。

最終的な FragmentA ページ構成は次のとおりです。主な焦点は、アクション ジャンプ アクションのapp:enterAnim開始アニメーション プロパティとapp:exitAnim終了アニメーション プロパティにあります。

    <fragment
        android:id="@+id/fragmentA"
        android:name="kim.hsl.nav.FragmentA"
        android:label="fragment_a"
        tools:layout="@layout/fragment_a" >
        <action
            android:id="@+id/action_fragmentA_to_fragmentB"
            app:destination="@id/fragmentB"
            app:enterAnim="@anim/nav_default_enter_anim"
            app:exitAnim="@anim/nav_default_exit_anim" />
    </fragment>

上記 2 つのプロパティを設定すると、ジャンプ時にページに出入りするアニメーションが表示されます。

app:enterAnim="@anim/nav_default_enter_anim"
app:exitAnim="@anim/nav_default_exit_anim"

5. コードを介してアクションジャンプの開始/終了アニメーションを設定します。

FragmentA の action_fragmentA_to_fragmentB ジャンプ アクションの開始と終了アニメーションを設定すると、コードは次のスタイルになります。

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/navigation_graph"
    app:startDestination="@id/fragmentA">

    <fragment
        android:id="@+id/fragmentA"
        android:name="kim.hsl.nav.FragmentA"
        android:label="fragment_a"
        tools:layout="@layout/fragment_a" >
        <action
            android:id="@+id/action_fragmentA_to_fragmentB"
            app:destination="@id/fragmentB"
            app:enterAnim="@anim/nav_default_enter_anim"
            app:exitAnim="@anim/nav_default_exit_anim" />
    </fragment>
    <fragment
        android:id="@+id/fragmentB"
        android:name="kim.hsl.nav.FragmentB"
        android:label="fragment_b"
        tools:layout="@layout/fragment_b" >
        <action
            android:id="@+id/action_fragmentB_to_fragmentA"
            app:destination="@id/fragmentA" />
    </fragment>
</navigation>

アニメーションに入るには、アクションを追加することです

app:enterAnim="@anim/nav_default_enter_anim"

属性「exitアニメーション」をアクションに追加します。

app:exitAnim="@anim/nav_default_exit_anim"

属性 ;

ここで、FragmentB の action_fragmentB_to_fragmentA ジャンプ アクションにジャンプ アニメーションを追加するには、これら 2 つの属性を直接追加するだけです。

app:enterAnim="@anim/nav_default_enter_anim"
app:exitAnim="@anim/nav_default_exit_anim"

最終変更後のコードは次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/navigation_graph"
    app:startDestination="@id/fragmentA">

    <fragment
        android:id="@+id/fragmentA"
        android:name="kim.hsl.nav.FragmentA"
        android:label="fragment_a"
        tools:layout="@layout/fragment_a" >
        <action
            android:id="@+id/action_fragmentA_to_fragmentB"
            app:destination="@id/fragmentB"
            app:enterAnim="@anim/nav_default_enter_anim"
            app:exitAnim="@anim/nav_default_exit_anim" />
    </fragment>
    <fragment
        android:id="@+id/fragmentB"
        android:name="kim.hsl.nav.FragmentB"
        android:label="fragment_b"
        tools:layout="@layout/fragment_b" >
        <action
            android:id="@+id/action_fragmentB_to_fragmentA"
            app:destination="@id/fragmentA"
            app:enterAnim="@anim/nav_default_enter_anim"
            app:exitAnim="@anim/nav_default_exit_anim" />
    </fragment>
</navigation>

デザイン モードに入り、FragmentB から矢印を選択して FragmentA (ジャンプ アクション) にジャンプします。ジャンプ アニメーションを開始/終了するために、Animations プロパティが設定されていることがわかります。

6. 実行効果

コードアドレス:

• CSDN (このブログのコード スナップショット | ダウンロード 0 クレジットを推奨): https://download.csdn.net/download/han1202012/87951959
• GitHub (カバーされている可能性があります): https://github.com/han1202012/Navigation