Android Navigation 详解

一、导航概述

Navigation 用于 Fragment 的管理。他可以让 Fragrant 之间的切换，拥有像 Activity 间一样的跳转。与 DrawerLayout(抽屉式布局)、ActionBar(导航栏)等有简洁完美的对接。

二、开发环境设置

注意：Navigation 需要在 Android Studio 3.3 或更高版本中才可使用。(并且在 androidx 中支持的更好，之前没有使用 androidx 一直无法添加 Fragment 目的地)

若要在项目中包含导航支持，请将以下依赖项添加到应用程序的 build.gradle 文件中：

dependencies {def nav_version = "2.1.0-rc01"// Javaimplementation "androidx.navigation:navigation-fragment:$nav_version"implementation "androidx.navigation:navigation-ui:$nav_version"// Kotlinimplementation "androidx.navigation:navigation-fragment-ktx:$nav_dep"implementation "androidx.navigation:navigation-ui-ktx:$nav_dep"}

三、创建 navigation graph (导航图)

导航图是一个 XML 资源文件，在导航图中有两个概念：

1.Destination：导航图中的每一个导航被称为 Destination (目的地)。

2.Action：导航与导航之间使用 Action (事件) 连接，用于说明两个导航之间的跳转关系。

若要向项目添加导航图，请执行以下操作：

在项目的 res 目录下，新建一个 navigation 文件夹，右键 navigation 文件夹，依次选择：New > Navigation resource file

填写文件名称，如：nav_graph，点击 OK。

四、编辑导航图

在编辑导航图前，需要先创建 Activity，与相关的 Fragment。(此处使用 1 个 Activity，三个 Fragment)

/*** @Author: Eli Shaw* @Date: 2019-08-18 10:10:42* @Description: Activity 容器类*/
class NavigationActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_navigation)}
}

/*** @Author: Eli Shaw* @Date: 2019-08-18 10:07:13* @Description: 登录页*/
class LoginFragment : Fragment(), View.OnClickListener {override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {// Inflate the layout for this fragmentval viewRoot = inflater.inflate(R.layout.fragment_login, container, false)return viewRoot}
}

/*** @Author: Eli Shaw* @Date: 2019-08-18 10:08:52* @Description: 注册页*/
class RegisterFragment : Fragment(), View.OnClickListener {override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {// Inflate the layout for this fragmentval viewRoot = inflater.inflate(R.layout.fragment_register, container, false)return viewRoot}
}

/*** @Author: Eli Shaw* @Date: 2019-08-18 10:40:42* @Description: 首页*/
class HomeFragment : Fragment() {override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_home, container, false)}
}

创建好 nav_graph 导航图后，双击进行编辑(与常规布局文件很相似)

1、指定 Activity 容器

在 Activity 布局文件中指定导航图的容器

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".navigation.NavigationActivity"><fragmentandroid:id="@+id/nav_host_fragment"android:name="androidx.navigation.fragment.NavHostFragment"android:layout_width="match_parent"android:layout_height="match_parent"app:defaultNavHost="true"app:navGraph="@navigation/nav_graph"/>
</LinearLayout>

android:name：指定 Fragment 的类型为 NavHostFragment。

app:defaultNavHost="true"：让 Navigation 容器处理返回事件，在 Navigation 容器中如果有页面的跳转，点击返回按钮会先处理容器中 Fragment 页面间的返回，处理完容器中的页面，再处理 Activity 页面的返回。如果值为 false 则直接处理 Activity 页面的返回。

app:navGraph：指定 Navigation 文件。

2、添加 Action (事件)

拖动选中的(目的地)右方的圆点到另一个(目的地)即可创建一个 Action(事件)。

点击左下角的 Text ，将显示如下代码

<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/loginFragment"><!--登录 Fragment 包含两个事件：一个是注册页，一个是首页 --><fragment android:id="@+id/loginFragment" android:name="cn.eli.jetpack.navigation.LoginFragment"android:label="fragment_login" tools:layout="@layout/fragment_login"><action android:id="@+id/actionLoginToRegister" app:destination="@id/registerFragment"/><action android:id="@+id/actionLoginToHome" app:destination="@id/homeFragment"/></fragment><!--注册 Fragment 包含一个事件：返回到登录页--><fragment android:id="@+id/registerFragment" android:name="cn.eli.jetpack.navigation.RegisterFragment"android:label="fragment_register" tools:layout="@layout/fragment_register"><action android:id="@+id/actionRegisterToLogin" app:destination="@id/loginFragment"/></fragment><!--首页 Fragment 没有事件--><fragment android:id="@+id/homeFragment" android:name="cn.eli.jetpack.navigation.HomeFragment"android:label="fragment_home" tools:layout="@layout/fragment_home"/>
</navigation>

3、导航图的复用

<navigation> 是导航图的根元素，Destination (目的地) 与 Action (事件) 都是 <navigation> 元素中的节点。

<navigation> 中可以包含 <navigation> 节点，这样使用的目的是可以复用相同的导航图。例如：增加一个找回密码页，这个找回密码页在另一个导航图中，找回密码后再继续登录操作：

此图是一个包含导航图的预览页，文本内容如下

<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_multiplex"app:startDestination="@id/findPwdFragment"><fragment android:id="@+id/findPwdFragment" android:name="cn.eli.jetpack.navigation.FindPwdFragment"android:label="fragment_find_pwd" tools:layout="@layout/fragment_find_pwd"><action android:id="@+id/action_findPwdFragment_to_nav_graph" app:destination="@id/nav_graph"/></fragment><!--引入另一个导航图--><include app:graph="@navigation/nav_graph"/></navigation>

五、导航图间的跳转

1、获取 NavController 的方式

导航图使用 NavController 控制(目的地)之间的跳转，在 Activity，Fragment 中获取 NavController 有以下 6 种方式：

1.Fragment.findNavController()
2.View.findNavController()
3.Activity.findNavController(viewId: Int) //只有 Activity 中可以使用
4.NavHostFragment.findNavController(Fragment)
5.Navigation.findNavController(Activity, @IdRes int viewId) //只有 Activity 中可以使用
6.Navigation.findNavController(View)

2、导航中目的地间的传值

导航中目的地间也可以使用 Bundle 进行传值

//使用 bundle 传值
val bundle = Bundle()
bundle.putInt(ARG_NAV, navController)findNavController().navigate(R.id.actionLoginToRegister, bundle)

下面是登录页、注册页完整代码

private const val ARG_NAV = "nav"/*** @Author: Eli Shaw* @Date: 2019-08-18 10:07:13* @Description: 登录页*/
class LoginFragment : Fragment(), View.OnClickListener {private var navController: Int = 0override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)arguments?.let {navController = it.getInt(ARG_NAV)}}override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {// Inflate the layout for this fragmentval viewRoot = inflater.inflate(R.layout.fragment_login, container, false)//注册点击事件viewRoot.findViewById<Button>(R.id.btnRegister).setOnClickListener(this)//登录点击事件viewRoot.findViewById<Button>(R.id.btnLogin).setOnClickListener {findNavController().navigate(R.id.actionLoginToHome)}return viewRoot}/*** 注册点击事件*/override fun onClick(view: View) {if (++navController > 4)navController = 1//使用 bundle 传值val bundle = Bundle()bundle.putInt(ARG_NAV, navController)//根据 navController 值的不同，使用不同的获取 NavController 的方式when (navController) {//Fragment.findNavController()1 -> findNavController().navigate(R.id.actionLoginToRegister, bundle)//View.findNavController()2 -> view.findNavController().navigate(R.id.actionLoginToRegister, bundle)//NavHostFragment.findNavController(Fragment)3 -> NavHostFragment.findNavController(this).navigate(R.id.actionLoginToRegister, bundle)//Navigation.findNavController(View)4 -> Navigation.findNavController(view).navigate(R.id.actionLoginToRegister, bundle)}}
}

private const val ARG_NAV = "nav"/*** @Author: Eli Shaw* @Date: 2019-08-18 10:08:52* @Description: 注册页*/
class RegisterFragment : Fragment(), View.OnClickListener {private var navController: Int = 0override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)arguments?.let {navController = it.getInt(ARG_NAV)}}override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {// Inflate the layout for this fragmentval viewRoot = inflater.inflate(R.layout.fragment_register, container, false)viewRoot.findViewById<Button>(R.id.btnBackLogin).setOnClickListener(this)return viewRoot}override fun onClick(view: View) {val bundle = Bundle()bundle.putInt(ARG_NAV, navController)view.findNavController().navigate(R.id.actionRegisterToLogin, bundle)}
}

3、导航中目的地间的转场动画

自定义转场动画

cut_to_enter.xml （入场动画）

<set xmlns:android="http://schemas.android.com/apk/res/android"><translateandroid:toYDelta="0"android:fromYDelta="100%"android:duration="1500"/>
</set>

cut_to_exit.xml（出场动画）

<set xmlns:android="http://schemas.android.com/apk/res/android"><translateandroid:duration="1500"android:fromYDelta="0"android:toYDelta="-100%"/>
</set>

在导航图中编辑