JetPack学习笔记之Navigation(一)
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.png2.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