谷歌官方组件Navigation你会用了吗？

转载请注明出处 [www.jianshu.com/p/b8307429e…]

上一篇文章咱们介绍了谷歌官方组件Navigation的使用谷歌官方组件Navigation你了解了吗？，接下来咱们来探究一下如何使用。

Navigation Editor

咱们了解了Navigation以后，就不得不提Navigation Editor。咱们能够经过Android Studio的 Navigation Editor去编辑和浏览咱们的Navigation graph（导航图）

请注意这里必需要求咱们的的Android Studio版本在3.3或者以上版本

目前也有不少文章介绍Navigation以及Navigation Editor可是更多的是介绍Android Studio3.3以前版本的，本篇文章着重介绍的是Android Studio3.3及以上版本，有不少不一样之处。如需应用如下内容请先升级Android Studio至3.3或者以上版本。

开始使用Navigation Editor

1.环境配置

在Module下面的build.gradle当中

dependencies {
    def nav_version = "1.0.0"
    implementation "android.arch.navigation:navigation-fragment:$nav_version" // use -ktx for Kotlin
    implementation "android.arch.navigation:navigation-ui:$nav_version" // use -ktx for Kotlin
}
复制代码

建立导航图

导航是发生在应用的目标示图之间——用户能够导航到应用当中的任何的位置。将这些目标视图经过操做来链接起来。
导航图是包括全部的目标视图和操做的一个资源文件，这个导航图标表明了咱们应用的全部的导航路径图。

建立导航图须要如下几个步骤：

1. 在Android Studio的主界面，在res目录的文件夹下面，选择New > Android Resource File而后咱们就能够看到 New Resource File对话框。以下图：

   

2. 在File name这一栏当中输入名称，好比“nav_graph”。

   

3. 在Resource type下拉列表而后选择Navigation，点击ok就能够了。
   

   

若是咱们是第一次建立导航图，Android Studio会在res文件夹下面建立一个navigation 的资源文件目录，这个目录当中就包含了咱们刚才建立的资源文件。如图：

打开Navigation Editor控制面板

点击打开刚才建立的Navigation的xml文件，而后选择Design。 咱们能够看到Navigation Editor控制面板自左向右有三部分如图：

控制面板分红了三部分分别是:

1. Destinations panel（目标面板）:列出当前导航的主机以及当前图解编辑器当中的全部目的地。
2. Graph Editor（图解编辑器）: 这里包含了导航图的。
3. Attributes（属性）：显示导航图中当前所选项的属性。

点击Text咱们能够看到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"
            android:id="@+id/nav_graph">
</navigation>
复制代码

这里的</navigation>是导航图的根元素，当咱们要在图标当中添加目标视图和链接动做的时候，咱们可使用<destination>和<action>元素做为子元素。

在activity当中添加NavHost

一个主导航必须由NavHost派生而来，导航组件默认经过NavHost来实现，NavHostFragment来处理目标fragment直接的切换。

在XML文件当中添加NavHostFragment

在咱们应用程序的main activity当中添加NavHostFragment 这里的添加有两种方式 1.复制下面代码到xml的代码文件当中

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

2.在design下面控制面板选择 位置如图：

而后咱们直接拖NavHostFragment 的视图到咱们的activity文件当中

在导航视图当中添加目标视图

这里总共有三种不一样的方式能够在咱们的导航视图当中添加目标视图

添加已经存在的目标视图

若是咱们想把已经存在的目标视图想要添加在导航图当中，咱们只须要点击New Destination而后找到已经存在目标视图，选择便可。
如图：

建立新的目标视图

1. 在导航编辑器当中，点击New Destination而后再选择Create new destination 如图：

   

2. 而后弹出了New Android Component对话框，而后咱们能够建立fragment。 如图：

   

   填写完信息以后，咱们就能够看到界面上出现了咱们刚才建立的目标视图 如图：

   

3. 建立占位目标视图 咱们能够经过占位视图来表示未实现的目标视图。 如图：

   

链接目标视图

目标视图咱们已经建立完成了，接下来咱们就开始链接各个目标视图了。固然，咱们链接目标视图就是经过Navigation Editor来完成。

1. 在Navigation Editor当中打开Design 选项卡，而后咱们能够看到右边有个小圆点，这个就是咱们想要的导航起点。 如图：

   

2. 而后拖拽鼠标，而后链接到了咱们想要连接的目标视图。以后咱们就能够看到一个线的箭头如图：

   

   这个就表示咱们把两个目标视图链接了。
3. 点击这条链接的线，咱们能够看到高亮了，而这条线表明的就是咱们以前说的Action（行为）咱们能够看到右侧有相关属性。 如图：

   

4. 点击Text选项，咱们能够看到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/oneFragment">

   <fragment android:id="@+id/oneFragment" android:name="demo.rlv.cehome.com.navigationcomponents.OneFragment"
             android:label="fragment_one" tools:layout="@layout/fragment_one">
       <action android:id="@+id/action_oneFragment_to_twoFragment" app:destination="@id/twoFragment"/>
   </fragment>
   <fragment android:id="@+id/twoFragment" android:name="demo.rlv.cehome.com.navigationcomponents.TwoFragment"
             android:label="fragment_two" tools:layout="@layout/fragment_two"/>
</navigation>
复制代码

导航到目标视图

导航到目标视图，咱们须要用到NavController，它是用于管理NavHost中的应用程序导航的对象。 每一个NavHost都有本身的相应NavController。
NavController有如下几种获取方式：

对于Java来讲：

• NavHostFragment.findNavController(Fragment)
• Navigation.findNavController(Activity, @IdRes int viewId)
• Navigation.findNavController(View)

对于Kotlin来讲：

• Fragment.findNavController()
• View.findNavController()
• Activity.findNavController(viewId: Int)

下面咱们就看一下在咱们要实现的效果：

下面咱们看一下实现代码，在OneFragment当中

override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        view?.findViewById<Button>(R.id.button_one)?.setOnClickListener {
            view?.let { Navigation.findNavController(it).navigate(R.id.twoFragment)
            }
        }
    }
复制代码

只须要添加就能够实现跳转功能，是否是很方便？

Navigation.findNavController(it).navigate(R.id.twoFragment)
复制代码

对于Button控件来讲，还有另外一种实现跳转的方法

override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
//        view?.findViewById<Button>(R.id.button_one)?.setOnClickListener {
//            view?.let { Navigation.findNavController(it).navigate(R.id.twoFragment)
//            }
//        }
        button_one.setOnClickListener(Navigation.createNavigateOnClickListener(R.id.twoFragment, null))
    }
复制代码

两种跳转分别是传入nav_graph.xml当中的action id和resource id。 两种方法均可以实现跳转，可是我更建议用第一种，由于第一种能够配合着过渡的动画使用。

popUpTo and popUpToInclusive

咱们常见的一种逻辑以下： 有三个目标视图分别是A、B、C，有A到B，B到C，而后C到A。

能够看到当咱们倒C以后，后台堆栈当中包括A、B、C单个实例。当咱们经过popUpTo A回到A的时候，意味着咱们从堆栈当中把B和C删除了。当咱们使用app：popUpToInclusive =“true”的时候，咱们还会把A弹出堆栈并有效的清除它。若是咱们没有使用app：popUpToInclusive =“true”那么也意味着咱们的堆栈当中包含两个A的实例。 实现代码以下：

<action
        android:id="@+id/action_c_to_a"
        app:destination="@id/a"
        app:popUpTo="@+id/a"
        app:popUpToInclusive="true"/>
复制代码

最后

当我尝试写这篇文章，并认真看过了官方文档，本身也实践以后发现Navigation以及Navigation Editor真的很是实用！在代码当中，咱们不用写不少的Activity。写一个Activity嵌套多个Fragment就能够完成，固然这也是谷歌一直推崇的一种方式。那么不一样的Fragment之间的跳转，可能就是摆在咱们面前的一大难题，常常会有这样会那样的问题，同时逻辑不是很清晰而且须要大量的代码用来实现。可是有了Navigation和Navigation Editor以后就有效的解决了这一问题！

项目地址

github.com/yang0range/…

欢迎关注公共号

关注公共号会有更多收获！