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.comhttps://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"

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容