Jetpack学习之Navigation详细教程

前言

官网的教程真的很详细，跟着学的时候一定要下他的demo，然后他会一步一步教你怎么实现，一步一步的看效果

链接奉上：https://developer.android.com/codelabs/android-navigation?hl=zh-cn#0

组成部分

1. 导航图（新 XML 资源）相当于一张地图，标记了各个目的地以及目的地的一些信息
2. NavHostFragment 算一个载体，显示地图，获得控制器
3. NavController 控制器，你可以利用它去你想去的地方

一、图怎么画

在res目录下创建navigation目录，然后new一个Navigation Resource File，这样你就用了自己的地图，然后就可以在上面“作画”了

1. 每一个fragment都是一个目的地，也是一个页面
2. 对于设计fragment的属性：可以直接用代码写入你对目的地属性的设计，也可以直接点显示图中的页面或者导航箭头进行设计（点图直接选属性，自己操作就好啦，这里就不介绍啦）

action

          //切换页面以及切换页面动画的属性
          //加入从A切换到B
           <action
            android:id="@+id/next_action"//跳到下个页面
            app:destination="@id/flow_step_one_dest"//下个页面的id
            app:enterAnim="@anim/slide_in_right"//从右边进来
            app:exitAnim="@anim/slide_out_left"//从左边出去
            app:popEnterAnim="@anim/slide_in_left" //从左进来
            app:popExitAnim="@anim/slide_out_right" />//从右边出去
这四个动画，从效果上看的话，第一二指的是A页面进来的动画和B页面出去的动画
                       第三四则是B页面进来和A页面出去的动画

argument

           <argument
            android:name="flowStepNumber"//属性名称
            app:argType="integer" //类型
            android:defaultValue="1"/>//默认值

如果传递的数据是固定的，明确的值，可以直接写在这里；动态的下面会讲

deeplink（下面内容详细说）

<deepLink app:uri="www.example.com/{myarg}" />

二、页面怎么打开

1. 使用导航图进行导航

findNavController(this).navigate(R.id.flow_step_one_dest, null, options)

1. 使用操作进行导航

这种方法要在xml文件中把activon等属性写好才行

Navigation.createNavigateOnClickListener(R.id.*next_action*, null)

1. 用safe arge进行导航

val flowStepNumberArg = 1
val action = HomeFragmentDirections.nextAction(flowStepNumberArg)
findNavController(this).navigate(action,options)

三、数据怎么传

这里做个总结吧，毕竟上面的内容都有体现啦

1. 是直接在xml文件中，设置argument属性
2. 是利用safe arge，打开页面的时候传递数据

四、系列导航栏怎么搭配的

统一的，导航栏中显示的项都是在xml文件中声明的，举一个例子就都明白了

在res目录中-创建menu文件夹-创建Menu Resource file文件，eg：

<menu xmlns:android="<http://schemas.android.com/apk/res/android>">
    <item
        android:id="@id/home_dest" //要跳转的页面Id
        android:icon="@drawable/ic_home"//图标
        android:title="@string/home" />//内容
    <item
        android:id="@id/deeplink_dest"
        android:icon="@drawable/ic_android"
        android:title="@string/deeplink" />
</menu>

1. 底部导航按钮

创建布局文件

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_nav_menu" />//就是我们创建的menu文件

java文件中关联

private fun setupBottomNavMenu(navController: NavController) {
        val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_nav_view)
        bottomNav?.setupWithNavController(navController)
 //navController 指的是最开始说的控制器
    }

1. 侧边栏（抽屉式）

布局文件

<com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_drawer_menu" />

java文件中设置

//跟底部导航栏思路一样，布局+设置控制器就可以实现侧边栏的跳转和侧边栏的存在，
//但是展示出来还需要有按钮，所以还需要设置acitonabar
private fun setupNavigationMenu(navController: NavController) {
    val sideNavView = findViewById<NavigationView>(R.id.nav_view)
    sideNavView?.setupWithNavController(navController)
}
//以下是为了让侧边栏有按钮点击可以展示出来的添加actionBar的操作

//通过传递一组顶级目的地 ID 和抽屉式导航栏布局来创建 AppBarConfiguration（可以理解为，基础信息的配置：比如显示的条目啊，要跳到哪里啊）
//DrawerLayout是根布局，具体的可以看官方demo
val drawerLayout: DrawerLayout? = findViewById(R.id.drawer_layout)
appBarConfiguration = AppBarConfiguration(
                setOf(R.id.home_dest, R.id.deeplink_dest),
                drawerLayout)

//设置actionBar，添加按钮的展示
private fun setupActionBar(navController: NavController,
                           appBarConfig : AppBarConfiguration) {
    setupActionBarWithNavController(navController, appBarConfig)
}
//处理up按钮的操作
override fun onSupportNavigateUp(): Boolean {
    return findNavController(R.id.my_nav_host_fragment).navigateUp(appBarConfiguration)
}

1. 下拉菜单

生搬硬套，反正就是告诉你咋写就咋写吧

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        val retValue = super.onCreateOptionsMenu(menu)
        val navigationView = findViewById<NavigationView>(R.id.nav_view)
        if (navigationView == null) {
            menuInflater.inflate(R.menu.overflow_menu, menu)
            return true
        }
        return retValue
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return super.onOptionsItemSelected(item)
        return item.onNavDestinationSelected(findNavController(R.id.my_nav_host_fragment))
                || super.onOptionsItemSelected(item)
    }

五、deeplink怎么实现
1、打开 mobile_navigation.xml 添加

<fragment
    android:id="@+id/deeplink_dest"
    android:name="com.example.android.codelabs.navigation.DeepLinkFragment"
    android:label="@string/deeplink"
    tools:layout="@layout/deeplink_fragment">

    <argument
        android:name="myarg"
        android:defaultValue="Android!"/>

    <deepLink app:uri="www.example.com/{myarg}" />
</fragment>

系统会将没有架构的 URI 视为 http 和 https。例如，www.example.com 将匹配 http://www.example.com 和 https://www.example.com。
您可以使用 {placeholder_name} 形式的占位符来匹配一个或多个字符。占位符的字符串值在具有相同名称的键的参数 Bundle 中提供。例如，http://www.example.com/users/{id} 将匹配 http://www.example.com/users/4。
您可以使用 .* 通配符匹配 0 个或多个字符。

2、打开AndroidManifest文件

<activity android:name=".MainActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>

    <nav-graph android:value="@navigation/mobile_navigation" />
</activity>

3、测试
连上手机
在as的命令行中输入
adb shell am start -a android.intent.action.VIEW -d "http://www.example.com/urlTest"