JetPack学习笔记之Navigation（一）

谷歌提供的Navigation组件，旨在管理页面和APP Bar。其中页面包含Activity和Fragment，但是主要是指Fragment，因为开发Navigation的主要目的就是方便在一个Activity中对多个Fragment进行管理。它具有以下的优点。

• 可视化的页面导航图，类似于Xcode中的Story Board。
• 通过destination和action完成页面间的导航。
• 方便添加页面切换动画。
• 页面间类型安全的参数传递。
• 通过Navigation UI类，对菜单、底部导航、抽屉菜单导航进行统一的管理。
• 支持深层链接DeepLink。

1、Navigation的主要元素

• Navigation Graph。包含程序中所有的页面以及页面间的跳转关系。
• NavHostFragment。可以认为它是一个特殊的Fragment，是其他Fragment的容器。Navigation Graph中展示的页面和页面关系就是NavHostFragment中的内容，可以认为Navigation Graph是可视化展示，但是NavHostFragment是对应的代码逻辑。
• NavController。这是一个Java/Kotlin对象，用于完成在Navigation Graph中具体的页面切换工作。

当想切换Fragment时，使用NavController对象，告诉它你想去Navigation Graph中的哪个Fragment，NavController会将你想去的Fragment展示在NavHostFragment中。

2、使用Navigation

2.1创建Navigation Graph。

右键点击res，然后在弹出菜单中选择“new” ---> "Android Resource File"，填写文件名称，并将Resource Type修改为Navigation，文件夹名称使用默认的navigation，然后点击“OK”创建。

image.png

创建完成后可以看到，在build.gradle文件中添加了对应的依赖。

    implementation 'androidx.navigation:navigation-fragment:2.0.0'
    implementation 'androidx.navigation:navigation-ui:2.0.0'

2.2 创建NavHostFragment。

在Activity中添加一个Fragment，Activity布局如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".navigation.NavigationActivity">

    <fragment
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:id="@+id/nav_host_fragment"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph"></fragment>

</LinearLayout>

其中有三点需要注意：

• android:name="androidx.navigation.fragment.NavHostFragment"
  

  这行代码表示这个一个特殊的Fragment，即NavHostFragment。

• app:defaultNavHost="true"
  

  为true表示Fragment会自动处理系统的返回键，即当用户按下返回键时，会自动的将当前展示的Fragment退出。

• app:navGraph="@navigation/nav_graph"
  

  用于设置该Fragment对应的导航图。

2.3 在NavHostFragment中添加destination即Fragment。

image.png

打开nav_graph.xml文件，切换到视图，依次点击加号按钮和Create new destination按钮，就可以创建Fragment。下图是创建两个Fragment之后的结果。

image.png

2.4 完成Fragment切换并添加动画。

选中mainFragment2之后，右侧会出现一个蓝色的圆圈。拖动圆圈到第二个Fragment，然后会出现一个从mainFragment2指向secondFragment的箭头，右键点击该箭头，在弹出菜单中选择edit，可设置Fragment切换动画。如下图所示：

image.png

到目前为止nav_graph.xml代码如下所示：

<?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/nav_graph"
    app:startDestination="@id/mainFragment2">
    <fragment
        android:id="@+id/mainFragment2"
        android:name="com.example.jetpackpro.navigation.MainFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main" >
        <action
            android:id="@+id/action_mainFragment2_to_secondFragment"
            app:destination="@id/secondFragment"
            app:enterAnim="@anim/fragment_open_enter"
            app:exitAnim="@anim/fragment_open_exit"
            app:popEnterAnim="@anim/fragment_close_enter"
            app:popExitAnim="@anim/fragment_close_exit" />
    </fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.jetpackpro.navigation.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second" >

    </fragment>
</navigation>

2.5 使用NavController完成导航，即Fragment页面的跳转。

在MainFragment中添加按钮，并为其添加点击事件，如下所示，即可完成跳转。

jumpBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Navigation.findNavController(v).navigate(R.id.action_mainFragment2_to_secondFragment);
            }
        });

3、使用safe args传递参数。

在使用Navigation导航时，依然可以使用之前的Bundle的方式进行参数传递。

比如在MainFragment中进行跳转时，可采用如下方式：

                Bundle bundle = new Bundle();
                bundle.putString("name","水怪");
                bundle.putInt("age",20);
                Navigation.findNavController(v).navigate(R.id.action_mainFragment2_to_secondFragment,bundle);

在SecondFragment中可采用如下方式接收参数：

        Bundle bundle = getArguments();
        if(bundle != null){
            String name = bundle.getString("name");
            int age = bundle.getInt("age");
            Log.d(TAG,"name = " + name + "   age = " + age);
        }

跳转到运行结果如下：

2020-08-05 20:43:58.009 9428-9428/com.example.jetpackpro D/SecondFragment: name = 水怪   age = 20

如果要使用safe args的方式传递参数，需要先引入依赖。

• 在project的build.gradle文件中添加插件

  classpath 'androidx.navigation:navigation-safe-args-gradle-plugin:2.3.0-alpha01'
  

• 在app的build.gradle文件中应用该插件。

  apply plugin: 'androidx.navigation.safeargs'
  

在导航图中添加<argument>标签。如下所示：

<fragment
        android:id="@+id/mainFragment2"
        android:name="com.example.jetpackpro.navigation.MainFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main" >
        <action
            android:id="@+id/action_mainFragment2_to_secondFragment"
            app:destination="@id/secondFragment"
            app:enterAnim="@anim/fragment_open_enter"
            app:exitAnim="@anim/fragment_open_exit"
            app:popEnterAnim="@anim/fragment_close_enter"
            app:popExitAnim="@anim/fragment_close_exit" />

        <!-- 添加参数 -->
        <argument
            android:name="name"
            app:argType="string"
            android:defaultValue='"none"'/>
        <argument
            android:name="age"
            app:argType="integer"
            android:defaultValue="0"/>

    </fragment>

编译项目后，可以看到在generated中生成了MainFragmentArgs文件。

image.png

传递参数逻辑修改为：

Bundle bundle = new MainFragmentArgs.Builder().setName("水怪").setAge(20).build().toBundle();
Navigation.findNavController(v).navigate(R.id.action_mainFragment2_to_secondFragment,bundle);

接收参数逻辑修改为：

Bundle bundle = getArguments();
        if(bundle != null){
            String name = MainFragmentArgs.fromBundle(getArguments()).getName();
            int age = MainFragmentArgs.fromBundle(getArguments()).getAge();
            Log.d(TAG,"name = " + name + "   age = " + age);
        }

运行结果为：

2020-08-05 21:11:17.933 9775-9775/com.example.jetpackpro D/SecondFragment: name = 水怪   age = 20