【Jetpack】Navigation navigation component③ (Add jump animation for Navigation Graph page jump action)

Code address:

• CSDN (code snapshot of this blog | recommended download 0 credits): https://download.csdn.net/download/han1202012/87951959
• GitHub (maybe covered): https://github.com/han1202012/Navigation

1. Add jump animation to Navigation Graph

---

1. Enter the Design mode of the Navigation Graph configuration

Open the Xml configuration file of Navigation Graph under "res/navigation" ,

Enter Design editing mode,

2. Select the action to jump

Select an arrow that represents the Jump Action on the Fragment page. After selection, the arrow turns blue, and you can view the properties of the Jump Action on the right.

In the basic properties, you can see that the id of the jump action is "action_fragmentA_to_fragmentB",

The destination page of the jump is the fragmentB page;

Click the triangle arrow on the left side of the Animations property to expand the animation-related properties of Animations,

Among them, enterAnim is the entry animation, and exitAnim is the exit animation. There is a "Pick a Resource" button behind these two animation options;

3. Set enterAnim for the action jump to enter the animation

Click the "Pick a Resource" button after enterAnim to enter the animation, and you can select the corresponding animation in the "Pick a Resource" dialog box below;

enterAnim Enter animation, you can choose nav_default_enter_anim animation;

After setting, action_fragmentA_to_fragmentB jump action adds an attribute 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. Set exitAnim exit animation for action jump

Click the "Pick a Resource" button after exitAnim exits the animation, and you can select the corresponding animation in the "Pick a Resource" dialog box below,

Set the default exit animation nav_default_exit_anim that comes with the system as the exit animation;

app:enterAnimThe final FragmentA page configuration is as follows, the key focus is on the entry animation property and app:exitAnimexit animation property in the action jump action ;

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

After the above two properties are set, there will be an animation for entering/exiting the page when jumping;

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

5. Set the entry/exit animation for the action jump through the code

After setting the entry and exit animation of the action_fragmentA_to_fragmentB jump action of FragmentA, the code becomes the following style:

<?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>

To enter the animation, it is to add in the action

app:enterAnim="@anim/nav_default_enter_anim"

Attribute, exit animation, is to add in action

app:exitAnim="@anim/nav_default_exit_anim"

Attributes ;

Now to add a jump animation to the action_fragmentB_to_fragmentA jump action of FragmentB, just add these two attributes directly;

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

The code after the final modification is:

<?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>

Enter the Design mode, select the arrow from FragmentB to jump to FragmentA, that is, the jump action, and you can see that the Animations property has been set to enter/exit the jump animation;

6. Execution effect

Code address:

• CSDN (code snapshot of this blog | recommended download 0 credits): https://download.csdn.net/download/han1202012/87951959
• GitHub (maybe covered): https://github.com/han1202012/Navigation