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"

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,125评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,293评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,054评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,077评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,096评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,062评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,988评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,817评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,266评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,486评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,646评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,375评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,974评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,621评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,642评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,538评论 2 352

推荐阅读更多精彩内容